1. 程式人生 > >HTML學習筆記 w3sCss盒子模型(陰影)(div的一些使用)案例 第十節 (原創) 參考使用表

HTML學習筆記 w3sCss盒子模型(陰影)(div的一些使用)案例 第十節 (原創) 參考使用表

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設置內低邊距&#45;&#45;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的一些使用)案例 第十節 (原創) 參考使用表