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. 卧槽，sql注入竟然把我们的系统搞挂了

    前言 最近我在整理安全漏洞相关问题,准备在公司做一次分享.恰好,这段时间团队发现了一个sql注入漏洞:在一个公共的分页功能中,排序字段作为入参,前端页面可以自定义.在分页sql的mybatis map ...

  2. gradle中的增量构建

    目录 简介 增量构建 自定义inputs和outputs 运行时API 隐式依赖 输入校验 自定义缓存方法 输入归一化 其他使用技巧 gradle中的增量构建 简介 在我们使用的各种工具中,为了提升工 ...

  3. TypeScript Version 23 Design Patterns

    TypeScript Version 23 Design Patterns TypeScript 设计模式 https://refactoring.guru/design-patterns/types ...

  4. 微信公众号代码高亮美化工具 All In One

    微信公众号代码高亮美化工具 All In One markdown 美化 mdnice 编辑器 https://www.mdnice.com/ https://github.com/mdnice ma ...

  5. SwiftUI All In One

    SwiftUI All In One SwiftUI SwiftUI is an innovative, exceptionally simple way to build user interfac ...

  6. JWT & JSON Web Tokens

    JSON Web Tokens https://jwt.io json web token example https://jwt.io/introduction/ https://medium.co ...

  7. Set-Cookie & Secure & HttpOnly & SameSite

    Set-Cookie & Secure & HttpOnly & SameSite HTTP/Headers/Set-Cookie Set-Cookie https://dev ...

  8. Git Best Practice All In One

    Git Best Practice All In One git workflow 本地开发环境: 开发人员自测的,可以是自己本地部署的静态服务器,当然也可类似是运行 npm server类似的环境, ...

  9. Redis in Action

    Redis in Action Redis REmote DIctionary Server(Redis) Redis 是一种开放源代码(BSD许可)的内存中数据结构存储,用作数据库,缓存和消息代理. ...

  10. AMP ⚡️原理

    AMP ️原理 AMP 是如何运作的 https://amp.dev/zh_cn/about/how-amp-works/ AMP 瞬时加载 结合了以下优化是 AMP 页面速度之快以至于它们可以瞬时加 ...