<!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%[email protected]]2V8H.png" alt="盒子模型图片"><!--padding设置所有内边距————padding-botton设置内低边距--left设置内左边距--><!--right设置内右边距————top设置内上边距--><table border="1" cellpadding="100px"><tr> <td>1</td></tr></table><table border="1"> <tr> <td id="td1">1</td> </tr></table><table border="1"> <tr> <td id="td2">1</td> </tr></table><table border="1"> <tr> <td id="td3">1</td> </tr></table><table border="1"> <tr> <td id="td4">1</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> css文件tzy.css
#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; /*设置圆角 边框四角弧度*/
text-align: center; /*border: 2px solid blue;*/ /*一般设置方法*/}.tzy{ color: blue;
width: 100px; height: 100px; text-align: center; box-shadow: 10px 10px 5px #FF00FF; /*阴影效果*/}.ttzy{
width: 100px; height: 100px; margin: 100px; /*margin居上和左为100PX margin也有上下左右属性*/}.container{ /*外边框*/margin: 100px;}.bd{ /*边框*/ border-style: double;}.pd{/*内边距*/padding: 100px;}.content{
}
时间： 2024-10-10 03:46:21