4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏
- 熟练使用导航栏，对于任何网站都非常重要
- 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单
垂直导航栏：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head> <body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul> <p>A background color is added to the links to show the link area.</p>
<p>Notice that the whole link area is clickable, not just the text.</p>
</body>
</html>
水平导航栏：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
</style>
</head> <body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul> </body>
</html>
浮动列表项：
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
</style>
</head> <body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul> <p><b>Note:</b> If a !DOCTYPE is not specified, floating items can produce unexpected results.</p> <p>A background color is added to the links to show the link area. The whole link area is clickable, not just the text.</p> <p><b>Note:</b> overflow:hidden is added to the ul element to prevent li elements from going outside of the list.</p> </body>
</html>
CSS 属性选择器
<!DOCTYPE html>
<html>
<head>
<style>
[title]{
color: red;
}
</style>
</head> <body>
<h1 title="haha">666</h1>
</body>
</html>
CSS属性和值选择器
- 属性=值（单值）
- 属性~=值（包含值的都算，多值）
<!DOCTYPE html>
<html>
<head>
<style>
[title~=hello]
{
color:blue;
}
</style>
</head> <body>
<h2>Will apply to:</h2>
<h1 title="hello world">Hello world</h1>
<p title="student hello">Hello CSS students!</p>
<hr>
<h2>Will not apply to:</h2>
<p title="student">Hi CSS students!</p>
</body>
</html>
表单样式：
- 属性选择器无需选择class或者id的形式
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
input[type="text"]{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: red;
} button[type="button"]{
width: 120px;
height: 100px;
margin-left: 35px;
background-color: blue;
display: block;
}
</style>
</head>
<body>
<form action="method" method="get" accept-charset="utf-8" type="text" size="20px" name="input">
name<input value="haha" type="text">
password<input value="hehe" type="text" size="20px">
<button type="button" value="example button">example button</button>
</form>
</body>
</html>
4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器的更多相关文章
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- CSS：导航栏下拉菜单模板
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- 织梦DedeCMS v5.7 实现导航条下拉菜单
首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...
- 经典的 div + css 鼠标 hover 下拉菜单
经典的 div + css 鼠标 hover 下拉菜单 效果图: 源码: <html> <head> <meta charset="utf-8"> ...
- Bootstrap历练实例：导航内下拉菜单的用法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- 更改SharePoint 2010 顶部导航为下拉菜单样式
更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...
- CSS写动态下拉菜单 -----2017-03-27
动态网站第一步:动态下拉菜单 关键点: overflow:hidden max-height xx:hover {} 设置当鼠标移上之后的效果 transition: 设置过度时间 cursor: ...
随机推荐
- 【转】解决jenkins自动杀掉衍生进程
在执行 shell输入框中加入BUILD_ID=dontKillMe ,即可防止jenkins杀死启动的进程 export BUILD_ID=dontKillMe PROJECT_LOCATION=& ...
- socket udp编程的一些积累的记录
接了个小活,要求写udp的客户端,循环接收服务端的固定的指令并显示数据 我设计的逻辑是,用户在界面输入框输入服务器ip.端口,随后udp连接,开启线程循环接收,接收指令,解析成数据,存在结构体的lis ...
- python中字符串的四种表达方式
今天在学习python的基础的内容,学习在python中如何操作字符串,在此记录下. 主要是python中字符串的几种表达,表示方式. python的几种表达方式 1 使用单引号扩起来字符串 > ...
- Python - 用python实现split函数
# pattern支持字符或者字符串 def my_split(string, pattern): ret = [] len_pattern = len(pattern) while True: in ...
- hackinglab-脚本关1——key又又找不到了
首先打开链接然后会发现是 然后用bp进行抓包然后会发现 然后点一下网页中的链接然后会发现 会发现抓包抓到一个地址 然后提示改一下网页的后缀地址 然后就得到了 key
- 吴裕雄 python 机器学习——数据预处理流水线Pipeline模型
from sklearn.svm import LinearSVC from sklearn.pipeline import Pipeline from sklearn import neighbor ...
- IIS-代理
http://192.168.11.3:8083/java 访问 http://192.168.11.3:8089 http://192.168.11.3:8083/?id=1 访问http:/ ...
- Laravel Vuejs 实战：开发知乎 （9）定义话题与问题关系
1.话题[Topic] 执行命令: php artisan make:model Topic –cmr 修改****_**_**_create_topics_table.php数据库迁移文件如下: c ...
- 队列的python实现
队列(queue),是一种操作受限的线性表.只允许在队列的一端添加元素,在队列的另一端删除元素.能添加元素的一端称为队尾,能删除元素的一端称为队头. 队列最大的特性是:先进先出(FIFO,first ...
- 4_3 救济金发放（UVa133）<子过程/函数设计>
为了缩短领救济品的队伍,NNGLRP决定了以下策略:每天所有来申请救济品的人会被放在一个大圆圈,面朝里面.标明一个人为编号1号,其他的就从那个人开始逆时针开始编号直到N.一个官员一开始逆时针数,数k个 ...