码迷,mamicode.com
首页 > Web开发 > 详细

HTML学习笔记 w3sCss盒子模型 第十节 (原创)

时间:2017-09-10 13:36:22      阅读:177      评论:0      收藏:0      [点我收藏+]

标签:col   doctype   content   htm   属性   margin   边框   定义   oct   

<!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">
<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{

}

HTML学习笔记 w3sCss盒子模型 第十节 (原创)

标签:col   doctype   content   htm   属性   margin   边框   定义   oct   

原文地址:http://www.cnblogs.com/ttzzyy/p/7500652.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!