1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="./reset.css">
7 <style>
8 /*设置nav的大小*/
9 .nav{
10 width:1210px;
11 height:48px;
12 background-color:#E8E7E3;
13 margin:100px auto;
14 }
15 /*设置nav中的li*/
16
17 .nav li{
18 /*设置li设置浮动,使其横向摆列*/
19 float:left;
20 /*设置Li的高度*/
21 /*将文字在父元素中居中*/
22 line-height:48px;
23
24 }
25
26 /*设置a的样式*/
27 .nav a{
28 /*将a转化为块元素*/
29 display:block;
30 text-decoration:none;
31 color:#777;
32 font-size:18px;
33 padding:0 40px;
34
35 }
36 /*设置鼠标移入的效果*/
37 .nav a:hover{
38 background-color:#3F3F3F;
39 color:#E8E7E3;
40
41 }
42
43 </style>
44 </head>
45 <body>
46 <ul class="nav">
47 <li><a href="#">HTML/CSS</a></li>
48 <li><a href="#">Browser Side</a></li>
49 <li><a href="#">Server Side</a></li>
50 <li><a href="#">Programming</a></li>
51 <li><a href="#">XML</a></li>
52 <li><a href="#">Web Building</a></li>
53 <li><a href="#">Reference</a></li>
54 </ul>
55 </body>
56 </html>

显示效果

css导航条的设计的更多相关文章

  1. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  2. css 导航条 布局

    导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...

  3. 辛星与您使用CSS导航条

    第一步.我们创建了一个新的my.html档.在内容填入如下面.这个html文件不动,直到最后.正是这些内容: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...

  4. CSS导航条nav简单样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css导航条等元素位置不变

    在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.

  6. css导航条

    #nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}

  7. 纯CSS实现下拉菜单及下拉容器等(纯CSS实现导航条及导航下拉容器)

    虽然网上类似甚至相同的案例有很多,但是我还是写下,以记下笔记,也可供大家参考 希望大家可以指导批评~~ 首先我们以列表ul li 来开始我们菜单也可以说导航条的制作: 在页面中我们首先构建以下XHTM ...

  8. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  9. css横向导航条

    css横向导航条有两种方法 1. ul li a li{float:left} #navlist li, #navlist a{height:44px;display:block;} a{width: ...

随机推荐

  1. 洛谷p1637 三元上升子序列(树状数组

    题目描述 Erwin最近对一种叫"thair"的东西巨感兴趣... 在含有n个整数的序列a1,a2......an中, 三个数被称作"thair"当且仅当i&l ...

  2. PHP7.1后webshell免杀

    严格的D盾 D盾说,我是个严格的人,看到eval我就报木马,"看着像"="就是"木马,宁可错杀一千,绝不放过一个.好了,多说无益,一起看看严格的D盾是如何错杀的 ...

  3. 白日梦的ES笔记三:万字长文 Elasticsearch基础概念统一扫盲

    目录 一.导读 二.彩蛋福利:账号借用 三.ES的Index.Shard及扩容机制 四.ES支持的核心数据类型 4.1.数字类型 4.2.日期类型 4.3.boolean类型 4.4.二进制类型 4. ...

  4. Vue UI lib missing vue bug

    Vue UI lib missing vue bug Error Uncaught TypeError: Cannot read property 'prototype' of undefined a ...

  5. TypeScript Developer Roadmap

    TypeScript Developer Roadmap https://github.com/xgqfrms/TypeScript-Developer-Roadmap https://typescr ...

  6. git alias all in one

    git alias all in one workspace:工作区 staging area:暂存区/缓存区 local repository:或本地仓库 remote repository:远程仓 ...

  7. js destructuring assignment bug

    js destructuring assignment bug https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Op ...

  8. C++算法代码——[TYVJ]单数?双数?

    题目来自:http://218.5.5.242:9018/JudgeOnline/problem.php?id=1178 题目描述 Bessie那惨无人道的二年级老师搞了一个有  N  (1  < ...

  9. [计算机图形学]绘制填充模型:重心坐标、z-buffer

    目录 一.点乘和叉乘 0. 向量表示 1. 点乘 2.叉乘 2.1 坐标运算方式 2.2 向量运算方式 2.3 叉乘的用途 二.Bounding Box 三.重心坐标 四.z-buffer 五.总结 ...

  10. SpringBoot常见的异常问题

    1. org.mybatis.logging.LoggerFactory Springboot启动报错 Caused by: java.lang.ClassNotFoundException: org ...