1、布局原则:从外往内,从上往下,从左到右。
2、流程:
(1)清除掉浏览器自带的CSS样式
*{
margin: 0;
padding: 0;
}
(2)生成基本HTML结构后先创建一个类选择器nav
(3) 给“nav”添加CSS样式:宽度640px,高度40px,上边框粗3px,实线,上边框颜色和导航背景色都是#a01599,并且水平居中(注意不要漏写了像素单位px,否则会显示不出来)
显示如下:
(4)在<div>盒子里,增加7个被<ul>标签包裹的<li>标签,并且<li>标签里包裹了,链接地址为#的<a>标签,并且给a标签分别增加文字为“首页”、“娱乐”、“财经”、“体育”、“军事”、“国际”、“教育”。
①写出一行<li><a href="#"></a></li>,让光标在这一行闪烁,然后按ctrl+c复制
②再粘贴6个<li>在这一行下面,数量达到7个
显示效果如下:
(6)给li增加浮动,让它们在一行排列
,并且去掉无序列表前的7个圆点点:
显示效果如下:
(5) 给<a>标签增加宽度为80px,高度为40px、背景色green,用快捷写法:“w80+h40+bgc”
.nav li a{
width:80px;
height: 40px;
background-color:green;
(6)
①将<a>转换为行内块或是块,
display:inline-block;
②将文字内容设置为水平居中:
text-align: center;
③将文字内容设置为垂直居中,即设置行高line-height=height,此处的height由于是40px,所以这里的行高我们也设置为40px:
line-height: 40px;
④去掉<a>的背景色,将文字颜色改为白色:
color:#fff;
⑤去掉<a>文字下面的下划线:
text-decoration: none;
显示如下:
(7)给导航增加悬停效果:
.nav li a:hover{
background-color: #ffdcfd;
color: #50044d;
}
鼠标悬停时,导航的效果:
一个新闻类的导航就制作好了~