推荐阅读
  • CSS 图像透明/不透明

    [mystyle] #klem1,#klem2 { opacity:0.4; filter:alpha(opacity=40); /* For IE8 and earlier */ } #klem1:hover,#klem2:hover { opacity:1.0; filter:alpha(opacity=100); /* For IE8 and earlier */ } div.backgro

  • CSS Table(表格)

    CSS 表格 使用 CSS 可以使 HTML 表格更美观。 Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang M

  • CSS Display(显示)

    [mystyle] .imgbox { float:left; text-align:center; width:120px; height:135px; border:1px solid gray; margin:4px; padding:0px; } .thumbnail { width:110px; height:90px; margin:3px; } .box { width:110px

  • CSS 下拉菜单

    [mystyle] .dropbtn { background-color: #4CAF50; color: white; padding: 16px; font-size: 16px; border: none; cursor: pointer; } .dropdown { position: relative; display:

  • CSS Border(边框)

    CSS 边框 CSS 边框属性 CSS边框属性允许你指定一个元素边框的样式和颜色。 在四边都有边框 红色底部边框 圆角边框 左侧边框带宽度,颜色为蓝色 边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style 值: none: 默认无边框 dotted: 定义一个点线边框 dashed: 定义

  • CSS 对齐

    CSS 布局 - 水平 & 垂直对齐 水平 & 垂直居中对齐 元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度,并将两边的空外边距平均分配: div 元素是居中的 实例 [mycode3 type='cs

  • CSS 属性选择器

    CSS 属性 选择器 具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意:IE7和IE8需声明!DOCTYPE才支持属性选择器!IE6和更低的版本不支持属性选择器。 属性选择器 下面的例子是把包含标题(title)的所有元素变为蓝色: 实例 [mycode3 type='css'] [title] { color:bl

  • CSS 导航栏

    CSS 导航栏 ul.horizontal { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } ul.horizontal li { float: left; padding: 0; margin: 0

  • 网格视图

    响应式 Web 设计 - 网格视图 什么是网格视图? 很多网页都是基于网格设计的,这说明网页是按列来布局的。 使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。 响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。 响应式网格视图 创建响应式网格视图接下来我们来创建一个响应式网格视图。 首先确保所有的 HTML 元素都有 box-sizi

  • CSS 网页布局

    CSS 网页布局 网页布局 网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 头部区域 头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo: CSS3 实例 [mycode3 type='css'] .header { background-color: #F1F1F1; text-align

网格视图

什么是网格视图?

很多网页都是基于网格设计的,这说明网页是按列来布局的。

使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。

响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。

响应式网格视图

创建响应式网格视图

接下来我们来创建一个响应式网格视图。

首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box

确保边距和边框包含在元素的宽度和高度间。

添加如下代码:


* {

    box-sizing: border-box;

}

查看更多 box-sizing 内容请点击:CSS3 box-sizing 属性

以下实例演示了简单的响应式网页,包含两列:


	.menu {    width: 25%;    

	float: left;}

	.main {    width: 75%;    

	float: left;}

以上实例包含两列。

12 列的网格系统可以更好的控制响应式网页。

首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。

在每列中指定 class, class="col-" 用于定义每列有几个 span :


	.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}

	.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}

	.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}

	.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 

	100%;}

所有的列向左浮动,间距(padding) 为 15px:


	[class*="col-"] {    float: left;    

	padding: 15px;    border: 1px solid red;}

每一行使用 <div> 包裹。所有列数加起来应为 12:

<div class="row">  <div class="col-3">...</div>  <div class="col-9">...</div></div>

列中行为左浮动,并添加清除浮动:


	.row:after {    content: "";    

	clear: both;    display: block;}

我们可以添加一些样式和颜色,让其更好看:


	html {    font-family: "Lucida Sans", sans-serif;}

	.header {    background-color: #9933cc;    

	color: #ffffff;    padding: 15px;}.menu ul {    

	list-style-type: none;    margin: 0;    

	padding: 0;}.menu li {    

	padding: 8px;    margin-bottom: 7px;    

	background-color :#33b5e5;    color: #ffffff;    

	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}.menu li:hover {    

	background-color: #0099cc;}
关于我们 免责声明 联系我们
Copyright © 2021 爱学习网 浙ICP备18049359号 网站地图 Google地图