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. [转] Ubuntu 12.04下LAMP安装配置 (Linux+Apache+Mysql+PHP)

    我是一个Linux新手,想要安装一台Ubuntu 12.04版的Linux服务器,用这台服务器上的LAMP套件来运行我自己的个人网站.LAMP套件就是 “Linux+Apache+Mysql+PHP这 ...

  2. 【Android】无限滚动的HorizontalScrollView

    这是一个很简单的功能,作为新手,做一下笔记.也给其它有需要的人提供一个参考. 首先HorizontalScrollView都知道用途了.它可以实现类似“桌面程序”左右切换页的效果.一般情况下里面的页数 ...

  3. ASP.NET-FineUI开发实践-9

    用了FineUI有一段时间了,还是分享下我咋改的吧,没想的那么难,我也是从小白来的. 基础是要懂JQ和EXTJS,主要是要懂JQ和EXTJS能干啥,这里有两个网站 http://www.w3schoo ...

  4. 《node.js开发指南》读书笔记（一）

    在开发时如果修改了js内容,不能通过刷新浏览器直接看到效果,必须通过重启nodejs程序才能看到,这样显然不利于开发调试,supervisor可以实现这个功能,监视对代码的改动,并自动重启nodejs ...

  5. Maven 镜像

    http://mvnrepository.com/http://search.maven.org/http://repository.sonatype.org/content/groups/publi ...

  6. fopen,file_get_contents,curl的区别

    1.       fopen /file_get_contents 每次请求都会重新做DNS查询,并不对DNS信息进行缓存.但是CURL会自动对DNS信息进行缓存.对同一域名下的网页或者图片的请求只需 ...

  7. iOS中使用Localizable.strings适配App在不同语言下文本的显示

    iOS开发中,若是使用xib或storyboard搭建界面视图,视图中固定显示的文本内容可以用localized添加不同语言适配.但是在实际中会有动态加载的文本,这些文字的适配就需要NSLocaliz ...

  8. 【转载】Java StringBuffer与StringBuider

    本文转载微学苑java基础教程,原文地址链接:http://www.weixueyuan.net/view/6318.html String 的值是不可变的,每次对String的操作都会生成新的Str ...

  9. PHP防注入转义功能

    PHP addslashes() 函数 $str = addslashes('Shanghai is the "biggest" city in China.'); echo($s ...

  10. mysql文件导入到数据库load data infile into table 的使用例子

    load data infile "C:/Users/Administrator/Desktop/1.txt"into table 要一个已经存的表名 字段默认用制表符隔开 文件 ...