- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在查看 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/
我想在我的网站页面的主要内容区域中添加一个图像和内容网格。 我有一个基本的两列模板,我想将网格放置在大内容区域中。一切正常,但是一旦我调整为纵向,我就会失去 div 之间的所有边距。我不太确定将这些项
在 https://symfony.com/doc/current/setup.html你被指示运行: composer create-project symfony/website-skeleton
1. 效果图 自己画一张图,原图 VS 骨架效果图如下: opencv logo原图 VS 骨架化效果图如下: 2. 源码 # 图像骨架化~import cv2import im
我正在尝试使用 Visual Studio 2015 设置一个 kinect 传感器(旧版本 - v1)。我确实下载了 SDK v2.0。 我正在尝试构建手势检测器类。我在网上找到了一些使用骨架类的源
我正在使用 Skeleton css 样板文件。我有以下 html: some content here... some bottome
我在生产环境中有一个巨大的数据库,我需要复制一份,但问题是数据超过 100Gb,下载备份是不可能的。我需要获取数据库的“骨架”图像。我所说的“骨架”是指,我需要获取数据库大纲,以便我可以通过运行 SQ
我正在查看 www.getsculpture.com。我的页眉和页脚应该跨越 100%。我可以在不“破坏”框架的情况下做到这一点吗?或者我应该将布局限制为 960px? 最佳答案 我意识到这是一篇较旧
我想为我们应该实现的对象文字声明一个“骨架”接口(interface)。 当时我们正在创建AttributeGettersSkeletonType ,我们不知道 getter 将返回什么类型 - 只知
我使用 curl | 在 Linux 上安装了 Meteor 的全新副本sh 命令,以及在 Windows 上使用 Meteor 客户端。 当我运行以下一系列命令时: $ meteor create
我广泛使用了 Bootstrap,并经常使用 css 类从移动 View 中隐藏各种元素。 Skeleton CSS 是否有类似的功能来隐藏移动设备上的内容? 最佳答案 使用下面的媒体查询示例: @m
我有这样的需求。这是我的家庭类快照。 它包含几个店铺形状。为此,我使用了这段代码: ArrayList points2 = new ArrayList(); points2.add(vertex.Ge
我喜欢Skeleton但我有几个问题: 为什么使用像素大小都可以使用相对/em 大小来实现? 这是因为它是实现 x 浏览器兼容性的唯一可靠方法吗? .. 因为使用 em 尺寸感觉更合适/面向 futu
是否可以运行 package.skeleton('pkgname')并拥有所有 .R文件最终在一个文件或一组文件中,而不是每个函数一个文件? 一位与我合作的开发人员问我为什么将每个函数放在一个单独的文
这个问题是关于 a few years ago 的没有可接受的答案。我想知道情况是否发生了变化,现在可以使用 Skeleton CSS带有固定的响应式侧边栏。最好不需要 Javascript。 我的H
尝试将子菜单项添加到导航中,但即使在导航中使用正确的 HTML,子菜单也不会显示。 它使用 Skeleton wordpress 主题,标题在需要时手动更新,但需要添加子菜单。 HTML:
我想更改 Skeleton CSS 网格中的断点。本质上,一旦浏览器达到 1000 像素,我希望右侧的列堆叠在左侧六列下方。这是我正在使用的示例代码:
现在我有两个使用“二分之一列”类的 div。 正如您在这里看到的,左侧底部的卡片仍然与右下角的卡片对齐。 我想要像这样的 Pinterest 样式,但我不知道怎么做,因为它们在不同的行中。 这是我的
我真的很喜欢这个工具,因为它们简单紧凑。但有时我会遇到缺少插件/代码片段的问题(我的 JS 技能也很弱,通常我是后端开发人员),所以这是其中一种情况: 例如,我有这样一个简单的形式:
我正在使用 Skeleton CSS Framework 创建一个表格,如下所示: V1504 Currently Active Jobs
我需要一个干净的框架,没有默认的演示和配置,以了解所有配置过程,从零开始,以及为 Symfony 2 打包创建。 谢谢! 最佳答案 下载 Standard Edition对于 Acme 演示,在该分发
我是一名优秀的程序员,十分优秀!