HTML学习笔记 w3sCss盒子模型第十节（原创）

发布时间：2017-09-10 12:00:13

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>W3sCSS盒子模型</title&g ...

<!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 >
<!--取消身体外层的外边框-->
<img src='/images/loading.gif' data-original="http://images.cnblogs.com/cnblogs_com/ttzzyy/1076163/o_8L7BYYH7PD%606Z@3F4X]2V8H.png" >
<!--padding设置所有内边距————padding-botton设置内低边距&#45;&#45;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 >阴影效果</div>
<div >外边距</div>

<div >
 <div >
  <div >
   <div >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{

}