zoukankan html css js c++ java

简单的导航栏

 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>

查看全文

相关阅读:
FileManager（文件管理类）
XE6 IntraWeb.v14.0.32安装及破解指南
 在应收应付系统凭证做冲销后，如何取消冲销？
delphi将图片保存到SQL数据库和读取图片
 去掉cxgrid 中的过滤下拉箭头
 CxGrid 分组以后自动排序了，可以禁止自动排序吗
 最简单解决CHM文件无法显示的办法
 用友T3、T6常见问题
 SQL2005还原数据库3154错误
 cxGrid 怎样才能让不自动换行 WordWrap:=false

原文地址：https://www.cnblogs.com/zou-zou/p/8569589.html