參考： 韓順平 輕鬆搞定網頁設計
1. 邊框和外邊距設置
效果圖
tstBox1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>testBox.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="textBox1.css" type="text/css"></link></head>
<body>
<div class = "s1">
<img src="images/0.jpg">
</div>
</html>對應的testBox1.css
Body{
margin: 0 auto;/*讓body在瀏覽器顯示的時候，上下不留空，左右居中自適應*/
border: 1px solid ;
border-top-color: red;
height:1500px;
width:1800px;
}
.s1{
border: 1px solid blue;/*每個邊框有 3 個方面：寬度、樣式，以及顏色*/
height:300px;
width:400px;
margin-left: 100px;
margin-top: 10px;
}
.s1 img{
margin-left: 30px;/*以左上角爲原點*/
margin-top: 10px;
}
效果圖
box2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>box2.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="./box2.css">
</head>
<body>
<div class = "div1">
<ul class = "faceul">
<li> <img alt="" src="images/0.jpg"> <a href="#">小龍女</a></li>
<li> <img alt="" src="images/0.jpg"> </li>
<li> <img alt="" src="images/0.jpg"> </li>
<li> <img alt="" src="images/0.jpg"> </li>
<li> <img alt="" src="images/0.jpg"> </li>
<li> <img alt="" src="images/0.jpg"> </li>
</ul>
</div>
</body>
</html>box2.css
body{
margin: 0px;
padding:0px;/*瀏覽器顯示左上清空*/
}
/*div1 用於控制顯示的位置*/
.div1{
width: 2500px;
height: 1000px;
border:1px solid #b4b4b4;
margin-left:100px;
margin-top:20px;
}
/*faceul用於控制顯示圖片區域的寬度*/
.faceul{
width:2000px;
height: 800px;
border:1px solid red;
list-style-type: none;
margin: 0px;
padding:0px;
}
/*用於控制單個圖片區域的大小*/
.faceul li{
width:300px;
height:300px;
border:1px solid blue;
float:left;
margin-left: 15px;
margin-top: 15px;
}
.faceul a{
width:400px;
height:5px;
margin-left: 5px;
margin-top: 5px;
}
a:link{
text-decoration: none;
color:black;
}
a:hover{
text-decoration: none;
color:red;
}
.faceul img{
width:280px;
height:250px;
margin-left: 5px;
margin-top: 5px;
}3.圖片佈局整齊中級
效果圖：
box3.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>box3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link rel="stylesheet" href="box3.css" type="text/css"></link></head>
<body>
<div class = "div1">
<div>
<span class = "span1"><font class = "font1">優酷牛人</font> <a href ="#" >更多牛人</a></span>
<ul class = "faceul">
<li> <img src="images/0.jpg"><span>MichaeInii</span> <img src="images/1.jpg" ></li>
<li> <img src="images/0.jpg"><span>小演礦</span> <img src="images/1.jpg"> </li>
<li> <img src="images/0.jpg"><span>道聽途說</span> <img src="images/1.jpg" ></li>
</ul>
</div>
<div>
<span class = "span1"><font class = "font1 ">明星空間</font><a href ="#" >更多空間</a></span>
<ul class = "faceul">
<li> <img src="images/0.jpg"><span>愛心月</span> <img src="images/1.jpg" ></li>
<li> <img src="images/0.jpg"><span>【城堡】</span> <img src="images/1.jpg" > </li>
<li> <img src="images/0.jpg"><span>盧正雨</span> <img src="images/1.jpg" ></li>
</ul>
</div>
<div>
<span class = "span1"><font class = "font1">優酷公益</font><a href ="#" >更多公益官網</a></span>
<ul class = "faceul1">
<li> <img src="images/0.jpg"><span>扶貧基金會</span></li>
<li> <img src="images/0.jpg"><span>李冰冰LOVE</span> </li>
<li> <img src="images/0.jpg"><span>生態中國</span> </li>
</ul>
</div>
</div>
</body>
</html>對應的box3.css
/*body在各個瀏覽器顯示時，左上角都有不同程度的空隙，若想統一樣式，需要定製*/
body{
margin: 0px auto;/*自動居中*/
height: 1400px;
width: 1200px;
border:1px solid blue;
}
/*本例中，把所有的顯示內容全部先用一個div包起來，方便顯示。*/
.div1{
height: 1380px;
width: 1180px;
border:1px solid gray;/*設置border邊界的寬度樣式和顏色 */
}
/*定義幾個常用的字體*/
.font1{
font-weight: bold;
font-size: 20px;
margin:2px 0 0 2px;
}
/*如果需要，可以定義幾種超鏈接的樣式，本例中就一切從簡了.超鏈接不需要再定義類選擇器，它專屬的樣式有a:link、a:hover、a:visited*/
a:link{
text-decoration: none;/*設置鏈接無下劃線*/
}
.span1{
/*background-color: pink;*/
display: block;
}
.span1 a{
margin-left:950px;
}
.faceul {
list-style-type: none;
border:1px solid green;
height: 450px;
width: 1150px;
padding:0px;
/*background-color: green;*/
}
.faceul li{
border:1px solid #b4b4b4;
height: 400px;
width: 320px;
margin-top: 5px;
margin-left: 5px;
float:left;/*左浮動，本來ul li無序列表顯示的圖片是縱向的，這樣一左浮動，變成橫向拓展了*/
margin:25px;
/*background-color: red;
text-align: center;*/
}
.faceul image{
margin-top: 5px;
margin-left: 5px;
height: 350px;
width: 250px;
}
/*由於要顯示的效果，分了三個div,前兩個div區域中，每個li對應的圖片下，不僅有文字還有圖片，
*而最下面的一個div裏面每個li中沒有圖片，和上面鏈各個div不一樣，所以單獨拿出來設置樣式，
*和前面的faceul的主要區別就是邊框的高度修改了
*/
.faceul1 {
list-style-type: none;
border:1px solid green;
height: 300px;
width: 1150px;
padding:0;
/*background-color: green;*/
}
.faceul1 li{
border:1px solid #b4b4b4;
height: 270px;
width: 320px;
margin-top: 5px;
margin-left: 5px;
float:left;/*左浮動*/
margin:25px;
/*background-color: red;*/
text-align: center;/*文字居中顯示*/
}
.faceul1 image{
margin-top: 5px;
margin-left: 5px;
height: 300px;
width: 250px;
}