目录
理论知识：
边框的写法：
border: 边框的宽度 样式 颜色;
边框的四种样式：solid dashed dotted double
solid表示细线 dashed表示线段组成的虚线 dotted表示圆点组成的虚线 double表示双线
边框的每一条边也可以单独设置，若要单独设置一条边不一样，在整体设置后，另外再设置那条边即可。
border-top，border-bottom，border-left，border-right就是边框的四条边
border-width：上 下 左 右 对边框的四条边的宽度进行设置
border-style：上 下 左 右 对边框的四条边的风格进行设置，就是上面的样式
border-color：上 下 左 右 对边框的四条边的颜色进行设置
上面的上下左右，若只写两个，则表示上下、左右各是一种；只写一个，就是四条边全部应用。
如果width:0px;height:0px; 会出现三角形
设置边框与内容的距离，我们用padding，表示内边距，和border一样，有上下左右
设置边框与边框的距离，我们用margin，表示外边距，和border一样，有上下左右
如果想文字和标题都被边框包裹，则要设3层div，每个div都要设边框
span之间有空格或换行会在网页上出现空格
元素的宽/高：border+padding+width
元素空间的宽/高：border+padding+margin+width
内容的宽/高：width/height
在设置宽高的时候一定要把上面的这些都算进去，别设错了
示例一：简单边框
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片的定位练习</title>
<style>
div{
width:100px;
height:100px;
}
.pp1{
border:5px solid black;
}
.pp2{
border-width:5px;
border-style:solid;
border-color:red green blue purple;
}
.pp3{
border:5px solid red;
border-right:5px dashed red;
}
.pp4{
border-width:5px;
border-style:solid dashed;
border-color:red;
}
.pp5{
border:5px solid black;
border-bottom-color:white;
}
.pp6{
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color:red green blue purple;
}
.pp7{
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color:white;
border-top-color:red;
}
</style>
</head>
<body>
<div class="pp1"></div><hr>
<div class="pp2"></div><hr>
<div class="pp3"></div><hr>
<div class="pp4"></div><hr>
<div class="pp5"></div><hr>
<div class="pp6"></div><hr>
<div class="pp7"></div><hr>
</body>
</html>
示例二：边框和表格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景图片的定位练习</title>
<style>
table{
border:5px dotted blue;
}
</style>
</head>
<body>
<table border="1" width="400px" height="200px" align="center">
<caption>表格基础练习</caption>
<tr>
<td align="right" valign="top">111</td>
<td align="right">222</td>
</tr>
<tr>
<td align="center">333</td>
<td align="center">444</td>
</tr>
</table>
</body>
</html>
示例三：边框和图片
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>边框综合练习3</title>
<style>
.aa{
width:1200px;
height:620px;
border:20px dotted pink;
padding:10px;
}
.aa1{
width:600px;
height:620px;
float:left;
padding-bottom:
}
.aa2{
width:600px;
height:620px;
float:right;
}
</style>
</head>
<body>
<div class="aa">
<div class="aa1">
<img src="images/k1.jpg"></div>
<div class="aa2">
<img src="images/k2.jpg"></div>
</div>
</body>
</html>
示例四：边框和文章
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>边框综合练习4</title>
<style>
*{
padding:0px;
margin:0px;
}
.aa1{
width:1200px;
height:550px;
border:5px dotted red;
margin:5px;
}
.bb1{
width:317px;
height:442px;
float:left;
padding-left:30px;
padding-top:108px;
}
.cc1{
width:600px;
height:442px;
float:right;
padding-right:180px;
padding-top:30px;
}
</style>
</head>
<body>
<div class="aa1">
<div class="bb1">
<img src="images/荷塘月色.jpg">
</div>
<div class="cc1">
<h1>荷塘月色</h1>
<br>
<p>这几天心里颇不宁静。今晚在院子里坐着乘凉，忽然想起日日走过的荷塘，在这满月的光里，总该另有一番样子吧。月亮渐渐地升高了，墙外马路上孩子们的欢笑，已经听不见了；妻在屋里拍着闰儿，迷迷糊糊地哼着眠歌。我悄悄地披了大衫，带上门出去。</p>
<p>沿着荷塘，是一条曲折的小煤屑路。这是一条幽僻的路；白天也少人走，夜晚更加寂寞。荷塘四面，长着许多树，蓊蓊郁郁的。路的一旁，是些杨柳，和一些不知道名字的树。没有月光的晚上，这路上阴森森的，有些怕人。今晚却很好，虽然月光也还是淡淡的。</p>
<p>路上只我一个人，背着手踱着。这一片天地好像是我的；我也像超出了平常的自己，到了另一世界里。我爱热闹，也爱冷静；爱群居，也爱独处。像今晚上，一个人在这苍茫的月下，什么都可以想，什么都可以不想，便觉是个自由的人。白天里一定要做的事，一定要说的话，现在都可不理。这是独处的妙处，我且受用这无边的荷香月色好了。</p>
<p>曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。</p>
</div>
</div>
</body>
</html>
6394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
