使用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. 封装好的PHP分页类，简单好用--在开源看到的，取回来自己用

    class Pagination  独立分页类 调用方式: $pagenation = new Pagination( 4, 10, 200 ); // 4(第一个参数) = currentPage, ...

  3. sql 批处理、获取自增长、事务、大文本处理

    批处理 需要批量执行sql语句! 需求:批量保存信息! 设计: AdminDao Public void save(List<Admin list){ // 目前用这种方式 // 循环 // 保 ...

  4. The Managed Metadata Service or Connection is currently not available

    Does the following error message looks familiar to you?  when you go to site Actions -> Site Sett ...

  5. 利用github for windows 工具将本地的内容同步到github上

    1 利用github for windows工具来创建一个Repository,名字叫weixin,具体步骤 请参考这篇文章 根据default storage directory的设置 我知道我所创 ...

  6. 从Profile中窥探Unity的内存管理

    刨根问底U3D---从Profile中窥探Unity的内存管理 这篇文章包含哪些内容 这篇文章从Unity的Profile组件入手,来探讨一下Unity在开发环境和正式环境中的内存使用发面的一些区别, ...

  7. H.264 Transform

    变换是视频.图像编码的核心部分.目前所采用的变换算法都是从傅里叶变换演变而来.单纯的变换并不会导致视频(图像)的码率变小,反而会增大.但是非常巧妙的一点是:变换把图像从空域转换成的时域,把由色块组成的 ...

  8. QWidget中嵌入win32 window（使用QWindow和QWidget::createWindowContainer）

    主要用到QWindow::fromWinId和QWidget::createWindowContainer这两个函数 QWindow::fromWinId用来创建一个win32窗口的代理 QWidge ...

  9. Macro Substitution

    看<C程序设计语言>(英文版)学到的两个用法. 两个很简单的宏用法. #的用法: if, however, a parameter name is preceded by a # in t ...

  10. [log4j] 可用案例

    可用的 log4j 配置, log4j.properties log = /Users/grs/Documents/log4j log4j.rootLogger = DEBUG, FILEROLING ...