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. Annotation注解

    概述 Annotation是JDK 5.0以后提供对元数据的支持,可以在编译.加载和运行时被读取,并执行相应的处理.所谓Annotation就是提供了一种为程序元素设置元数据的方法,可用于修饰包.类. ...

  2. webform 复杂点的服务器控件

    1  , dropdownlist:  下拉框 属性items  列表集合,  里面的每一个元素是一个 listitem . 联动的时候注意要 设置属性 .Autopostback 为ture: 注注 ...

  3. 从JPG中获取缩略图

    using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...

  4. Java-20个非常有用的程序片段

    下面是20个非常有用的Java程序片段,希望能对你有用. 1.字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric string ...

  5. mongodb查询只显示指定字段

    db.COMMODITY_COMMODITY.find( { "areaCode" : "320100" , "backCatalogId" ...

  6. 多层架构+MVC+EF+AUTOFAC+AUTOMAPPER

    最近使用ligerui搭建了一个简单的教务管理demo,将重要的地方记录,也希望能帮到有这方面需要园友. 一.目录 1.多层架构+MVC+EF+AUTOFAC+AUTOMAPPER: 2.MVC中验证 ...

  7. 如何清理多余的Windows桌面右键菜单

    删除多余的发送到选项 Win7使用一段时间后,我们可能会装很多软件,这时候右键菜单可能会变得很长,特别是“发送到(Send to)”里面的选项,有时候我们卸载软件之后在右键发送到菜单里还会有残存的选项 ...

  8. ReactiveCocoa 简单使用

    #pragma mark 指令 -(void) instructionDemo { // 创建使能信号 RACSignal * signal = [self.textField.rac_textSig ...

  9. （七）Angularjs - 控制器

    控制器的作用 没有控制器/controller,我们没有地方定义业务模型 比如:ng-init指令.我们可以使用ng-init指令在scope对象上定义数据 <div ng-init=" ...

  10. PULL生成XML文件

    package xmlpulldemo; import java.io.FileNotFoundException; import java.io.FileOutputStream; import j ...