<!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. django MTV架构下的网站开发步骤

    1.需求分析必不可少,一定要具体列出本次网站项目所要实现的目标,可能包括简单的页面草图与功能方块图等. 2.数据库设计. 3.了解网站的每一个页面,并设计网页模板(.html)文件 4.使用virtu ...

  2. 关于程序设计中经常出现的INF和MOD值的设定

    摘自:https://www.cnblogs.com/gfvod/p/5548313.html 在取模操作中,我们常把MOD设置为1000000007,模一个大数和模一个质数可以减少冲突,而1e9+7 ...

  3. 端午漫谈（附：Ubuntu18.04下轻量截图软件）

    先说声端午快乐- 有空就陪陪家人吧.今天陪外公吃了顿饭,陪老人家聊了会天,颇有点感触.发现技术真的是改变生活,小孩抖音自学跳舞,大人微信刷又刷,很多天海一方的老朋友都可以联系到了... 其实最有感触的 ...

  4. 二分插入、bisect

    在一个有序序列(从小到大)中查找一个元素 每次将元素与序列中间位置的元素进行比较 如果大于中点,则在后半段.如果小于中点,则在前半段.以此类推 时间复杂度为O(logn) 有一个无序序列[37, 99 ...

  5. Java中由常量类引发的思考

    我们都知道,定义一个常量类是十分简单的.首先差固件一个类,然后类中声明一些public修饰的静态常量.没错就这么简单: 写好之后,在其他地方使用的时候,直接类名.属性名就可以使用了. 而LZ现在想的是 ...

  6. Ubuntu下安装nfs服务器

    安装 NFS 软件包在 ubuntu 终端输入下面命令安装 NFS 服务器:vmuser@Linux-host: ~$ sudo apt-get install nfs-kernel-server # ...

  7. 线程的中断.interrupt

    线程对象.interrupt() 注意,异常分析中要有break,否则无法中断 public class Demo extends JFrame { private Thread thread;//定 ...

  8. 线程的状态有哪些，线程中的start与run方法的区别

    线程在一定条件下,状态会发生变化.线程一共有以下几种状态: 1.新建状态(New):新创建了一个线程对象. 2.就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法. ...

  9. Python协程笔记 - yield

    生成器(yield)作为协程 yield实际上是生成器,在python 2.5中,为生成器增加了.send(value)方法.这样调用者可以使用send方法对生成器发送数据,发送的数据在生成器中会赋值 ...

  10. LVS+keepalived 的DR模式的两种做法

    LVS DR模式搭建 准备工作 三台机器: dr:192.168.13.15 rs1:192.168.13.16 rs2: 192.168.13.17 vip:192.168.13.100 修改DR上 ...