index.html文件
<!DOCTYPE html>
<html>
<head>
<title>JOE-DIV+CSS</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body>
<!--整體外層容器-->
<div id="container">
<!--banner條-->
<div id="banner">
<img src="images/banner1.jpg" alt="first webpage">
</div>
<!--全局導航條-->
<div id="globllink">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">新疆簡介</a></li>
<li><a href="#">風土人情</a></li>
<li><a href="#">吃在新疆</a></li>
<li><a href="#">路線選擇</a></li>
<li><a href="#">自主行</a></li>
<li><a href="#">攝影攝像</a></li>
<li><a href="#">游記精選</a></li>
<li><a href="#">資源下載</a></li>
<li><a href="#">雁過留聲</a></li>
</ul>
</div>
<!--左側欄-->
<div id="left">
<div id="weather">
<h3><span>天氣查詢</span></h3>
<ul>
<li>烏魯木齊雷陣雨</li>
<li>吐魯番多云轉陰</li>
<li>喀什陣雨轉多云</li>
<li>庫爾勒陣雨轉陰</li>
</ul>
</div>
<div id="today">
<h3><span>今日推薦</span></h3>
<ul>
<li><a href="#"></a><img src="images/left1.jpg"></li>
<li><a href="">哈哈哈</a></li>
<li><a href="#"></a><img src="images/left2.jpg"></li>
<li><a href="">啦啦啦</a></li>
<li><a href="#"></a><img src="images/left3.jpg"></li>
<li><a href="">嘻嘻嘻</a></li>
</ul>
</div>
</div>
<!--中間內容欄-->
<div id="middle">
<div id="host">
<img src="images/host.jpg" alt="魔鬼域"><a href="#"></a>
</div>
<div id="scene">
<h3><span>美景尋蹤</span></h3>
<ul>
<li><img src="images/1.jpg"><a href=""></a></li>
<li><img src="images/2.jpg"><a href=""></a></li>
<li><img src="images/3.jpg"><a href=""></a></li>
<li><img src="images/4.jpg"><a href=""></a></li>
</ul>
</div>
<div id="route">
<h3><span>線路精選</span></h3>
<ul>
<li><a href="#">哈哈哈哈哈哈哈奧奧奧奧奧奧奧奧奧奧</a></li>
<li><a href="#">拉伸的發(fā)是快了多好看咖喱的客服哈</a></li>
<li><a href="#">愛神的箭喝薔薇哦女稍等哈地方留到那就是</a></li>
<li><a href="#">鱷魚ID灰色空間二維覅胡當升科技</a></li>
</ul>
</div>
</div>
<!--右側欄-->
<div id="right">
<div id="fengguang">
<h3><span>新疆風光</span></h3>
<ul>
<li><img src="images/right1.jpg"><a href="#"></a></li>
<li><img src="images/right2.jpg"><a href="#"></a></li>
</ul>
</div>
<div id="xiaochi">
<h3><span>小吃推薦</span></h3>
<ul>
<li><a href="#">烤馕</a></li>
<li><a href="#">大盤雞</a></li>
<li><a href="#">羊肉串</a></li>
<li><a href="#">馕包飯</a></li>
</ul>
</div>
<div id="binguan">
<h3><span>賓館推薦</span></h3>
<ul>
<li><a href="#">美麗華大飯店</a></li>
<li><a href="#">五星級大酒店</a></li>
<li><a href="#">新疆賓館</a></li>
<li><a href="#">勞力士干</a></li>
<li><a href="#">安徽分發(fā)生</a></li>
<li><a href="#">且去西藏</a></li>
<li><a href="#">啊搜房幫啊</a></li>
</ul>
</div>
</div>
<!--腳注欄-->
<div id="footer">
<p>JOE ©版權所有 <a href="webmail@qq.com">joe@qq.com</a></p>
</div>
</div>
</body>
</html>
樣式文件css.css
body{
background:#2286c6;
margin: 0px;
padding: 0px;
font-size: 12px;
font-family: Arial;
}
#container{
margin: 0px auto;
width: 780px;
text-align: left;
background: #123456;
}
#banner{
margin: 0px;
padding: 0px;
background: #778899;
width: 100%;
}
#globllink{
margin: 0px;
padding: 0px;
background: #567;
height: 50px;
width: 100%;
}
#globllink ul{
list-style-type: none;
margin: 0px;
padding: 0px;
}
#globllink ul li{
text-align: center;
float: left;
margin: 0px;
padding: 0px;
}
#globllink ul li a{
display: block;
width: 78px;
padding: 10px 0px;
font-size: 15px;
}
#globllink ul a:link,#globllink ul a:visited{
color: black;
background: url("images/button1.png") no-repeat;
text-decoration: underline;
}
#globllink ul a:hover{
color: white;
background: url("images/button1_bg.png") no-repeat;
text-decoration: none;
}
#left{
width: 200px;
background: #66b3ff;
margin: 0px;
padding: 0px 0px 5px 0px;
color: #d8ecff;
float: left; // 表示向左浮動
}
#weather{
background: url("images/weather.jpg") no-repeat;
padding: 0px;
margin: 2px 5px 20px 5px;
}
#weather h3{
text-align: center;
margin: 5px 0px;
padding: 5px 0px;
color: yellow;
}
#weather ul{
list-style-type: none;
padding: 0px;
margin: -10px 0px;
}
#weather li{
background: url("images/icon1.png") no-repeat 2px 2px;
padding: 5px 26px;
margin: 0px 8px;
}
#today{
margin: 2px 5px 84px 5px;
}
#today h3{
color: #0000c6;
background: #ddddff url("images/icon2.png") no-repeat 2px 3px;
padding: 3px 25px;
}
#today ul{
list-style-type: none;
padding: 0px;
text-align: center;
margin: -5px 0px;
}
#today ul li{
margin: 0px;
padding: 0px;
}
#today li img{
border: #ffffff solid;
padding: 0px;
margin: 0px;
}
#today li a{
padding: 0px;
margin: 0px;
}
#today li a:link, #today li a:visited{
padding: 2px;
margin: 0px;
}
#today li a:hover{
color: #ffffff;
text-decoration: none;
}
#middle{
width: 400px;
background: #ffffff;
margin: 0px 0px;
padding: 5px 5px;
float: left;
}
#scene h3{
text-align: left;
padding: 0px 0px 0px 10px;
margin: 5px 0px;
}
#scene ul, #route ul{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#scene ul li img{
float: left;
margin: 0px 3px 0px 3px;
border: #ff5809 solid 2px;
}
#route {
clear: both;
margin: 0px;
padding: 5px 0px;
}
#route h3{
text-align: left;
padding: 0px 0px 0px 10px;
margin: 5px 0px;
}
#route ul li{
background: url("images/icon2.png") no-repeat 2px ;
padding: 5px 25px;
color: #ffdc35;
}
#route ul li a:list, #route ul li a:visited{
text-decoration: none;
color: #004e8a;
}
#route ul li a:hover{
text-decoration: underline;
color: #000000;
}
#right{
width: 170px;
background: #66b3ff;
margin: 0px;
padding: 0px 0px 5px 0px;
float: left;
}
#fengguang,#xiaochi,#binguan{
margin: 2px 0px 20px 0px;
padding: 0px;
}
#fengguang img{
margin: 0px;
padding: 0px 0px 5px 0px;
}
#fengguang h3,#xiaochi h3,#binguan h3{
margin: 5px 2px 10.3px 0px;
padding: 0px;
background: #ddddff;
}
#fengguang ul, #xiaochi ul, #binguan ul{
list-style-type: none;
padding: 0px;
margin: 5px;
}
#fengguang ul li{
text-align: center;
margin: 10px 0px 0px 0px;
padding: 0px 0px 10px 0px;
}
#xiaochi ul li, #binguan ul li{
background: url("images/icon2.png") no-repeat;
margin: 2px;
padding: 0px 0px 2px 25px;
border-bottom: 1px dashed #eeeeee;
}
#xiaochi ul li a:link, #binguan ul li a:visited{
text-decoration: none;
color: blue;
}
#xiaochi ul li a:hover, #binguan ul li a:hover {
text-decoration:underline;
color: #ffffff;
}
#footer{
background: #f9f900;
width: 100%;
margin: 2px 2px;
padding: 1px 0px;
clear: both;
}
#footer p{
text-align: center;
}
#footer p a{
color: #ffffff;
text-decoration: none;
}
圖片文件
圖片文件在同級目錄的images文件夾下.
1.jpg
2.jpg
3.jpg
4.jpg
banner.png
banner1.jpg
button_bg.png
button1.png
host.jpg
icon1.png
icon2.png
left1.jpg
left2.jpg
left3.jpg
right1.jpg
right2.jpg
weather.jpg
CSS+DIV模型圖
標準盒子模型.jpeg
注: 僅為記錄代碼,圖片資源來自網(wǎng)絡,侵刪...
