1、对齐
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>对齐</title> <style> * { margin: 0px; } .div { width: 70%; height: 1000px; background-color: red; margin-left: auto; margin-right: auto; } </style> </head> <body> <div class="div"> </div> </body> </html>
2、分类
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>分类</title> <style> .p1 { line-height: normal; max-width: 250px; } .p2 { width: 400px; line-height: 200%; } .p3 { width: 400px; line-height: 50%; } </style> </head> <body> <p class="p1"> this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page </p> <p class="p2"> this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page </p> <p class="p3"> this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page this is my web page </p> </body> </html>
...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>分类</title> <style> li { display: inline; visibility: hidden; } </style> </head> <body> <ul> <li>hello</li> <li>hello</li> <li>hello</li> <li>hello</li> </ul> </body> </html>
3、垂直导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>垂直导航栏</title> <style> ul { list-style-type: none; margin: 0px; padding: 0px; } a:link, a:visited { text-decoration: none; display: block; background-color: burlywood; color: aliceblue; width: 50px; text-align: center; } a:active, a:hover { background-color: crimson; } </style> </head> <body> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> </ul> </body> </html>
4、水平导航栏
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>水平导航栏</title> <style> ul { list-style-type: none; margin: 0px; padding: 0px; background-color: burlywood; width: 250px; text-align: center; } a:link, a:visited { font-weight: bold; text-decoration: none; background-color: burlywood; color: aliceblue; width: 50px; text-align: center; } a:active, a:hover { background-color: crimson; } li { display: inline; padding: 3px; padding-left: 5px; padding-right: 5px; } </style> </head> <body> <ul> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> </ul> </body> </html>
5、图片
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS图片</title> <style> body { margin: 10px auto; width: 70%; height: auto; /*background-color: burlywood;*/ } .image { border: 1px solid darkgray; width: auto; height: auto; float: left; text-align: center; margin: 5px; } img { margin: 5px; width: 300px; height: 180px; opacity: 0.8; /*透明度*/ } .text { font-size: 15px; margin-bottom: 5px; } a:hover { background-color: burlywood; } </style> </head> <body> <div class="image"> <a href="#" target="_self"> <img src="Scripts/img/bg.jpg" alt="美女" /> </a> <div class="text">漂亮的妹子</div> </div> <div class="image"> <a href="#" target="_self"> <img src="Scripts/img/bg.jpg" alt="美女" /> </a> <div class="text">漂亮的妹子</div> </div> <div class="image"> <a href="#" target="_self"> <img src="Scripts/img/bg.jpg" alt="美女" /> </a> <div class="text">漂亮的妹子</div> </div> </body> </html>