链接导航案例

 1  1 <!DOCTYPE html>
 2  2 <html lang="en">
 3  3 <head>
 4  4     <meta charset="UTF-8">
 5  5     <title>Document</title>
 6  6     <style type="text/css">
 7  7         .nav{
 8  8              height:60px;
 9  9              background-color:#aaa;
10 10              text-align:center;
11 11              color:#000;
12 12              font-weight:700px;
13 13          }
14 14         a{
15 15             display:inline-block;
16 16             width:100px;
17 17             height:60px;
18 18             text-decoration:none;
19 19         }
20 20         a:hover{
21 21             background-color:#eee;
22 22             text-decoration:underline;
23 23             color:#f14400;
24 24         }
25 25         a.public{
26 26             color:#f14400;
27 27             font-weight:700;
28 28         }
29 29     </style>
30 30 </head>
31 31 <body>
32 32     <div class=nav>
33 33     <a href="#" class="public">天猫</a>
34 34     <a href="#" class="public">聚划算</a>
35 35     <a href="#" class="public">超市</a>
36 36     <a href="#" class="public">头条</a>
37 37     <a href="#">阿里旅行</a>
38 38     <a href="#">电器城</a>
39 39     <a href="#">淘抢购</a>
40 40     <a href="#">智能生活</a>
41 41     <a href="#">苏宁易购</a>
42 42     </div>
43 43 </body>
44 44 </html>

总结：
1.开始总结写的时候思维比较混乱，没有按照先写框架在写样式的步骤来写，导致代码看起来特别乱，还有就是用标签不是特别熟练，所以要勤加练习
2.写案例时一定要按照先框架后样式写，做到思路清晰，简洁明了

猜你喜欢