使用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. Razor引擎的转换数据类型

    AsInt() 把字符串转换为整数. if (myString.IsInt()) IsInt() {myInt=myString.AsInt();} AsFloat() 把字符串转换为浮点数. if ...

  2. System.InvalidOperationException: 无法加载协定为“ServiceReference1.XXXXXXXXXXXXXXXX”的终结点配置部分，因为找到了该协定的多个终结点配置。请按名称指示首选的终结点配置部分。

    <system.serviceModel> <bindings> <basicHttpBinding> <binding name="testWeb ...

  3. 弹出层iframe链接设置

    jQuery 比较方便就是创建删除了,所以创建一个弹出层就是当点击div的时候创建一个新的div利用固定位fixed(与浏览器窗口有关)和z-index覆盖body 并利用opacity设置其透明度产 ...

  4. web ajax跨域问题解决方案

      jsonpHandler({ "code": "aaa", "price": 1780, "tickets": 5 ...

  5. 教你怎样在ppt2010抠图的小技巧|用ppt2010抠图的方法

    我们经常在ppt2010里做幻灯片时会碰到插入的图片并不是我们想要的情况,有的图片只是想要其中的一个部分.我们用“裁剪”功能也是达不到自己想要的效果.有的人会说PS抠图啊,但是比较繁琐,不易懂,不好上 ...

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

    一.新建安装部署项目

  7. Linux文本操作三大利器总结：sed、awk、grep

    grep:(去除一行中需要的信息,同类与cut) grep全称是Global Regular Expression Print #常规用法 # grep -n root /etc/passwd :ro ...

  8. soket客户端程序（一）

    soket客户端主要完成以下步骤: 1.建立soket套接字(将套接字理解为一个通道) 2.建立连接 3.向服务器发送http请求 4.接收得到的数据 5.关闭连接 6.本地处理得到的数据 http: ...

  9. HDU 3551 Hard Problem

    http://acm.hdu.edu.cn/showproblem.php?pid=3551 题意:给出一个图,还有一个子图的度数,求有没有办法通过删边使得原图的度数变成那个子图的度数? 思路:我们考 ...

  10. ISO15693协议的Inventory

    ISO15693的Inventory指令看起来比较让人迷糊,想明白其流程,我认为以下几点是必须了解的: 第一.ISO15693标签的几种状态,资料上有,这里罗嗦重复一下: 1.PowerOff状态 2 ...