使用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. js学习笔记之：键盘应用

    为了方便用户操作,可以为用户设置(或者屏蔽)功能键,代替使用频率比较高的操作.本次,将学习一下基本的功能键使用方法.键盘和焦点使用.屏蔽按键等知识点,以及一些相关示例: 1 设置按键功能: 功能键主要 ...

  2. wamp虚拟机配置

    1.找到httpd.conf 里面:找到 # Virtual hosts 开启虚拟机Include conf/extra/httpd-vhosts.conf 2  编辑httpd-vhosts.con ...

  3. saas系统架构经验总结

    2B Saas系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk Saas系统.很多Saas创业公司也拿了大额风投.毕竟Saas相对传统软件的优势非常明显. ...

  4. poj 2782 Bin Packing (贪心+二分)

    F - 贪心+ 二分 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Description ...

  5. 转:尝试用Gearman实现分布式处理（PHP）

    原文来自于http://blog.csdn.net/fdipzone/article/details/7166520 本文需要你已对Gearman有个大致了解. 顺便再推荐两篇参考文章http://h ...

  6. 转：一些MongoDB限制

    文章来自于:http://www.infoq.com/cn/news/2013/11/mongodb-things 消耗磁盘空间 这是我的第一个困惑:MongoDB会消耗太多的磁盘空间了.当然了,这与 ...

  7. 初识Java反射机制

    1.ClassLoader的类加载机制:并非一次性加载,而是需要的时候加载(运行期间动态加载)(Class文件加载到内存的代码段),static语句块在加载后执行一次.dynamic语句块(就是一个语 ...

  8. Linux定时运行与开机运行任务

    http://os.51cto.com/art/200805/75144.htm at命令与crontab命令 http://os.51cto.com/art/201007/211874.htm ht ...

  9. 调用系统API还是很高效的，不必担心性能

    代码如下: void MainWindow::on_pushButton_2_clicked() { QTime total; total.start(); ; ; i<=*; i++) { Q ...

  10. Spark RDD Union

    示例   Spark多个RDD(数据格式相同)“组合”为一个RDD   代码   from pyspark import SparkConf, SparkContext conf = SparkCon ...