css 简单商城布局
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>店铺首页</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="body">
<!-- head区域 -->
<div class="head">
<div class="top clear">
<div><span>欢迎你回来</span><a href="#">退出</a></div>
<ul class="clear">
<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>
<!-- head区域结束 -->
<div class="nav">
<ul class="clear">
<li style="background-color: #ff4c00"><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>
<!-- main区域开始 -->
<div class="main clear">
<div class="main_left">
<div class="company1">
<h1>永康服装有限公司</h1>
<ul>
<li>交易等级：10级</li>
<li>经营模式：生产加工</li>
<li>企业地址：广东深圳</li>
<li>企业联系人：1232</li>
<li><a href="#">收藏此店铺</a></li>
</ul>
</div>
<div class="classify">
<h1> 产品分类</h1>
<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>
</ul>
</div>
</div>
<div class="main_right">
<div class="company2 clear">
<h1 class="clear"> 企业介绍<a href="#">更多内容</a></h1>
<div class="company_img"><img src="img/cai1.jpg"></div>
<div class="content_01">发；的咖啡机；啊大家发；啊扩大解放；啊快点放假啊东风科技；啊扩大解放； 撒地方就；啊大家发；啊几点发的积分；啊肯定就罚款的积分；啊大家发；啊几点发；啊空间的发的饭卡机东方；卡；打飞机啊；的饭卡的；放假啊的；附件....</div>
</div>
<div class="pro_01">
<h1>热销产品<a href="#">更多内容</a></h1>
<ul class="clear">
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
<li>
<a href="#"><img src="img/cai1.jpg"></a>
<a href="#">啊哈</a>
</li>
</ul>
</div>
</div>
</div>
<!-- main区域结束 -->
<div class="foot">
<div>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
</div>
<div>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
</div>
<div>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
<a href="">阿里</a>
</div>
</div>
</div>
</body>
</html>
。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
*{margin: 0;padding: 0;} /**清除内外边距。公共样式 -*/
.body{border: 1px solid red;font-size: 15px;color: #333;width: 960px;margin: 0 auto;} /**width: 960px; （设置内容宽度）margin: 0 auto（居中） -*/
.clear{display: block;overflow: hidden; }/* 清楚浮动*/
a:link{color: blue;}/* 在点击超链接前所表现的样式*/
a:hover{color: red;text-decoration: none;}/* 鼠标悬停在超链接上面的样式*/
a:active{ color: blue;font-weight:border }/* 鼠标点击表示的样式*/
a{text-decoration: none;}/* 去掉a标签的下划线*/
ul{list-style: none;}/* 去掉ul标签前面的小圆点*/
.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: "黑体"}
.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;padding: 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;}
