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. HDU 4049 Tourism Planning（状压DP）题解

    题意:m个城市,n个人,让这n个人按固定顺序走遍m个城市.每个城市有一个单人票价pi.每个人在每个城市能获得vij的价值.如果多个人在同一城市,那么会额外获得价值,给出一张n * n价值表,额外价值为 ...

  2. sql-libs(2) 数字型

    经测试,发现是数字型的注入,直接 and 1=1 返回正常,and1=2返回错误,感觉比第一关更加简单一点啊,,透~ 经测试order by 为 3 . 1. union 注入 http://192. ...

  3. Keras模型拼装

    在训练较大网络时, 往往想加载预训练的模型, 但若想在网络结构上做些添补, 可能出现问题一二... 一下是添补的几种情形, 此处以单输出回归任务为例: # 添在末尾: base_model = Inc ...

  4. vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案

    vue 在有大数据量的 table 中使用弹窗 input 输入数据时卡顿解决方案 原因:vue在进行输入时,进行了多次的render刷新渲染操作,导致了input框输入时发生的卡顿现象 解决方法:在 ...

  5. Iterators & Generators in depth

    Iterators & Generators in depth https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/It ...

  6. css & box-shadow & outline

    css & box-shadow & outline CSS3 box-shadow : 4 sides symmetry https://learning.xgqfrms.xyz/C ...

  7. 人物传记：Mila Fletcher：如何勤于思考抓住关键？

    Mila Fletcher于2007年毕业于耶鲁大学,她是一名真正意义上的法学博士,在校期间获得了马歇尔奖学金,毕业后曾在美国多家知名律师事务所任职,目前就职于星盟全球投资公司,专注于帮助公司和客户提 ...

  8. BGV暴涨千倍，未来或将超越YFI领跑DeFi全场！

    毫无疑问,YFI在2020年上半年以一己之力掀翻了DeFi市场的热潮.迄今为止,YFI的新鲜资讯从不缺席,最近也是频频登上各大知名媒体热搜.其币价远远超过比特币价格,也让资本市场注意到DeFi市场原来 ...

  9. java中this和super的用法及区别

    this 用法1:代表当前对象本身 用法2:方法形参和类成员变量重名,用this进行区别 class demo{ private int age = 10; public int getAge(int ...

  10. 简单比较 @EnableEurekaClient 和 @EnableDiscoveryClient 两个注解

    @EnableEurekaClient 和 @EnableDiscoveryClient 都是让eureka发现该服务并注册到eureka的注解 相同点: 它们都能让注册中心Eureka发现 , 并将 ...