【博学谷学习记录】超强总结，用心分享丨新闻导航的制作流程

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;

}

 鼠标悬停时，导航的效果：

 一个新闻类的导航就制作好了~