HTML學習筆記 w3sCss盒子模型(陰影)(div的一些使用)案例 第十節 (原創) 參考使用表
阿新 • • 發佈:2018-06-05
idt pac cin head src 模型圖 div 盒子模型 樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title> <!--其實就是div加css樣式設計出一些邏輯頁面--> <link rel="stylesheet" href="tzy.css" type="text/css"> </head> <body style="margin: 0px"> <!--取消身體外層的外邊框--> <img src="http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/o_8L7BYYH7PD%606Z@3F4X]2V8H.png" alt="盒子模型圖片"> <!--padding設置所有內邊距————padding-botton設置內低邊距--left設置內左邊距--> <!--right設置內右邊距————top設置內上邊距--> <table border="1" cellpadding="100px"cellspacing="10"> <tr> <td>0</td> </tr> </table> <table border="1"> <tr> <td id="td1">1</td> </tr> </table> <table border="1"> <tr> <td id="td2">2</td> </tr> </table> <table border="1"> <tr> <td id="td3">3</td> </tr> </table> <table border="1"> <tr> <td id="td4">4</td> </tr> </table> <p>邊框效果</p> <div class="tzy">陰影效果</div> <div class="ttzy">外邊距</div> <div class="container"> <div class="bd"> <div class="pd"> <div class="content">Hello</div> </div> </div> </div> </body> </html>
#td1{ padding-bottom: 100px; } #td2{ padding-left: 100px; } #td3{ padding-right: 100px; } #td4{ padding-top: 100px; } p{ border-style: double; border-top-style: solid; border-bottom-style: hidden; border-left-style: dotted; border-right-color: aqua; border-bottom-width: 10px; /*border-style 定義了10個不同的非繼承的樣式邊框包括none(空)*/ /*單邊加上下左右就可以設置*/ /*border-width邊框寬度*/ /*單邊加上下左右就可以設置*/ /*border-color邊框顏色 */ /*單邊加上下左右就可以設置*/ border-radius:50px; width: 100px; height: 50px; /*設置圓角 邊框四角弧度*/ background-color: bisque; text-align: center; /*border: 2px solid blue;*/ /*一般設置方法*/ } .tzy{ color: blue; background-color: aqua; width: 100px; height: 100px; text-align: center; box-shadow: 10px 10px 15px #FF00FF; /*陰影效果*/ } .ttzy{ background-color: bisque; width: 100px; height: 100px; margin: 100px; /*margin居上和左為100PX margin也有上下左右屬性*/ } .container{ /*外邊框*/ margin: 100px; } .bd{ /*邊框*/ border-style: double; } .pd{ /*內邊距*/ padding: 100px; } .content{ background-color: #FF00FF; }
HTML學習筆記 w3sCss盒子模型(陰影)(div的一些使用)案例 第十節 (原創) 參考使用表