CSS - border用法
<html>
<head>
<title>border-style</title>
<styletype="text/css">
<!--
div{
border-width:6px;
border-color:#000000;
margin:20px; padding:5px;
background-color:#FFFFCC;
}
-->
</style>
</head>
<body>
<div style="border-style:dashed">The border-style of dashed.</div>
<div style="border-style:dotted">The border-style of dotted.</div>
<div style="border-style:double">The border-style of double.</div>
<div style="border-style:groove">The border-style of groove.</div>
<div style="border-style:inset">The border-style of inset.</div>
<div style="border-style:outset">The border-style of outset.</div>
<div style="border-style:ridge">The border-style of ridge.</div>
<div style="border-style:solid">The border-style of solid.</div>
</body>
</html>
border - bortom
<html>
<head>
<title>border-bottom的运用</title>
</head>
<body>
\<pstyle="border-bottom: 8pxdottedblue;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
padding-bortom
<html>
<head>
<title>padding-bottom的运用</title>
</head>
<body>
\<pstyle="border-bottom: 8pxdottedblue; padding-bottom: 30px;">
We can read of things that happened 5,000 years ago in the Near East, where people first learned to write. But there are some parts of the world where even now people cannot write. The only way that they can preserve their history is to recount it as sagas.
</p>
<p>Next paragraph</p>
</body>
</html>
行内元素的margin
<html>
<head>
<title>两个行内元素的margin</title>
\<styletype="text/css">
<!--
span{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
span.left{
margin-right:300px;
background-color:#a9d6ff;
}
span.right{
margin-left:40px;
background-color:#eeb0b0;
}
-->
</style>
</head>
<body>
\<span class="left">行内元素1</span>\<span class="right">行内元素2</span>
</body>
</html>
块级元素的margin：
<html>
<head>
<title>两个块级元素的margin</title>
\<styletype="text/css">
<!--
div{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
-->
</style>
</head>
<body>
\<div style="margin-bottom:50px;">块元素1</div>
\<div style="margin-top:30px;">块元素2</div>
</body>
</html>
父子块的margin
<html>
<head>
<title>父子块的margin</title>
\<styletype="text/css">
<!--
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1pxsolid#000000;
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1pxdashed#004993;
}
-->
</style>
</head>
<body>
\<div class="father">
\<div class="son">子div</div>
</div>
</body>
</html>
