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>