<!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. Java NIO -- 缓冲区(Buffer)的数据存取

    缓冲区(Buffer): 一个用于特定基本数据类型的容器.由 java.nio 包定义的,所有缓冲区都是 Buffer 抽象类的子类.Java NIO 中的 Buffer 主要用于与 NIO 通道进行 ...

  2. 多线程之间的通信（等待唤醒机制、Lock 及其它线程的方法）

    一.多线程之间的通信. 就是多个线程在操作同一份数据, 但是操作的方法不同. 如: 对于同一个存储块,其中有两个存储位:name   sex, 现有两个线程,一个向其中存放数据,一个打印其中的数据. ...

  3. 2018.9青岛网络预选赛(H)

    传送门:Problem H https://www.cnblogs.com/violet-acmer/p/9664805.html 题意: BaoBao在一条有刻度的路上行走(哈哈,搞笑),范围为 [ ...

  4. 十、java_IO

    目录: 一.java流式输入/输出原理 二.java流类的分类 三.输入/输出流类 四.常见的节点流和处理流 五.文件流 六.缓冲流 七.数据流 八.转换流 九.Print流 十.Ubject流 一. ...

  5. redis 一主二从三哨兵

    总体部署 一主二从三哨兵 ip地址分配分别为 主 127.0.0.1:6379 从 127.0.0.1:6389 从 127.0.0.1:6399 哨兵 127.0.0.1:26379 哨兵 127. ...

  6. 弹指之间 -- Polychord

    CHAPTER 19 复合和弦 Polychord 示例歌曲:爱很简单,恰是你的温柔

  7. pyqt5 设置窗口按钮等可用与不可用

    setEnabled(True) 设置窗口或者按钮可用,Flase不可用

  8. python自动化运维之路~DAY7

    python自动化运维之路~DAY7 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.客户端/服务器架构 C/S 架构是一种典型的两层架构,其全称是Client/Server,即 ...

  9. System.Runtime.InteropServices.COMException:“服务器出现意外情况。 (异常来自

    .Net MVC导出Excel的时候,一直报错,如题.原因是因为福昕阅读器,这样设置 execl->点击文件>选项>加载项,选择com加载项,把祈福阅读器勾掉.

  10. 加减乘除工具类BigDecimalUtil

    场景:为毛要用BigDecimal这个类来实现加减乘除呢?我不说其他的,你去用小数乘小数,除小数就知道.话不多说,老规矩,开箱即用. BigDecimalUtil.java package com.m ...