链接导航案例
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.写案例时一定要按照先框架后样式写,做到思路清晰,简洁明了