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: ...
随机推荐
- OO完结篇-第四单元小结
OO第四单元小结 一.作业架构分析. 1.第一次作业 本次作业需要完成UML类图查询. 难点在于初次接触UML,需要对UML进行一定程度的学习和理解. 思路主要是根据每个传进来的element获取其t ...
- HahMap相关问题
概述 文章对HashMap的部分细节进行介绍,JDK1.7之前有可能出现环形表的问题,而1.7之后进行了改进,文章对环形表现象的出现进行了解析,然后对HashMap注意的几个问题进行了解答. Hash ...
- 前端之js基础篇
JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,决定将JavaScript提交给国际标准化组织ECM ...
- nested exception is org.apache.ibatis.binding.BindingException: Parameter 'cons_id' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]
修改DAO层的类中的方法,如下所示:
- hackinglab-脚本关1——key又又找不到了
首先打开链接然后会发现是 然后用bp进行抓包然后会发现 然后点一下网页中的链接然后会发现 会发现抓包抓到一个地址 然后提示改一下网页的后缀地址 然后就得到了 key
- 对 Element UI table中数据进行二次处理
(1)<el-table-column>标签加上 :formatter="dateFormat" <el-table-column prop="Star ...
- ES-windows版本设置远程访问
1,官网下载 2,下载完解压 3,修改配置文件 elasticsearch.yml network.host: 0.0.0.0http.port: 9200transport.host: localh ...
- dateadd（）日期加法运算
- 洛谷 P1076 寻宝（模拟 && 剪枝）
嗯... 题目链接:https://www.luogu.org/problem/P1076 这道题的题意首先太难理解...并且细节太多... 可以用b[i][j]记录每个指示牌上的数字,a[i][j] ...
- window.onresize
$(function() { window.onresize = function() { alert("abc"); }; window.onresize = function( ...