<!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. JS循环中使用bind函数的参数传递问题

    JS循环中使用bind函数的参数传递问题,问题代码如下: for (var sc in result) { var tempp = '<div class="sidebar_todo_ ...

  2. A1012. The Best Rank

    To evaluate the performance of our first year CS majored students, we consider their grades of three ...

  3. 【洛谷P1144】最短路计数

    题目大意:给定一个 N 个点,M 条边的无向无权图,求从 1 号点出发到其他每个点最短路的条数. 题解:在跑 dij 时顺便维护 cnt[ ] 数组,用来记录到每个点的最短路条数. 代码如下 #inc ...

  4. 盘点 php 里面那些冷门又实用的小技巧

    1.实用某个字段索引二维数组 取出一个数组的一个字段的值的数组,我们可以使用 array_column, 这个方法还有另外一个用法,如 array_column($array, null, 'key' ...

  5. CENTOS 6.6初始化SHELL脚本

    时间:2016-02-24 00:30来源:blog.51cto.com 作者:“xxlixin” 博客 举报 点击:1717次 这个脚本是在刚安装完CENTOS6.6后可能需要进行的操作.在学习CE ...

  6. Jenkins创建job时Check-out Strategy各个选项详细说明（含图）

    Check-out Strategy 第一次build 第n次build(除第一次) Use 'svn update' as much as possible 将workspace下的所有文件清空,然 ...

  7. maveb安装与配置（win10）

    转载:https://www.cnblogs.com/eagle6688/p/7838224.html 看了几篇博客,感觉这篇博客写的含金量最高了,因为我电脑的系统是win10的,所以配置有细微的差别 ...

  8. java基础基础总结----- 关键字、标识符、注释、常量和变量、运算符、语句、函数、数组（三）

    Java语言基础组成:关键字.标识符.注释.常量和变量.运算符.语句.函数.数组 一．标识符 标识符是在程序中自定义的一些名称,由大小写字母[a-zA-Z],数字[0-9],下划线[ _ ],特殊字符 ...

  9. 浅谈Python闭包

    闭包是在其词法上下文中引用了自由变量的函数. 通俗地说,就是函数嵌套(后续称之为外层函数)另外一个函数(后续称之为内层函数),在内层函数中,引用外层函数的变量,每次对内层函数的调用,外层函数变量的值都 ...

  10. 函数和常用模块【day06】：random模块（三）

    本节内容 1.简述 2.random模块 3.string模块 4.生成随机数 一.简述 我们经常会使用一些随机数,或者需要写一些随机数的代码,今天我们就来整理随机数模块:random模块 二.ran ...