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: ...
随机推荐
- eclipse提示错误：save could not be completed
原博客地址:https://blog.csdn.net/alane1986/article/details/6514000 2010年12月06日 19:20:00 alane1986 阅读数:150 ...
- JQuery选择器(转载)
原文:https://blog.csdn.net/colorapp/article/details/44279645 一. jQuery选择器是什么1. CSS选择器要是某个样式应用于特定的HTML元 ...
- Go项目结构
1. go项目工程结构 配置好工作目录后,就可以编码开发了,在这之前,我们看下go的通用项目结构,这里的结构主要是源代码相应地资源文件存放目录结构. 1.1 gopath目录 gopath目录就是我们 ...
- C#中字符串常用方法
string str = "123@163.com"; int index = str.IndexOf('@'); // 返回3 从左向右第一个@ int index = str ...
- AD10如何新建一个集成库
1.新建一个集成库工程 2.添加原理图库 3.添加封装库 4.最关键的一步:对这个工程需要进行编译 5.在界面的右边就能看到自己建的封装库了
- java语法基础--动手动脑问题及课后实验问题
---恢复内容开始--- 动手动脑: 1:仔细阅读示例:EnumTest.java,运行它,分析运行结果 结果 :枚举类型是引用类型!枚举类型不属于原始数据类型,它的每个具体指都引用一个特定的对象.相 ...
- 通过POI实现上传EXCEL的批量读取数据写入数据库
最近公司新增功能要求导入excel,并读取其中数据批量写入数据库.于是就开始了这个事情,之前的文章,记录了上传文件,本篇记录如何通过POI读取excel数据并封装为对象上传. 上代码: 1.首先这是一 ...
- Django中的path函数
path( )作用:解析URL地址 path( ) 标准语法: (<>为必须的参数,[]为可选参数) path(<route>, <view>, [name=Non ...
- 使用电脑热点和Fiddler对Android app进行抓包
如果没有路由器,怎么对app抓包?如果你的电脑可以开热点的话也可以. 打开Fiddler,菜单栏选择Tools->Options->Connections,勾选Allow remote c ...
- Leader:这样的 Bug 你也写的出来？？？
Hello~各位读者新年好!不知道大家春节假期是否已延长,小黑哥刚接到通知,假期延长到 2 月 2 号,另外回去之后需要在家办公,自行隔离两周.还没试过在家办公,小黑哥就怕到时候生物钟还没调整过来,一 ...