index部分
<html>
<head>
<link href="first.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top_left">
<p><img src="image/h3.png">
<br>idusfidfuisfisjdksjfjs<br>
jfgjfhgjfdshgjdfhodsfi<br>
skajdakfjdkjfidjfkdsjf<br>
kdsjfksdjfksdjfksdjfks<br>
kshfskdfjkajsfkdasjdla<br>
skldflfkdsjfksjkfdjfkf<br></p>
<h4>更多>></h4>
</div>
<div id="top_right">
<img src="image/pic1.jpg">
<img src="image/pic2.jpg">
<img src="image/pic3.jpg"><br>
<img src="image/pic4.jpg">
<img src="image/pic5.jpg">
<img src="image/pic6.jpg">
</div>
</div>
<head>
<link href="first.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="top">
<div id="top_left">
<p><img src="image/h3.png">
<br>idusfidfuisfisjdksjfjs<br>
jfgjfhgjfdshgjdfhodsfi<br>
skajdakfjdkjfidjfkdsjf<br>
kdsjfksdjfksdjfksdjfks<br>
kshfskdfjkajsfkdasjdla<br>
skldflfkdsjfksjkfdjfkf<br></p>
<h4>更多>></h4>
</div>
<div id="top_right">
<img src="image/pic1.jpg">
<img src="image/pic2.jpg">
<img src="image/pic3.jpg"><br>
<img src="image/pic4.jpg">
<img src="image/pic5.jpg">
<img src="image/pic6.jpg">
</div>
</div>
<div id="middle">
<p><img src="image/head.jpg"></p>
<img id="a" src="image/img1.jpg">
<img id="a" src="image/img2.jpg">
<img id="a" src="image/img3.jpg">
<img id="a" src="image/img4.jpg">
</div>
<p><img src="image/head.jpg"></p>
<img id="a" src="image/img1.jpg">
<img id="a" src="image/img2.jpg">
<img id="a" src="image/img3.jpg">
<img id="a" src="image/img4.jpg">
</div>
<div id="main">
<div id="main_top_left">
<h2>NEWS新闻动态</h2>
<ul>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
</ul>
</div>
<div id="main_top_left">
<h2>NEWS新闻动态</h2>
<ul>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
<li>2104年以来柜子风格的改变</li>
</ul>
</div>
<div id="main_top_middle">
<h2>Active 活动动态</h2>
<img src="image/pp1.jpg">
<h3>7折优惠活动</h3>
<p>2014年3月-5月之间所有商品给老顾客7折优惠</p>
<br><br> <img src="image/pp1.jpg">
<h3>7折优惠活动</h3>
<p>2014年3月-5月之间所有商品给老顾客7折优惠</p>
</div>
<div id="main_top_right">
<h2>联系我们</h2>
<img src="image/tel.png"><br>
dfhjdshfjs <span>世家专业营店</span>
<br>TEL 00000000
<br>MAX 0000000000
<br>ADD **********
</div>
</div>
<h2>Active 活动动态</h2>
<img src="image/pp1.jpg">
<h3>7折优惠活动</h3>
<p>2014年3月-5月之间所有商品给老顾客7折优惠</p>
<br><br> <img src="image/pp1.jpg">
<h3>7折优惠活动</h3>
<p>2014年3月-5月之间所有商品给老顾客7折优惠</p>
</div>
<div id="main_top_right">
<h2>联系我们</h2>
<img src="image/tel.png"><br>
dfhjdshfjs <span>世家专业营店</span>
<br>TEL 00000000
<br>MAX 0000000000
<br>ADD **********
</div>
</div>
<div id="footer">
<p>dagjhjfhdskjfk</p>
<p>dagjhjfhdskjfkslhafahfjdshafj</p>
<p>dagjhjfhdskjfkslhafahfjdshafjdasgjdfjdshdfds</p>
</div>
<p>dagjhjfhdskjfk</p>
<p>dagjhjfhdskjfkslhafahfjdshafj</p>
<p>dagjhjfhdskjfkslhafahfjdshafjdasgjdfjdshdfds</p>
</div>
</body>
</html>
css部分：
*{margin:0px; padding:0px;}
#top{
1110px;
height:360px;}
#top_left{background-image:url(image/left_bg.jpg);
background-repeat:no-repeat;
background-position:0px 0px;
400px;
height:340px;float:left;
}
#top{
1110px;
height:360px;}
#top_left{background-image:url(image/left_bg.jpg);
background-repeat:no-repeat;
background-position:0px 0px;
400px;
height:340px;float:left;
}
#top_left p{position:absolute;
left:40px;
top:50px;}
#top_left h4{float:right;
position:absolute;
left:290px;
top:290px;
color:red;}
left:40px;
top:50px;}
#top_left h4{float:right;
position:absolute;
left:290px;
top:290px;
color:red;}
#top_right{float:left;
700px;
height:340px;
background-image:url(image/right_bg.jpg);
background-repeat:no-repeat;
background-position:right bottom;
}
700px;
height:340px;
background-image:url(image/right_bg.jpg);
background-repeat:no-repeat;
background-position:right bottom;
}
#top_right image{padding:5px 50px 5px 50px;}
#middle{
1110px;
height:190px;
}
#middle p img{1100px;
}
#middle img a{margin-left:50px}
1110px;
height:190px;
}
#middle p img{1100px;
}
#middle img a{margin-left:50px}
#main_top_left{border:1px solid red;
300px;
height:300px;
margin-top:5px;
float:left;}
#main_top_left h2{color:red;
padding-top:10px;
}
#main_top_left ul{margin-top:10px;}
#main_top_left ul li{
border:1px dashesd black;
}
#main_top_middle{float:left;
margin-left:5px;
border:1px solid red;
margin-top:5px;
400px;
height:300px; }
300px;
height:300px;
margin-top:5px;
float:left;}
#main_top_left h2{color:red;
padding-top:10px;
}
#main_top_left ul{margin-top:10px;}
#main_top_left ul li{
border:1px dashesd black;
}
#main_top_middle{float:left;
margin-left:5px;
border:1px solid red;
margin-top:5px;
400px;
height:300px; }
#main_top_middle img{float:left;
}
}
#main_top_right {float:left;
margin-left:5px;
border:1px solid red;
margin-top:5px;
397px;
height:300px; }
margin-left:5px;
border:1px solid red;
margin-top:5px;
397px;
height:300px; }
#main_top_right span{font-size:18px;
font-weight:bold;
font-family:Arial;
}
font-weight:bold;
font-family:Arial;
}
#footer{witdh:1100px;
height:70px;
margin-top:315px;
background:grey;}
#footer p{text-align:center;}
height:70px;
margin-top:315px;
background:grey;}
#footer p{text-align:center;}
