我正在查看 www.getsculpture.com。我的页眉和页脚应该跨越 100%。我可以在不“破坏”框架的情况下做到这一点吗?或者我应该将布局限制为 960px?
最佳答案
我意识到这是一篇较旧的帖子,但我想添加我的解决方案,以防将来其他人需要该信息:
是的,您仍然可以使用骨架来制作多宽度布局。我采用了 Skeleton 框架,还改编了《杂志》中的一些 CSS/html。示例网站可以满足我的需求。
------ HTML 代码 - 放在“Body”标签之间 -------------
<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 代码添加到您的标准骨架“layout.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;
}
============================================
这应该给你以下内容:
顶部的全宽颜色条,可以选择在其中添加链接/导航 Logo 、主导航、横幅/专题图形的标题区域 正文的 3 列居中布局 全宽页脚和下方的制作人员名单
希望这对那里的人有帮助! 分享知识! :) ≈
关于css - Skeleton CSS - 如何跨越屏幕的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10380351/