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. VS中批量删除cs代码中的#region和#endregion

    Visual Studio中如何批量删除cs代码中的#region和#endregion,不删除它们中间的代码,只删除这两个标记及标记的注解的方法.Vs中提供了很强大的文本查找与替换功能,简单的替换只 ...

  2. Java基础知识强化78：正则表达式之获取功能（案例）

    1. 获取下面这个字符串中由三个字符组成的单词. da jia ting wo shuo,jin tian yao xia yu,bu shang wan zi xi,gao xing bu? 2. ...

  3. 异步tcp通信——APM.Core 解包

    TCP通信解包 虽说这是一个老生长谈的问题,不过网上基本很少见完整业务:或多或少都没有写完或者存在bug.接收到的数据包可以简单分成:小包.大包.跨包三种情况,根据这三种情况作相对应的拆包处理,示例如 ...

  4. 自定义Toast

    简易自定义Toast public class MainActivity extends ListActivity );//边角         gradientDrawable.setGradien ...

  5. POJ1502

    #include <iostream> #include <cstdio> #include <algorithm> #include <climits> ...

  6. zendstudio正则匹配查询

    Ctrl+H之后,显示的File Search标签页为Containing text. Alt+/ 帮助提示正则匹配的语法. 例子如下: select type from table where id ...

  7. (转)jQuery LigerUI 插件介绍及使用之ligerTree

    一,简介  ligerTree的功能列表: 1,支持本地数据和服务器数据(配置data或者url) 2,支持原生html生成Tree 3,支持动态获取增加/修改/删除节点 4,支持大部分常见的事件 5 ...

  8. Arcgis Android - HelloWorld

    概述 虽然esri官网上最新版本是10.2.4,但是例子中实在是很难运行,总是出现各种各样的bug.又因为初学是Android,所以不想太浪费时间弄些配置了.决定先将v2.0.0的Arcgis for ...

  9. IPTV中的EPG前端优化

    先看一下IPTV相关情况: l 目前TPTV市场情况 a) 截止今年2月,全国IPTV总用户数达3630.2万,我国移动互联网用户规模接近9亿,人均月接入量近300M,8M宽带达半数,光纤近4成. 图 ...

  10. mysql 数据库字符串替换

    UPDATE `table_name` SET `field_name` = replace (`field_name`,'from_str','to_str') WHERE `field_name` ...