使用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. 141 Linked List Cycle(判断链表是否有环Medium)

    题目意思:链表有环,返回true,否则返回false 思路:两个指针,一快一慢,能相遇则有环,为空了没环 ps:很多链表的题目:都可以采用这种思路 /** * Definition for singl ...

  2. javascript权威指南学习笔记3

    今天看到第四章,记录一下其中的几个点,俗话说:好记性不如烂笔头嘛. 4.9   in运算符和instanceof运算符 in运算符希望它的左操作数是一个字符串或可以转化为字符串,希望它的右操作数是一个 ...

  3. 【leetcode】62. Uniqe Paths

    题目 https://oj.leetcode.com/problems/unique-paths/   A robot is located at the top-left corner of a m ...

  4. struts2中的路径问题

    <?xml version="1.0" encoding="GB18030" ?><%@ page language="java&q ...

  5. mongodb教程

    http://sheperd.blog.163.com/blog/static/19525511920119111149046/ http://www.cnblogs.com/oec2003/arch ...

  6. poj 2777Count Color

    http://poj.org/problem?id=2777 注意:a可能比b大 #include <cstdio> #include <cstring> #include & ...

  7. java正则表达式一：基本使用

    java正则表达式主要涉及三个类:java.util.regex.Matcher.java.util.regex.Pattern.java.util.regex.PatternSyntaxExcept ...

  8. 开启和关闭wifi的代码段

    1.需要申请的权限android.permission.ACCESS_WIFI_STATE android.permission.CHANGE_WIFI_STATE android.permissio ...

  9. Actor模型

    Actors模型(Actor model)首先是由Carl Hewitt在1973定义, 由Erlang OTP (Open Telecom Platform) 推广,其 消息传递更加符合面向对象的原 ...

  10. mysql 主从 配置和同步管理

    首先呢,需要有两个mysql服务器.如果做测试的话可以在同一台机器上装两个mysql服务程序,注意要两个运行程序的端口不能一样.我用的是一个是默认的3306,从服务器用的是3307端口. 在主服务创建 ...