目錄
塊元素背景，邊框，顏色等佈局
<html>
<head>
<title>border-style</title>
<style type="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>
塊元素ID選擇器
<html>
<head>
<style type="text/css">
#outerBox{
width:200px;
height:100px;
border:2px black solid;
border-left:4px green dashed;
border-color:red gray orange blue; /*上 右 下 左*/
border-right-color:purple;
}
</style>
</head>
<body>
<div id="outerBox">
</div>
</body>
另一個例子
<html>
<head>
<style type="text/css">
#outerBox{
width:128px;
height:128px;
border:10px black dashed;
background:silver;
}
</style>
</head>
<body>
<div id="outerBox">
</div>
</body>
塊元素中的圖片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示</title>
<style type="text/css">
#box{
width:128px;
height:128px;
padding:0 20px 10px; /*上 左右 下*/
padding-left:10px;
border:10px gray dashed;
}
#box img{
border:1px blue solid;
}
</style>
</head>
<body>
<div id="box"><img src="cup.gif"></img></div>
</body>
</html>
盒子模型的演示
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型的演示</title>
<style type="text/css">
body{
margin:0 0 0 0;
font-family:宋體;
font-size:12px;
}
ul {
background: #ddd;
margin: 15px 15px 15px 15px;
padding: 5px 5px 5px 5px;
/* 沒有設置邊框 */
}
li {
color: black; /* 黑色文本 */
background: #aaa; /* 淺灰色背景 */
margin: 20px 20px 20px 20px; /* 左側外邊距爲0，其餘爲20像素*/
padding: 10px 0px 10px 10px; /* 右側內邊距爲0，其餘10像素 */
list-style: none /* 取消項目符號 */
/* 未設置邊框 */
}
li.withborder {
border-style: dashed;
border-width: 5px; /* 設置邊框爲2像素 */
border-color: black;
margin-top:20px；
}
</style>
</head>
<body>
<ul>
<li>第1個列表的第1個項目內容</li>
<li class="withborder">第1個列表的第2個項目內容，內容更長一些，目的是演示自動折行的效果。</li>
</ul>
<ul>
<li>第2個列表的第1個項目內容</li>
<li class="withborder">第2個列表的第2個項目內容，內容更長一些，目的是演示自動折行的效果。</li>
</ul>
</body>
</html>
塊級元素中的文本格式
<html>
<head>
<title>div 標記範例</title>
<style type="text/css">
div{
font-size:18px; /* 字號大小 */
font-weight:bold; /* 字體粗細 */
font-family:Arial; /* 字體 */
color:#FFFF00; /* 顏色 */
background-color:#0000FF; /* 背景顏色 */
text-align:center; /* 對齊方式 */
width:300px; /* 塊寬度 */
height:100px; /* 塊高度 */
}
</style>
</head>
<body>
<div>
這是一個div標記
</div>
</body>
</html>
塊級元素div與內聯元素span的對比
<html>
<head>
<title>div與span的區別</title>
</head>
<body>
<p>div標記不同行：</p>
<div><img src="cup.gif" border="0"></div>
<div><img src="cup.gif" border="0"></div>
<div><img src="cup.gif" border="0"></div>
<p>span標記同一行：</p>
<span><img src="cup.gif" border="0"></span>
<span><img src="cup.gif" border="0"></span>
<span><img src="cup.gif" border="0"></span>
</body>
</html>
兩個行內元素的margin
<html>
<head>
<title>兩個行內元素的margin</title>
<style type="text/css">
span{
background-color:#a2d2ff;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
}
span.left{
margin-right:30px;
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>
<style type="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>
子div
<head>
<title>父子塊的margin</title>
<style type="text/css">
<!--
div.father{ /* 父div */
background-color:#fffebb;
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px solid #000000;
height:40px; /* 設置父div的高度 */
}
div.son{ /* 子div */
background-color:#a2d2ff;
margin-top:30px;
margin-bottom:0px;
padding:15px;
border:1px dashed #004993;
}
-->
</style>
</head>
<body>
<div class="father">
<div class="son">子div</div>
</div>
</body>
span的margin設置爲負數
<head>
<title>margin設置爲負數</title>
<style type="text/css">
span{
text-align:center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding:10px;
border:1px dashed #000000;
}
span.left{
margin-right:30px;
background-color:#a9d6ff;
}
span.right{
margin-left:-53px; /* 設置爲負數 */
background-color:#eeb0b0;
}
</style>
</head>
<body>
<span class="left">行內元素1</span><span class="right">行內元素2</span>
</body>
盒子模型的演示
<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>盒子模型的演示</title>
<style type="text/css">
body{
margin:0 0 0 0;
font-family:宋體;
}
ul {
background: #ddd;
margin: 15px;
padding: 10px;
font-size:12px;
line-height:14px;
}
h1 {
background: #ddd;
margin: 15px;
padding: 10px;
height:30px;
font-size:25px;
}
p,li {
color: black; /* 黑色文本 */
background: #aaa; /* 淺灰色背景 */
margin: 20px 20px 20px 20px; /* 左側外邊距爲0，其餘爲20像素*/
padding: 10px 0px 10px 10px; /* 右側內邊距爲0，其餘10像素 */
list-style: none /* 取消項目符號 */
}
.withborder {
border-style: dashed;
border-width: 5px; /* 設置邊框爲2像素 */
border-color: black;
margin-top:20px;
}
</style>
</head>
<body>
<h1>標準流中的盒子模型演示</h1>
<ul>
<li>第1個項目內容</li>
<li class="withborder">第2個項目內容，第2個項目內容，第2個項目內容，第2個項目內容，第2個項目內容，第2個項目內容。</li>
</ul>
</body>
</html>