<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>CSSTest</title>

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

         }

         .nav {

             list-style: none;

             background-color: #6495ed;

             width: 1000px;

             margin: 50px auto;

             /*高度塌陷，子元素浮动*/

             overflow: hidden;

         }

         .nav li {

             float: left;

             /*为每个li指定一个宽度，虽然效果出来了，但是每个li

               不具有超链接属性,易用性不好，li是a的父元素，先给父元素一个

               宽度值，再来设置a宽度

             */

             width: 12.5%;

         }

         /*当鼠标移入时改变背景颜色*/

         .nav a:hover {

             background-color: #c00;

         }

         a {

             /**为a标签指定一个宽度

                a是一个内联元素宽度失效，转为块元素*/

             display: inline-block;

             width: 100%;

             /*设置文字居中*/

             text-align:center;

             /*设置一个上下内边距*/

             padding: 5px 0;

             /*去除下划线*/

             text-decoration: none;

             /*字体颜色设置*/

             color: white;

             /*字体加粗*/

             font-weight: bold;

         }

     </style>

 </head>

 <body>

     <!-- 导航条练习 -->

     <ul class="nav">

         <li><a href="">首页</a></li>

         <li><a href="">新闻</a></li>

         <li><a href="">联系</a></li>

         <li><a href="">关于</a></li>

         <li><a href="">首页</a></li>

         <li><a href="">新闻</a></li>

         <li><a href="">联系</a></li>

         <li><a href="">关于</a></li>

     </ul>

 </body>

 </html>

CSS导航条nav简单样式的更多相关文章

  1. css 导航条 布局

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

  2. css -- 导航条

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

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

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

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

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

  5. css导航条的设计

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  6. css导航条

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

  7. vue导航条选中项样式

    html: <div id="app"> <div class="collection"> <a href="#!&qu ...

  8. amazeui学习笔记--css（常用组件10）--导航条Topbar

    amazeui学习笔记--css(常用组件10)--导航条Topbar 一.总结 1. 导航条:就是页面最顶端的导航条:在容器上添加 .am-topbar class,然后按照示例组织所需内容.< ...

  9. 分享一个导航条哈(⊙o⊙)…

    原文:http://www.sharejs.com/js/menu/1601 CSS样式表: <!--[if lt IE 9]> <script src="http://h ...

随机推荐

  1. Announcing WebKit SDL port

    转自:http://www.dorothybrowser.com/announcing-webkit-sdl-port/ 下载地址 https://gitorious.org/spiegel/webk ...

  2. babel的使用及babel与gulp结合工作流

    Babel 通过语法转换器支持最新版本的 JavaScript . 它有非常多的插件,这些插件能够允许我们立刻使用新语法,无需等待浏览器支持. 那我们怎么使用babel呢? 首先我们来了解babel基 ...

  3. mongodb集群故障转移实践

    简介 NOSQL有这些优势: 大数据量,可以通过廉价服务器存储大量的数据,轻松摆脱传统mysql单表存储量级限制. 高扩展性,Nosql去掉了关系数据库的关系型特性,很容易横向扩展,摆脱了以往老是纵向 ...

  4. TCP协议、UDP协议、端口、套接字

    TCP协议优缺点 可靠:反馈数据是否送达 效率低:需要创建连接请求,连接成功后发数据 UDP协议优缺点 不可靠:无任何反馈 效率高:不创建连接请求,直接发数据 端口(0~65535,其中0~1023用 ...

  5. SQL Server 关于CROSS APPLY 和 OUTER APPLY应用

    先看看语法: <left_table_expression>  {cross|outer} apply<right_table_expression> 再让我们了解一下appl ...

  6. HTML格式化标签

    除了div.p.h1~h6.a.span这几个极常用的标签外,HTML还有一些不常见的标签(10个,5对:加粗.斜体.大小.上下标.特殊),默认效果如下: 当然,我们习惯用css编写效果来替代这些效果 ...

  7. 网络编程基础【day10】：IO多路复用

    这些名词比较绕口,理解涵义就好.一个epoll场景:一个酒吧服务员(一个线程),前面趴了一群醉汉,突然一个吼一声“倒酒”(事件),你小跑过去给他倒一杯,然后随他去吧,突然又一个要倒酒,你又过去倒上,就 ...

  8. python---ORM之SQLAlchemy（3）外键与relationship的关系

    relationship是为了简化联合查询join等,创建的两个表之间的虚拟关系,这种关系与标的结构时无关的.他与外键十分相似,确实,他必须在外键的基础上才允许使用 不然会报错: sqlalchemy ...

  9. PHP5.5+Nginx1.9

    1. 安装Nginx:http://www.cnblogs.com/vurtne-lu/p/7010065.html 2. 编译安装 [root@zabbix opt]# wget http://cn ...

  10. .Net进阶系列(15)-异步多线程(线程的特殊处理和深究委托赋值)（被替换）

    1. 线程的异常处理 我们经常会遇到一个场景,开启了多个线程,其中一个线程报错,导致整个程序崩溃.这并不是我们想要的,我需要的结果是,其中一个线程报错,默默的记录下,其它线程正常进行,保证程序整体可以 ...