使用css布局横向导航栏，css应用给网页样式的方式，就相当于，给人怎么去穿上衣服，不同的衣服有不同的穿法，这里我们使用的是内联式。
在这里 我们可以适当的把值调的大一点，这样我们就可以很容易的对比。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>如何使用css布局横向导航栏</title>

        <style type="text/css">

            body {

                margin:0px;padding:0px;

            }

            ul {

                list-style:none;/*去除项列表前面的圆点*/

            }

            ul li {

                float:left;/**使列表项不再遵循默认的自上而下样式,使之变成横向列表*/

                }

            /**这时候的列表虽然是横着的，却是一个整的像一块大饼，所以我们要想到块状思想。使用display:block，将其分割*/

                ul li a {

                    display: block; /*切割完毕,变成块状，这下我们就可以实现内外边距，边框背景等属性*/

                    width: 200px; /*宽度设置*/

                    padding-top: 10px; /*上内边距，通俗点讲就是导航栏离顶部的距离*/

                    padding-left: 10px; /*同上*/

                    padding-right: 10px; /*同上*/

                    text-align: center; /*文本居中显示*/

                    font-size: 40px; /*设置字体的大小*/

                    color: red; /*设置字体的颜色*/

                    text-decoration: none; /*下划线设置*/

                }

                /*锚伪类还有link visited hover active分别为未访问，已访问，鼠标移动链接上，选定的连接，这里我只写了移动到连接的例子*/

        ul li a:hover{

        color:blue;                   /*伪类：指向链接时的字体颜色*/

        background-color:#8DC7DD;    /*伪类：指向链接时的背景色*/

        text-decoration:underline;   /*伪类：指向链接时的字体装饰*/

        font-weight:bold;           /*伪类：指向连接时的字体粗细*/

        }

        </style>

    </head>

    <body>

        <div id="nav">

            <ul>

                <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>

        </div>

    </body>

</html>
本菜鸟刚接触css，希望各路大神可以赐教 企鹅号：912220277

 

如何使用css、布局横向导航栏的更多相关文章

  1. 利用CSS制作背景变色的横向导航栏

    1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...

  2. 【温故而知新-CSS】使用CSS设计网站导航栏

    body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...

  3. 【源码分享】jquery+css实现侧边导航栏

    jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...

  4. CSS04--对齐、 布局、导航栏

    我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐:    1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素    .c ...

  5. CSS常用操作-导航栏

    1.垂直导航栏 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  6. html+css 制作简易导航栏

    二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...

  7. CSS3学习-用CSS制作立体导航栏

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Flutter布局--appbar导航栏和状态栏

    MaterialApp 先看下上图的具体用法:1. title:标题2. actions:表示右侧的按钮的动作3. leading:表示左侧的按钮的动作4. flexibleSpace:5. back ...

  9. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

随机推荐

  1. ASP.Net MVC4排序检索分页的实现

    前言 上一节我们做到了如下的一个基础查询页面.本节我们向这个页面中加入排序.搜索和分页功能. 排序 从上图中的地址栏中可以看到这个页面调用的是Company Controller下的Index Act ...

  2. javascript 字符串滚动显示

    <html> <head> <script type="text/javascript"> var chars = "JavaScri ...

  3. C# windows窗体程序打包安装及卸载

    一.新建安装部署项目

  4. Instruments 使用指南

    Instruments 用户指南 http://cdn.cocimg.com/bbs/attachment/Fid_6/6_24457_90eabb4ed5b3863.pdf 原著:Apple Inc ...

  5. 萬用表檢測MOS管好壞的簡便方法

    在開發LED驅動電源時難免不會接觸到MOS管,它又是一個相當脆弱的器件.往往有時故障就是因為它罷工了.以下的一點經驗希望對大家有所幫助. 1.用黑表筆接在D極上  ,紅表筆接在S極上 , 一般有一個5 ...

  6. Keil C51总线外设操作问题的深入分析

    阅读了<单片机与嵌入式系统应用>2005年第10期杂志<经验交流>栏目的一篇文章<Keil C51对同一端口的连续读取方法>(原文)后,笔者认为该文并未就此问题进行 ...

  7. Java StringTokenizer分割字符串

    除了String本身的split方法,JDK在很早就提供了StringTokenizer这个类来分割字符串: 不过,由于正则表达式和String本身的功能越来越多,StringTokenizer已经被 ...

  8. 开放计算平台——数据仓库（Hive）权限控制

    平台数据仓库使用Hive进行构建,通过调研决定使用“SQL Standards Based Authorization in HiveServer2”对用户提交的SQL进行权限控制,也可根据实际情况选 ...

  9. HBase HFile

    HFile index HFile index, which is proportional to the total number of Data Blocks. The total amount ...

  10. word页面不对齐，如何解决？

    http://blog.163.com/haibianfeng_yr/blog/static/34572620201157105439516/