<!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. 证明最大公约数Stein算法(高精度算法)

    E:even 奇数  O:odd 偶数 若(a,b)为(e,e),则gcd(a,b)=2*gcd(a/2,b/2) 若(a,b)为(e,o),则gcd(a,b)=gcd(a/2,b) 若(a,b)为( ...

  2. 惊喜的gift

    情侣的饰品吧!我之前在淘宝上买了一套,挺好的,很好看呢!男的手链,女的项链,手链需要项链的钥匙才能打得开,女孩子应该都会很喜欢的吧!至少我很喜欢!而且价格也不贵,150块人民币都不到,很适合当生日礼物 ...

  3. Harbor镜像清理

    目录 清理UI中的镜像 清理镜像释放空间 docker镜像仓库中镜像的清理,一直是个比较麻烦的事情.尤其是在测试环境当中,每天都会有大量的构建.由此会产生大量的历史镜像,而这些镜像,大多数都没有用. ...

  4. ISO七层模型详解

    ISO七层模型详解 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在我刚刚接触运维这个行业的时候,去面试时总是会做一些面试题,笔试题就是看一个运维工程师的专业技能的掌握情况,这个很 ...

  5. centos 重启日志服务

    因为/var/log/message日志太多了,遂手贱删掉了这个文件,新建messages,发现没有日志写入 正确清空日志的方法 cat /dev/null > /var/log/boot.lo ...

  6. WebStrom直接启动VUE项目

    点Run即可启动

  7. MongoDB 时差问题问题

    在读取的时候,需要再次转换回来,比较麻烦. 其实,Mongo本身就已经提供了相应的处理方法,即在实体类中加个属性即可.具体如下: [BsonDateTimeOptions(Kind = DateTim ...

  8. JacobMathType

    JACOB是一个 Java到微软的COM接口的桥梁.使用JACOB允许任何JVM访问COM对象,从而使JAVA应用程序能够调用COM对象,;MathType 是由美国Design Science公司开 ...

  9. TCP/IP详解 卷1 第一章概述

    第一章概述 1.2 分层 网络编程通常分不同层次进行开发,每一层负责不同的通信功能. 一个协议族比如TCP/IP,通常是一组不同层次上多个协议的组合.一般可以认为是是四层协议系统: 链路层:有时也称作 ...

  10. VS中空项目、win32项目、控制台程序的区别（转）

    空项目,大多数想单纯创建c++工程的新同学,打开vs后很可能不知道选择创建什么工程,这时候请相信我,空项目是你最好的选择.因为空工程不包含任何的源代码文件,接下来你只需要在相应的源代码文件夹和头文件文 ...