码迷,mamicode.com
首页 > 其他好文 > 详细

前端入门1--导航栏

时间:2018-08-03 11:35:30      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:order   分享   www.   code   span   view   line   入门   open   

技术分享图片
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>导航栏</title>
 6     <style>
 7         *{
 8             margin: 0;
 9         }
10         ul{
11             margin: 0 auto;
12             border: 3px lightblue solid;
13             width: 700px;
14             height: 50px;
15             cursor: pointer;
16         }
17         ul li{
18             display: inline-block;
19             margin-right: 40px;
20             margin-top: 15px;
21         }
22         ul>li>a{
23             font-size: 18px;
24             text-decoration: none;
25             color: darkmagenta;
26         }
27         ul>li>a:hover{
28             color: cornflowerblue;
29             font-weight: bold;
30         }
31     </style>
32 </head>
33 <body>
34     <ul>
35         <li><a href="http://www.baidu.com">Node培训课程</a></li>
36         <li><a href="http://www.baidu.com">HTML5培训课程</a></li>
37         <li><a href="http://www.baidu.com">视频教程</a></li>
38         <li><a href="http://www.baidu.com">课件文档</a></li>
39         <li><a href="http://www.baidu.com">联系我们</a></li>
40     </ul>
41 </body>
42 </html>
View Code

技术分享图片

实现效果如上图。

前端入门1--导航栏

标签:order   分享   www.   code   span   view   line   入门   open   

原文地址:https://www.cnblogs.com/Lia-633/p/9412854.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!