ul li 去掉点
ul li{
list-style-type:none;
}
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/