骨架 CSS - 如何跨越屏幕宽度 - Skeleton CSS - how to span the width of the screen? 小贝子编程网

我在看 www.getskeleton.com。我的页眉和页脚应该跨越 100%。我可以在不"破坏"框架的情况下做到这一点吗？还是我应该将布局限制为 960px？

我意识到这是一个较旧的帖子，但我想添加我的解决方案，以防将来其他人需要这些信息：

是的，您仍然可以使用骨架进行多宽度布局。我采用了 Skeleton 框架，并从"杂志"示例站点中改编了一些 CSS/html 来满足我的需求。

------ HTML 代码 - 放在"正文"标签之间 -------------

<div id="top">
    <div id="top-nav">
        <nav class="top-subnav">
            BUTTON · BUTTON · BUTTON · BUTTON · BUTTON · BUTTON · BUTTON · BUTTON
        </nav>
    </div>
</div>    
<div class="container">
    <header>
       <div class="three columns">
            <!-- LOGO --><img src="#" alt="Description"> 
       </div>
       <div class="thirteen columns">
            <nav class="main-nav">
                <ul class="main-nav">                            
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                    <li>BUTTON</li>
                </ul>
            </nav>
       </div>
    </header>   

    <div class="sixteen columns">
        <!-- Feature Banner image -->
    </div>
    <!-- ===== MAIN BODY ====== -->    
    <!-- LEFT COLUMN ---------- -->        
    <div class="four columns">
        <!-- Left column content goes here -->    
        <ul>                            
            <li>BUTTON</li>
            <li>BUTTON</li>
            <li>BUTTON</li>
            <li>BUTTON</li>
            <li>BUTTON</li>
        </ul>
    </div>   

    <!-- CENTER COLUMN ---------- -->        
    <div class="eight columns">
        <!-- Center column content goes here -->
        <h3>Main Title</h3>
        <h5 class="eventTitle">Article Title</h5><br />
        <p class="eventDetail">October 8, 2012 · 5pm - 8pm</p>
        <p class="eventDescrip">Skeleton is a small collection of well-organized CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17" laptop screen or an iPhone.
        </p>                                                                
    </div>

    <!-- RIGHT COLUMN ---------- -->        
    <div class="four columns">
        <!-- Right column content goes here -->
        <form class="search clearfix">
            <input type="search" placeholder="eg: Website Design" value="">
            <button type="submit">Search</button>
        </form>
        <form class="search clearfix">
            <input type="search" placeholder="you@email.com" value="">
            <button type="submit">Sign-up</button>
        </form>
    </div>
</div>

    <!-- ===== FOOTER ====== --> 
<div class="footer">    
        <footer class="container">
            <div class="four columns">
                <header><h6>Sample Title</h6></header>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            </div>

            <div class="four columns">
                <header><h6>Sample Title</h6></header>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            </div>
           <div class="four columns">
                <header><h6>Sample Title</h6></header>
                    <ul>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                        <li>Link</li>
                    </ul>
            </div>

            <div class="four columns textRight">
                   <span class="contactTitle">Business Name</span> <br />
                   12345 Main Road<br />
                   City, CO 80334<br />
                   (505) 555-5555<br />
                   Contact Us
            </div>
        </footer>
</div>
<div id="Credits">
Website Design by Dominical Design & Development · www.dominicaldesign.com · Indian Hills, Colorado
</div>

====

======================================================

...... 然后。。。。。。。。。。将以下 CSS 代码添加到标准骨架"布局.css"文件中

------- CSS 代码---------------------------------

* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}
body    {
color: #333333;
padding: 0px;   
    }
img {
max-width: 100%;
}

#top    {
width: 100%;
background: #069;
border-bottom: 3px solid #FC6;
padding: 8px;
margin: 0px;
}
nav.main-nav    {
text-align: right;
font-size: 12px;
padding: 110px 0px 0px 0px;
color: #666666;
}
nav.top-subnav  {
font-size: 11px;
color: #f6f6f6;
text-align: center;
}
nav.main-nav ul li {
display: inline;
list-style-type: none;
padding-left: 20px; 
}
#Feature-Banner {
width: 100%;
margin: 0px 0px 20px 0px;
}
.footer {
width: 100%;
background-color: #063;
color: #f6f6f6;
margin: 20px auto 0px auto; 
padding: 20px 0px;
font-size: 10px;
line-height: 18px;
}
.footer ul li   {
margin: 0px 0px 0px 15px;
line-height: 16px;
font-size: 10px;
}
.footer h6 {
color: #CCC;
margin: 0px 0px 5px 0px;    
}
.textRight  {
text-align: right;  
}
.contactTitle   {
font-weight: bold;
font-size: 11px;
}
#Credits    {
width: 100%;
font-size: 11px;
background-color: #033;
color: #cccccc;
text-align: center; 
padding: 20px 10px;
letter-spacing: 0.09em;
border-top: 1px solid #444444;
}

