1、垂直导航栏

index.html

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>导航栏</title>

      <link href="style9.css" type="text/css" rel="stylesheet">

 </head>

 <body>

      <ul>

         <li><a href="#">导航1</a></li>

         <li><a href="#">导航2</a></li>

         <li><a href="#">导航3</a></li>

         <li><a href="#">导航4</a></li>

      </ul>

 </body>

 </html>

css：

 ul{

     list-style-type: none;/*去掉前面的实心圆*/

     margin:0px;

     padding:0px;

 }

 a:link,a:visited{/*去掉下滑线*/

     text-decoration: none;

     display:block;

     background-color: burlywood;

     color:aliceblue;

     width:100px;

     text-align: center;

 }

 a:active,a:hover {/*鼠标放上去的设置*/

     background-color: red;

 }

效果：

2、水平导航栏

css代码：

 ul{

     list-style-type: none;/*去掉前面的实心圆*/

     margin:0px;

     padding:0px;

     background-color: burlywood;

     width:460px;

     text-align:center;

 }

 a:link,a:visited{/*去掉下滑线*/

     text-decoration: none;

     background-color: burlywood;

     color:aliceblue;

     width:100px;

     text-align: center;

 }

 a:active,a:hover {/*鼠标放上去的设置*/

     background-color: red;

 }

 li{

     display:inline;/*水平摆放*/

     padding:3px ;

     padding-left:5px;

     padding-right:5px;

 }

CSS常用操作-导航栏的更多相关文章

  1. web前端学习（三）css学习笔记部分（3）-- css常用操作

    5.  CSS常用操作 5.1  对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...

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

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

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

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

  4. css常用操作

    对齐操作 1.使用margin属性进行水平对齐     margin-left:auto;    margin-right:auto; 2.使用position属性进行左右对齐      3.使用fl ...

  5. CSS 常用操作

    1.对齐 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...

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

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

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

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

  8. 天书笔记：HTML+CSS实现顶部导航栏

    此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 ...

  9. 纯CSS实现nav导航栏+jQuery实现article区DIV切换

    效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...

随机推荐

  1. JavaScript基础（二）

    一.外部引用语法<script src="script.js"></script> 二.在页面中的位置 1.我们可以将JavaScript代码放在html文 ...

  2. 腾讯云升级到PHP7

    1.删除之前安装的PHP yum remove php* php-common 2.安装yum源 rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel ...

  3. spring-data-solr官方学习文档介绍

    spring-data-solr文档介绍如下: 通过http://www.springframework.org/schema/data/solr/spring-solr-1.0.xsd(spring ...

  4. MySQL数据库my.cnf配置文件注释详解

    我们知道,在MySQL数据库安装完成后,要对my.cnf配置文件进行适当的修改才能充分利用MySQL数据库的功能.但是对于初学者来说,修改my.cnf配置文件似乎是一个比较难的过程.为了解决这个问题, ...

  5. 运维监控利器smokeping 500报错处理

    检查apache日志发现有以下错误: No such file or directory: exec of '/usr/local/smokeping/htdocs/smokeping.cgi' fa ...

  6. Windows免密码远程桌面

    1.WinKey + R,在对话框中输入“gpedit.msc”,点“确定”:   2.展开:计算机配置--Windows设置--安全设置--本地策略--安全选项,找到“帐户:使用空白密码的本地账户只 ...

  7. E10后，导致VS2010调试时报错“未能将脚本调试器附加到计算机..."

    以管理员身份打开CMD,运行:regsvr32.exe "%ProgramFiles(x86)%\Common Files\Microsoft Shared\VS7Debug\msdbg2. ...

  8. java IO 实例分析

    初学java,一直搞不懂java里面的io关系,在网上找了很多大多都是给个结构图草草描述也看的不是很懂.而且没有结合到java7 的最新技术,所以自己来整理一下,有错的话请指正,也希望大家提出宝贵意见 ...

  9. static和const关键字的作用

    static关键字至少有下列n个作用: (1)函数体内static变量的作用范围为该函数体,不同于auto变量,该变量的内存只被分配一次,因此其值在下次调用时仍维持上次的值: (2)在模块内的stat ...

  10. Android 用ListView实现GridView分列显示

    我想实现百度影音首页的这种效果: 在网上用ScrollView+GridView可以实现,但是touch scrollview的时候会莫名刷新gridview,这样用户体验很不好,而且感觉百度不是这样 ...