【teemo】[20161124][html]简单导航栏


实现的基本功能：

1、使用nav元素定义一个导航栏；

2、导航栏内元素：使用<ul>与<li>定义的一个列表展示导航栏的项

3、导航栏的每一个项都是一个超链接<a>，在鼠标移动上去的时候，会高亮显示；

实际效果：

遇到的问题：

1、使<a>标签按块显示、调整宽高后可以呈现比较好看的效果；但调整高度后<a>标签内容不能垂直居中

解决方法1、

<a>display=inline-block width=60 height=30

设置行高属性line-height=30，可以满足文字只有一行的时候，在<a>标签中是居中的

解决方法2、

设置<a> display=flex;justify-content=center;align-item:center;

可以满足内容垂直与水平都居中

a标签的小知识点：

a标签有四个状态，link、visited、action、hovor

这四个状态可以分别设置样式

完整代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>简单导航栏 - 1 - ul + a</title>
 6     <style type="text/css">
 7         * {
 8             margin: 0px;
 9             padding: 0px;
10             border: 0px;
11         }
12 
13         #nav-div {
14             height: 40px;
15         }
16 
17         #nav-ul {
18             width: 480px;
19         }
20 
21         .nav-li {
22             display: inline;
23             text-align: center;
24             float: left;
25         }
26 
27         .nav-item {
28             display: flex;
29             justify-content: center;/*水平居中*/
30             align-items: center;/*垂直居中*/
31             text-decoration: none;
32             width: 60px;
33             height: 30px;
34             padding: 5px;
35             padding-left: 10px;
36             padding-right: 10px;
37         }
38 
39         .nav-item:link, .nav-item:visited {
40             background-color: cornsilk;
41             color: #000;
42         }
43 
44         .nav-item:active, .nav-item:hover {
45             background-color: burlywood;
46             color: #ffffff;
47         }
48     </style>
49 </head>
50 <body>
51 <div id="nav-div">
52     <ul id="nav-ul">
53         <li class="nav-li"><a class="nav-item" href="#">导航1</a></li>
54         <li class="nav-li"><a class="nav-item" href="#">导航2</a></li>
55         <li class="nav-li"><a class="nav-item" href="#">导航3</a></li>
56         <li class="nav-li"><a class="nav-item" href="#">导航4</a></li>
57         <li class="nav-li"><a class="nav-item" href="#">导航5</a></li>
58         <li class="nav-li"><a class="nav-item" href="#">导航6</a></li>
59     </ul></div>
60 </body>
61 </html>

 

posted @ 2016-11-24 09:31  张庭岑  阅读(45)  评论(0)    收藏  举报