码迷,mamicode.com
首页 > Web开发 > 详细

CSS简单样式练习(三)

时间:2019-11-07 13:10:01      阅读:81      评论:0      收藏:0      [点我收藏+]

标签:简单   image   技术   mamicode   alt   list   color   ext   lis   

运行效果:

技术图片

 

 源代码:

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单</title>
 6     <style type="text/css">
 7         *{
 8             margin: 0;
 9             padding: 0;
10             border: none;
11         }
12 
13         .container{
14             width: 288px;
15             background-color: #FCFCFC;
16             border-top: 1px solid orangered;
17         }
18 
19         ul{
20             height: 40px;
21             line-height: 40px;
22         }
23 
24         ul li{
25             list-style: none;
26             padding: 0 8px;
27             float: left;
28         }
29 
30         ul li:hover{
31             background-color: #EDEEF0;
32         }
33 
34         ul li a{
35             color: #7B91B6;
36             text-decoration: none;
37         }
38 
39         ul li a:hover{
40             color: #FF8400;
41         }
42     </style>
43 </head>
44 <body>
45     <div class="container">
46         <ul>
47             <li><a href="#">设为首页</a></li>
48             <li><a href="#">移动客户端</a></li>
49             <li><a href="#">你好</a></li>
50             <li><a href="#">Pad版</a></li>
51         </ul>
52     </div>
53 </body>
54 </html>

 

CSS简单样式练习(三)

标签:简单   image   技术   mamicode   alt   list   color   ext   lis   

原文地址:https://www.cnblogs.com/yijiahao/p/11811311.html

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