CSS笔记（三）

七、布局

1.让布局居中

1.1 自动空白边技术 margin: 0 auto;

margin: 0 auto;

1.2 使用定位和负值的空白边

将容器的position设置为relative，将left属性设置为50%——这会把容器的左边缘定位在页面的中间。
然后对容器的左边缘应用一个负值的空白边，宽度等于容器宽度的一半，这就会把容器向左移动它宽度的一半，从而让它的屏幕居中显示：

#container{
	width: 1000px;
	height: 1200px;
	background-color: gainsboro;
	position: relative;
	left: 50%;
	margin-left:-500px;  /*容器宽度的一半*/
}

2. 基于浮动的的布局

两列布局和三列布局（别忘了清除浮动）

<div id="container">
	<div id="header"></div>
	<div id="leftMenu"></div>
	<div id="content"></div>
	<div id="footer"></div>
</div>

<style>
			#container{
				width: 1000px;
				height: 700px;
				background-color: gainsboro;
				margin: 0 auto;  /* 居中 */
			}
			
			#header{
				width: 100%;
				height: 50px;
				background-color: cornflowerblue;
			}
			#leftMenu{
				width: 200px;
				height: 500px;
				background-color: green;
				float: left;
			}
			#content{
				width: 800px;
				height: 500px;
				background-color: burlywood;
				float: left;
			}
			#footer{
				width: 100%;
				height: 100px;
				background-color: pink;
				clear: both; /*清除上面div的浮动*/
			}
</style>

八、应用

1. 导航栏 ul li

导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素是非常合适的。

2. 图片库

tips:

• 两个内容之间的空隙：外面的padding 或 里面（下面）的margin
  当有背景色的时候，建议用margin，不会有填充色
• hover时的注意事项：
  

3. 图片透明度（opacity）

3.1. 图片透明度

3.2 透明框中的文本

4. 动画（略 @keyframes myfirst）

5. 背景图片定位（background-position 例：w3school）

1）关键字：background-position: top left;
2）像素：background-position: 0px 0px;
3）百分比：background-position: 0% 0%;（不推荐）
动态效果是通过移动背景图的位置实现的，好处一次访问，反应快

例子：把下图的1234横排显示。

<div class="wrap">
	<div class="box box1"></div>
	<div class="box box2"></div>
	<div class="box box3"></div>
	<div class="box box4"></div>
</div>

.box {
	float: left;
	background: #F3F2E2 url(1234.png) no-repeat;
	width: 100px;
	height: 100px;
	margin-right: 1em;
	/*position: relative;*/
}		
.box1 {
	background-position: 0px 0px;
}		
.box2 {
	background-position: 0px -100px;
}
.box3 {
	background-position: 0px -200px;
}
.box4 {
	background-position: 0px -300px;
}