<!doctype html>
<meta charset= "UTF-8" >
<meta name= "Generator" content= "EditPlus?" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<title> Shop Home </title>
<link rel= "stylesheet" type= "Text/css" href= "Style.css" >
<body>
<div class= "Body" >
<!--head Area--
<div class= "Head" >
<div class= "Top Clear" >
<div><span> Welcome Back </span><a href= "#" > Exit </a></div>
<ul class= "Clear" >
<li><a href= "#" > website Home </a></li>
<li><a href= "#" > Site navigation </a></li>
<li><a href= "#" > My Services </a></li>
<li><a href= "#" > member Center </a></li>
<li><a href= "#" > Suggestion Box </a></li>
</ul>
</div>
</div>
<!--head area ends--
<div class= "NAV" >
<ul class= "Clear" >
<li style= "Background-color: #ff4c00" ><a href= "#" > Enterprise Home </a></li>
<li><a href= "#" > Product Categories </a></li>
<li><a href= "#" > Product supply </a></li>
<li><a href= "#" > Products buy </a></li>
<li><a href= "#" > Hot Products </a></li>
<li><a href= "#" > Company Introduction </a></li>
<li><a href= "#" > Contact </a></li>
</ul>
</div>
<!--main area start-up
<div class= "main clear" >
<div class= "Main_left" >
<div class= "Company1" >
<ul>
<li> Trading Level: Level 10 </li>
<li> business model: production and processing </li>
<li> Company Address: Shenzhen, Guangdong </li>
<li> Corporate Contact:1232</li>
<li><a href= "#" > Bookmark this store </a></li>
</ul>
</div>
<div class= "Classify" >
<ul>
<li><a href= "#" > Autumn/Winter New </a></li>
<li><a href= "#" > Hot sale </a></li>
<li><a href= "#" > Tops </a></li>
<li><a href= "#" > Pants </a></li>
<li><a href= "#" > Skirt </a></li>
<li><a href= "#" > Coats </a></li>
<li><a href= "#" > Underwear </a></li>
<li><a href= "#" > Shoes </a></li>
</ul>
</div>
</div>
<div class= "Main_right" >
<div class= "Company2 Clear" >
<H1 class= "Clear" > Company introduction <a href= "#" > More content </a><div class= "company_img" ></div>
<div class= "content_01" > The coffee machine; Ah, let's go. Expand liberation; Ah, come on, let's get a holiday. Dongfeng Technology; expand liberation; sprinkle places on; ah everybody hair; Ah, I'm sure it's a fine point. The space of the hair of the rice card machine East, card, fly, the rice card, holiday ah; accessories ....</div>
</div>
<div class= "Pro_01" >
<ul class= "Clear" >
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
<li>
<a href= "#" ></a>
<a href= "#" > Aha </a>
</li>
</ul>
</div>
</div>
</div>
<!--main area end--
<div class= "Foot" >
<div>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
</div>
<div>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
</div>
<div>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
<a href= "" > Ali </a>
</div>
</div>
</div>
</body>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
*{margin:0;padding:0;} /** clear the inner margin. Public style-*/
. body{border:1px solid Red;font-size:15px;color: #333; width:960px;margin:0 auto;}/**width:960px; (Set content width) margin:0 Auto (center)-*/
. Clear{display:block;overflow:hidden;} /* Clear FLOAT */
A:link{color:blue;} /* The style shown before clicking on the hyperlink */
A:hover{color:red;text-decoration:none;} /* Hover over hyperlink style */
a:active{Color:blue;font-weight:border}/* The style that the mouse clicks */
A{text-decoration:none;} /* Remove the underline from the A label */
Ul{list-style:none;} /* Remove the small dot in front of the UL label */
. head{border:1px solid Blue;}
. top{border:1px solid green;line-height:34px;}
. Top Div{float:left;}
. Top Ul{float:right;}
. Top ul li{float:left; margin-left:8px;}
. Nav ul li{float:left; padding:0 35px 0 35px;font-size:16px;font-family: "Blackbody"}
. nav{background-color:red;line-height:40px;}
. Nav a:link{color: #fff}
. Nav a:visited{color: #fff}
. Nav a:hover{color: #fff}
. Nav a:active{color: #fff}
. main{margin:10px Auto;}
. Main. main_left{width:200px; float:left;margin-right:5px;}
. Main. main_right{width:748px; float:left; margin-left:5px;}
. company1{border:1px solid #999;p adding:10px;}
. Company1 H1{text-align:center;}
. Company1 ul{margin-top:50px;}
. company1 ul li{margin-top:10px;}
. company1 ul li a{display:block;width:130px;line-height:30px; color: #fff; background-color:red; text-align:center;}
. classify{border:1px solid #999; margin-top:10px;}
. Classify h1{font-size:14px;color: #fff; background-color:red;line-height:30px;}
. classify ul Li a{display:block;font-weight:bold;text-indent:2em;line-height:30px;}
. Classify ul Li A:link{color: #000}
. Classify ul Li A:visited{color: #000}
. Classify ul Li A:hover{color: #000; Background-color: #999;}
. Classify ul Li A:active{color: #000}
. company2{border:1px solid #999;}
. Company2 H1{font-size:14px;color: #fff; background-color:red;line-height:30px;text-indent:1em;}
. company2 H1 A{display:block;float:right;margin-right:5px;font-size:12px;color: #fff;}
. Company2 div{float:left;margin:10px;}
. Company2. content_01{font-size:12px;line-height:25px;width:400px;}
. pro_01{border:1px solid#999;}
. pro_01 H1{font-size:14px;color: #fff; background-color:red;line-height:30px;text-indent:1em;}
. pro_01 H1 A{display:block;float:right;margin-right:5px;font-size:12px;color: #fff;}
. pro_01 ul li{float:left;margin:10px 5px 10px 5px;border:1px solid red;}
. pro_01 ul Li A{display:block;margin:5px;text-align:center;}
. foot{border-top:2px solid red;margin-top:20px;}
. foot div{margin:15px;line-height:20px;}
CSS Simple Mall layout