CSS常用操作-导航栏
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常用操作-导航栏的更多相关文章
- web前端学习(三)css学习笔记部分(3)-- css常用操作
5. CSS常用操作 5.1 对齐 使用margin属性进行水平对齐 <!DOCTYPE html> <html lang="en"> <head ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- html+css 制作简易导航栏
二话不说直接上代码(萌新:实在也没什么好说的) <!DOCTYPE html> <html lang="en" xmlns="http://www.w3 ...
- css常用操作
对齐操作 1.使用margin属性进行水平对齐 margin-left:auto; margin-right:auto; 2.使用position属性进行左右对齐 3.使用fl ...
- CSS 常用操作
1.对齐 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <ti ...
- 【温故而知新-CSS】使用CSS设计网站导航栏
body #nav li a { width: auto; } #nav li a:hover { background-color: #ffcc00; color: #fff; border-rig ...
- CSS3学习-用CSS制作立体导航栏
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 天书笔记:HTML+CSS实现顶部导航栏
此笔记纯属本人脑残笔记,阅读困难不理解属正常现象,初学者尽量不要阅读,否则轻则口吐白沫重则走火入魔,切记切记 先晒效果图: 效果要求类似于b站的顶部导航(..原谅我老是拿b站做例子:) ) 然后是代码 ...
- 纯CSS实现nav导航栏+jQuery实现article区DIV切换
效果图: main.html 代码: <!DOCTYPE html> <html> <head> <title>MyHomepage</title ...
随机推荐
- [转] Linux下查看用户列表
原文地址:http://xiaod.in/read.php?77 俺的centos vps上面不知道添加了多少个账户,今天想清理一下,但是以前还未查看过linux用户列表,google了一下,找到方便 ...
- Linux GRUB 2及修改默认启动项
The GRUB 2 boot loader makes sure that you can boot Linux. GRUB 2 is installed in the boot sector of ...
- java图片缩放
package com.rubekid.springmvc.utils; import java.awt.AlphaComposite; import java.awt.Graphics2D; imp ...
- Android Design Support Library: 学习CoordinatorLayout
简述 CoordinatorLayout字面意思是"协调器布局",它是Design Support Library中提供的一个超级帧布局,帮助我们实现Material Design ...
- Arcgis android - Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE
报错: Installation error: INSTALL_FAILED_INSUFFICIENT_STORAGE Please check logcat output for more deta ...
- 如何完全卸载SQL Server 2005
用过SQL Server 2005的朋友都应该知道,不管是安装还是完全卸载都是件很头疼的事情. 下面跟大家分享一下如何完全卸载SQL Server 2005(手动卸载步骤哦~~). 一.停止sql的服 ...
- java——JNI(例子控制台(64位)清屏
因为java的最底层是jvm,所以单纯的控制台java程序不能感知jvm再下面的操作系统的情况, 可以通过JNI(Java Native Interface)技术实现java后台调用C++/C的dll ...
- 在android中如何查看sqlite数据表结构,以及data文件打不开问题
1.root你的手机 2.cmd进入DOS界面,并且cd 转换目录到AndroidSDK\platform-tools中 3.输入adb shell 4.输入su,进入root权限,此时$变为#,输入 ...
- C++ Primer 5th 第8章 IO库
IO类对象不允许进行拷贝操作. IO类中定义后一些函数和标志,可以用于访问和操作流的状态. 一旦流发生错误,后续IO操作都是失败的. 读写IO对象会改变IO对象的状态. 每个输出流都管理一个缓冲区. ...
- Oracle数据库之创建表空间与用户
Oracle数据库之创建表空间与用户 一.创建表空间 基本语法表述: CREATE TABLESPACE tablespace_name [DATAFILE datafile_spec1 [,data ...