简单的导航栏

最新推荐文章于 2024-02-29 23:59:30 发布

weixin_30877755

最新推荐文章于 2024-02-29 23:59:30 发布

阅读量90

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zou-zou/p/8569589.html

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 　　<head>
 4 　　　　<meta charset="UTF-8">
 5 　　　　<title>导航栏</title>
 6 　　　　<style type="text/css">
 7 　　　　　　div{
 8 　　　　　　　　width: 830px;
 9 　　　　　　　　height: 60px;
10 　　　　　　　　background-image: url(bg.jpg);
11 　　　　　　}
12 　　　　　　ul{
13 　　　　　　　　/*取消列表前面的点*/
14 　　　　　　　　list-style: none;
15 　　　　　　}
16 　　　　　　li{
17 　　　　　　　　border: 1px solid red;
18 　　　　　　　　width: 100px;
19 　　　　　　　　height: 30px;
20 
21 　　　　　　　　background-color: rgb(244,232,247);
22 　　　　　　　　text-align: center;
23 　　　　　　　　/*设置行高,与自身高度一致也代表上下居中.*/
24 　　　　　　　　line-height: 30px;
25 　　　　　　　　/*字体加粗*/
26 　　　　　　　　font-weight: bold;
27 　　　　　　　　/*使标签横向排列*/
28 　　　　　　　　float: left;
29 　　　　　　　　color: rgb(255,48,183);
30 
31 　　　　　　　　/*是边框圆弧化 20px*/
32 　　　　　　　　border-radius: 20px;
33 　　　　　　　　/*设置阴影半径和阴影颜色 x轴偏移量 y轴偏移量 模糊度 半径 颜色*/
34 　　　　　　　　box-shadow: 0 0 5px 2px rgb(184,115,200);
35 
36 　　　　　　　　margin-top: 15px;
37 　　　　　　　　margin-left: 20px;
38 　　　　　　}
39 　　　　</style>
40 　　</head>
41 　　<body>
42 　　　　<div>
43 　　　　　　<ul>
44 　　　　　　　　<li>美妆护肤></li>
45 　　　　　　　　<li>时尚女装></li>
46 　　　　　　　　<li>品质家电></li>
47 　　　　　　　　<li>美颜滋补></li>
48 　　　　　　　　<li>京东生鲜></li>
49 　　　　　　　　<li>潮流电子></li>
50 　　　　　　</ul>
51 　　　　</div>
52 　　</body>
53 </html>