菜单制作:ul li横向排列

2020-01-08 16:00:25来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

菜单制作:ul li横向排列

CSS菜单制作

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>菜单</title>
 6     <style type="text/css">
 7         .ui {
 8             width: 1200px;
 9             height: 100px;
10             list-style: none;
11             margin: 0;
12             padding: 0;
13         }
14 
15         .ui li {
16             width: 200px;
17             margin: 0 10px;
18             float: left; /*该处换为display:inline-block;同样效果*/
19 
20         }
21 
22         .ui li a {
23             width: 70px;
24             height: 50px;
25             padding: 0 20px;
26             font-size: 12px;
27             line-height: 50px;
28             border: solid 1px;
29             {#background: red;#}
30             display: inline-block;
31             text-decoration: none;
32             cursor: pointer;
33         }
34     </style>
35 </head>
36 <body>
37 <ul class="ui">
38     <li><a href="#">首页</a></li>
39     <li><a href="#">登录</a></li>
40     <li><a href="#">注册</a></li>
41     <li><a href="#">服务大厅</a></li>
42     <li><a href="#">需求大厅</a></li>
43 </ul>
44 </body>
45 </html>
菜单制作CSS

原文链接:https://www.cnblogs.com/stonelee2005/p/12164872.html
如有疑问请与原作者联系

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:10个超好用的配色网站

下一篇:JavaScript 数组,字符串,函数