<!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. 修复VirtualBox "This kernel requires the following features not present on the CPU: pae Unable to boot – please use a kernel appropriate for your CPU"

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 修复VirtualBox "This kernel requires ...

  2. HDU 1069 Monkey and Banana / ZOJ 1093 Monkey and Banana （最长路径）

    HDU 1069 Monkey and Banana / ZOJ 1093 Monkey and Banana (最长路径) Description A group of researchers ar ...

  3. 「loj3058」「hnoi2019」白兔之舞

    题意 有一个\((L+1)*n\) 的网格图,初始时白兔在\((0,X)\) , 每次可以向横坐标递增,纵坐标随意的位置移动,两个位置之间的路径条数只取决于纵坐标,用\(w(i,j)\) 表示,如果要 ...

  4. js的append拼接html丢失css样式解决

    htmlApp += "<li id='leftli"+lunci+"'>"; htmlApp += "<span id='left ...

  5. Linux：打印（输出）所有的列（awk, $0）

    如果想输出所有的列的话,只需要$0这个函数,例如以下命令: awk '/rs16945916/ {print $0}' test.txt > allcol.txt rs16945916指的是打印 ...

  6. zTree重命名节点时，操作的那个dom（类似input框那个）怎么写

    <script type="text/javascript"> //tree的编辑节点的方法 ztree.editName(nodeNew[0]); /// $(&qu ...

  7. #define 多行多语句

    #define DEBUG_ENABLE 1 #if DEBUG_ENABLE > 0 #define DEBUG_PORT UART_PORT2 #define DBG_BUF_LEN 512 ...

  8. PrintNumber.java

    /****************************************************************************** * Compilation: javac ...

  9. TestCase / test plan / test case

    s 测试计划 分析测试需求 制定测试策略 制定测试计划 评审测试计划 测试准备 编写测试案例 评审测试案例 准备测试环境 准备测试数据 准备配置项 测试执行 检查测试准入(环境.数据.配置.案例等) ...

  10. NPOI学习笔记

    NPOI最简单的创建一个Excel,并且在指定单元格内填写一些数据 HSSFWorkbook workbook = new HSSFWorkbook(file); ISheet sheet = wor ...