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. hdu 2218

    题意: 切蛋糕问题 水题...... AC代码: #include <iostream> using namespace std; int main() { int a[6],i,n; c ...

  2. 一个控制台贪吃蛇小游戏（wsad控制移动）

    /******************************************** * 程序名称:MR.DUAN 的贪吃蛇游戏(链表法) * 作 者:WindAutumn <flutti ...

  3. Windows Server 2003 SP2 R2 企业版/标准版/32与64位 CD-KEY

    微软发布Windows Server 2003 R2版的目的是希望透过它填补Windows Server 2003 SP1和Longhorn Server之间的产品发布时间间隔.所以Windows S ...

  4. 武汉科技大学ACM ：1010: 零起点学算法12——求2个日期之间的天数

    Problem Description 水题 Input 输入2个日期,日期按照年月日,年月日之间用符号-隔开(题目包含多组数据) Output 求出这2个日期之间的天数(不包括自身),每组测试数据一 ...

  5. IntelliJ IDEA 12 创建Web项目 教程 超详细版

    IntelliJ IDEA 12 新版本发布 第一时间去官网看了下  黑色的主题 很给力 大体使用了下  对于一开始就是用eclipse的童鞋们 估计很难从eclipse中走出来 当然 我也很艰难的走 ...

  6. ASP.NET常用技术之加密解密

    在开发项目中有许多数据需要我们进行加密解密操作,这里介绍几个加密解密的方法. 一:MD5加密 MD5加密是一种单向的加密算法,它只能加密,加密后不能进行逆向解密操作,常用于数字签名和加密用户密码. 下 ...

  7. Python 改变当前工作目录

    在shell里编辑: import os os.getcwd()   #取得当前工作目录 os.chdir(r'目标目录')   # os.chdir(r'd:\learnpy')

  8. 网络请求时 返回 App Transport Security has blocked a cleartext HTTP

    如上图,是因为 Xcode7 没有对 plist 进行 http 请求的配置  所致 这时需要  加上上面的plist的红框中 的内容  并且 设置 为 yes  如下图

  9. The 500 Most Commonly Used Words in the English Language

    Based on the combined results of British English, American English and Australian English surveys of ...

  10. Android 开源框架ActionBarSherlock初探

    1:我的开发环境是Ubuntu12.04下:adt-bundle-linux-x86-20130729. ActionBarSherlock下载地址:http://actionbarsherlock. ...