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>