标签：head log content copyright tor gif css out style
内部样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> body{ background-color: silver; } //内部样式 input{background-color: yellow; font-size: 12px; } //设置input的内部样式 #div1{background: green;width: 90%;height: 20%;} //id为div1的，前面加# .xm{ background-color: red; font-size: 16px; } //class为xm,前面加. input.xh{background-color: blue; } //是input且class 是xh的 } } </style> </head> <body> Welcome <br> <input type="text" class="xm"> <br> <input type="text" style="width: 100px; font-size: 1.2em" name=""> <p class="xh"> Hello world </p> </body> </html>
内部样式层次结构
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> #main input {background-color: yellow; font-size: 12px; } .extend input { background-color: cyan; font-size: 12px; } </style> </head> <body> Welcome <br> <div id="main"> 学号: <input type="text"> <br> </div> <div class="extend"> 姓名: <input type="text"> <br> </div> </body> </html>
布局样例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MyGod</title> <style type="text/css"> div#container{ width:500px } div#header { background-color:cyan; } div#menu { background-color:#ff9; height:200px; width:100px; float:left; } div#content { background-color:#eee; height:200px; width:400px; float:left; } div#footer { background-color:#9bb; clear:both; text-align:center; } h1 { margin-bottom:0; } h2 { margin-bottom:10; font-size:14px; } ul { margin:1; } li { list-style:none; } </style> </head> <body> <div id="container"> <div id="header"> <h1>Main Title of Web Page</h1> </div> <div id="menu"> <h2>Menu</h2> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> </div> <div id="content">Content goes here</div> <div id="footer">Copyright 2000-2014</div> </div> </body> </html>
标签：head log content copyright tor gif css out style
原文地址：http://www.cnblogs.com/wust-ouyangli/p/6035482.html
