CSS布局

ul li 去掉点

ul li{
    list-style-type:none;
}

不生效，原因：CSS文件导入路径错误。

ul li 横排

header-bar ul{
	float:left;
}

不生效，原因：1.header-bar为class；2.定位的是li。正确如下

.header-bar-ul li{
	float:left;
}

设置内容居中显示

.header-bar ul{
	display: block;
	width:1200px;
	height:31px;
	margin:0 auto;
}

1.定义块；2.定义宽高；3.定义自动的左右边距（最重要）
导航条设置

html：

<span style="white-space:pre">			</span><div class="header-body">
				<div class="header-logo"> </div>
				<nav>
					<a href="#">首页</a>
					<a href="#">关于我们</a>
					<a href="#">服务项目</a>
					<a href="#">行业新闻</a>
					<a href="#">娱乐活动</a>
					<a href="#">健康监测</a>
					<a href="#">保健常识</a>
					<a href="#">联系我们</a>
					<a href="#">义工支持</a>
				</nav>
			</div>

CSS：

.header-body{
	width:1200px;
	height:106px;
	margin:0 auto;
	clear: both;//清楚浮动
}
.header-logo{
	display: block;
	width:268px;
	height:106px;
	float:left;
	background:url(../img/logo_combo.gif) left center no-repeat;
}
nav a{
	display:block;/*?为啥需要block*/
	width:100px;
	height: 106px;
	overflow: hidden;
	text-align:center;
	float:left;/*header-body的clear对它有什么影响*/
	line-height: 150px;
}

轮播图设置

需求左右填充满：

.banner-info{
	display: block;
	width:100%;
	height: 500px;
	margin:0 auto;
}
.banner-info img{
	width:100%;
}

排列（一列）

方法1

.bodyer{
	width:1200px;
	margin:0 auto;
	clear:both;
}
.bodyer-caption{
	width: 180px;
	height: 270px;
	float:left;
	background: #AC1F23;
	color:#FFF;
}
.bodyer-item{
	background: url(../img/fuwu-item.jpg);
	width:230px;
	height: 270px;
	float:left;
	margin:0px 0 25PX 25px; 
	position: relative;

}

父级：1.设置宽度；2.居中；3.清除悬浮

子级：设置宽高；2.悬浮靠左；3.设置外边距；4.相对位置。

方法2

.fuwu-bot{
	width:100%;
	height: 201px;
	margin: 0 auto;
	clear:both;
	background:#F1F1F1 url(../img/b1.jpg) center center no-repeat;
}
.fuwu-bot-inner{
	width: 1200px;
	height: 201px;
	margin: 0 auto;
	position: relative;
}
.fuwu-bot a{
	display: block;
	width:148px;
	height: 148px;
	border:1px solid #c5c5c5;
	border-radius: 74px;
	background: #FFF;
	position:absolute;
	top:29px;
	cursor:pointer;/*设置鼠标样式*/
}
.fuwu-bot .i1{
	left:20px;
}

.fuwu-bot .i2{
	left:222px;
}
.fuwu-bot .i3{
	left:444px;
}
.fuwu-bot .i4{
	left:666px;
}

最顶级：1.设置宽高度；2.居中；3.清除悬浮；4.背景（这一级的宽高、居中是指背景）

次级：1.设置宽高；2.居中；3.相对位置（这一级的宽高、居中是指内容）

再次级：1.块；2.设置宽高；3.边框；4.边框弧度；5.背景颜色；6.字体颜色；7绝对路径；8.边距；9.鼠标样式；（这一级详细设计块内容的共性）

最后一级：1.左边距设置各自的位置。

position

relative：相对定位是相对对同级元素定位，也就是上一个同级元素。

absolute：绝对定位就是相对父级元素的定位，不受父元素内其他子元素的影响。

static：默认值，没有定位，元素出现在正常的流中（忽略top,bottom,left,right或者z-index声明）

fixed：绝对定位，相对浏览器窗口进行定位。（少用）

inherit：规定应该从父元素继承position属性的值。（少用）

关于relative和absolute

例子链接（只做学习使用）：http://yexiaodong.github.io/Demo/Demo1/index.html

参考：http://www.yunfangxin.com/