====

============================================

这应该为您提供以下内容：

顶部的全宽颜色条，可选择在其中添加链接/导航徽标、主导航、横幅/功能图形的标题区域主体的 3 列居中布局全宽页脚和制作者名单栏位于下方

希望这对那里的人有所帮助！分享知识！ :)≈

这是来自

骨架示例页面的代码片段，HTML 将容器包装在另一个div 中。在示例中，它是一个完整的图像背景，从屏幕的一端到下一端使用

background-image: url('../images/values-bg.jpg'); 
background-size: cover;

在 CSS 文件中的 .values我将其简化为灰色背景，但您要做的就是将上面的值包含在指向图像的链接中，您就可以开始了。我希望这能更好地回答你的问题。

<div class="section values">
<div class="container">
  <div class="row">
    <div class="one-third column value">
      <h2 class="value-multiplier">67%</h2>
      <h5 class="value-heading">Purchase Increase</h5>
      <p class="value-description">Percentage of users more likely to purchase on mobile friendly site.</p>
    </div>
    <div class="one-third column value">
      <h2 class="value-multiplier">90%</h2>
      <h5 class="value-heading">Multi-device Users</h5>
      <p class="value-description">Most of the world accesses the internet on multiple devices.</p>
    </div>
    <div class="one-third column value">
      <h2 class="value-multiplier">66%</h2>
      <h5 class="value-heading">Sad Users</h5>
      <p class="value-description">Percentage of users that are frustrated with page load times.</p>
    </div>
  </div>
</div>

.CSS：

.values {
background-color: #aaa;
color: #fff;
padding-bottom: 5rem;
}

您可能不想要固定元素，但这是一种在不更改其父元素行为的情况下使元素全宽的方法。

注意：与绝对定位类似，元素将从流中取出，并且需要相应地更改底部的顶部。填充以适应每个元素的高度应该这样做。

header,
footer{
  position: fixed;
  width: 100%;
}
header{
  top: 0;
  left: 0;
}
footer{
  bottom: 0;
  left: 0;
}

>不。即使你给出宽度=100%，它也不会起作用。因为网页垂直分为两部分。您的标题显示在右侧。如果你使用瓷砖会更好。

伪全屏的一个选项是将容器div 嵌套在语义 html5 标签或更大的div 中。

跳到 http://lostworldsfairs.com 查看一个很好的例子。请参阅下面的解释。

从你的 html 开始：

<body>
 <header id="masthead">
  <div class="container sixteen columns">
   <hgroup>
    <img class="scale-with-grid" src="images/logo.png" />
    <h1>Masthead Title</h1>
    <p>Website tag line</p>
   </hgroup>
  </div>
 </header>
 <section id="main">
  <div class="container">
   <div class="two-thirds columns">
    <header>
     <h1>Page Title</h1>
    </header>
    <p>Meat of the page</p>
   </div><!-- close column -->
   <div class="one-third column">
    <p>side column stuff</p>
   </div><!-- close column -->
  </div><!-- close container -->
 </section>
 <footer id="attribution">
  <div class="container">
   <p>attribution</p>
  </div><!-- close container -->
 </footer>
</body>

然后，你的 css：

header,section,footer{
 overflow:auto;
}
header#masthead{
 background:#ccc;
}
footer#attribution{
 background:#ccc;
}

现在，较大的元素填充了空间，而容器div 的位置很好。

好的，对于那些仍在寻找答案的人，就像我 15 分钟前一样，这就是我所做的。我不会在我想要的 100% 宽度的元素上使用骨架样板。例如，我想要顶部导航的完整宽度，但我也想要一个主要内容和一个侧边栏。这是一些代码

<nav class="navig-bar">
    <ul>
        <li class="pages">Page 1</li>
        <li class="pages">Page 2</li>
        <li class="pages">Page 3</li>
    </ul>
</nav>
<div class="container">
    <section class="eleven columns">Main Content</section>
    <aside class="five columns">Sidebar Content</aside>
</div>

和 CSS

.navig-bar{width: 100%;}
    .navig-bar ul{list-style: none;text-align: center; }
        .navig-bar ul li{display: inline-block;}

这将完成工作，至少它对我来说效果很好。

骨架 CSS - 如何跨越屏幕宽度

相关内容

最新更新

热门标签：