PS:一样的布局样式使用了同一段代码代替
CSS样式
- 设置各个浏览器的基础样式:cssReset.css
html {
background-color: #ffffff;
color: #000000;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
em,
strong,
b,
u,
i {
font-style: normal;
font-weight: normal;
}
ol,
ul {
list-style: none;
}
h1,
h2,
h3 {
font-size: 100%;
font-weight: normal;
}
input,
textarea,
select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
*font-size: 100%;
/*兼容IE*/
}
img {
border: 0 none;
}
input {
border: 0;
}
- 多个元素公用的样式:commen.css
.fl {
float: left;
}
.fr {
float: right;
}
a {
text-decoration: none;
color: black;
}
input {
border: 0;
outline: none;
}
.ctr {
margin: 0 auto;/*设置居中*/
}
s {
text-decoration: none;
}
- 各个元素单独的样式:alone.css
#top_nav {
height: 26px;
background-color: #f7f7f7;
border-bottom: 1px solid #d8d8d8;
}
#top_nav_page {
width: 970px;
height: 100%;
}
.top_nav_page_l,
.top_nav_page_r {
color: #444444;
font-family: "宋体";
font-size: 12px;
line-height: 26px;
}
.top_nav_page_r ul li {
float: left;
margin-right: 10px;
}
.top_nav_page_r ul li s {
display: inline-block;
width: 7px;
height: 4px;
background: url(../image/精灵图.png) no-repeat;
vertical-align: middle;
}
.top_logo {
box-sizing: border-box;
height: 98px;
width: 970px;
padding: 25px 0 19px 9px;
}
.top_logo_l {
height: 55px;
width: 199px;
background-color: green;
background: url(../image/精灵图.png) no-repeat -10px 0;
text-indent: -1000em;
/*将添加的梅兰商贸文字向左藏起来*/
}
.top_logo_r {
border: 1px solid #c9c9c9;
padding: 5px;
margin-top: 5px;
}
.top_logo_r input[type="text"] {
box-sizing: border-box;
width: 420px;
height: 29px;
border: 1px solid #a6a6a6;
border-right: 0;
font-family: "宋体";
font-size: 12px;
padding-left: 4px;
}
.top_logo_r input[type="button"] {
width: 100px;
height: 29px;
background-color: #2f70d0;
color: #ffffff;
}
.nav {
width: 970px;
height: 25px;
border-bottom: 2px solid #306bae;
font-weight: bold;
}
.nav ul li {
float: left;
padding: 0 15px;
line-height: 26px;
}
.nav ul li a {
color: #306bae;
}
.nav ul li:hover {
background-color: #306bae;
}
.nav ul li:hover a {
color: white;
}
.main {
width: 970px;
height: 210px;
margin: 10px auto 14px auto;
}
.main_lf {
width: 200px;
height: 100%;
background-color: #ebf0f6;
margin-right: 11px;
}
.main_lf h2 {
box-sizing: border-box;
height: 30px;
background-color: #0266a3;
color: white;
line-height: 30px;
padding-left: 20px;
font-weight: bold;
}
.main_lf ul {
height: 180px;
}
.main_lf ul li s {
width: 13px;
height: 11px;
background: url(../image/精灵图.png) no-repeat -210px 0;
display: inline-table;
vertical-align: middle;
margin-right: 14px;
}
.main_lf ul li {
margin: 12px 0 0 9px;
height: 15px;
}
.main_lf ul li a {
font-size: 14px;
}
.main_ctr {
height: 210px;
width: 520px;
display: inline-table;
background: url(../image/精灵图.png) no-repeat 0 -56px;
}
.main_rt {
height: 210px;
width: 230px;
}
.main_rt_top {
height: 95px;
border: 1px solid #dddddd;
background-color: #f7faff;
}
.main_rt_top s {
width: 230px;
height: 97px;
display: inline-block;
background: url(../image/精灵图.png) no-repeat 0 -270px;
}
.main_rt_bottom {
margin-top: 21px;
height: 94px;
}
.main_rt_bottom s {
display: inline-block;
width: 230px;
height: 94px;
background: url(../image/精灵图.png) no-repeat -235px -270px;
}
.jianzhu {
width: 970px;
height: 410px;
}
.jianzhu_top {
box-sizing: border-box;
height: 35px;
border-top: 1px solid #c3d7e4;
background-color: #ecf1f7;
font-weight: bold;
padding: 10px 0 10px 20px;
font-size: 14px;
font-family: "宋体";
}
.jianzhu_main {
height: 344px;
margin: 17px auto 10px auto;
}
.jianzhu_main_l {
box-sizing: border-box;
width: 730px;
border: 1px solid #d8d8d8;
height: 344px;
padding: 16px 0 17px 25px;
}
.jianzhu_main_r {
box-sizing: border-box;
height: 344px;
width: 230px;
border: 1px solid #d8d8d8;
}
.grids {
width: 351px;
height: 145px;
}
.line {
border: 1px solid #d8d8d8;
margin: 14px 3px 11px -20px;
width: 718px;
}
.jianzhu_main_r_top {
height: 28px;
margin: 9px auto 8px 15px;
}
.grids_lf {
width: 99px;
height: 100%;
}
.grids_rt {
width: 210px;
height: 130px;
margin: 11px 33px 0 0;
font-size: 12px;
}
.img {
height: 100px;
border: 1px solid #cacaca;
}
.img s {
width: 90px;
height: 63px;
display: inline-block;
background: url(../image/精灵图.png) no-repeat -470px -270px;
margin: 18px 0 0 3px;
}
.grids_lf .buy {
width: 98px;
height: 26px;
background-color: #0a84e3;
color: white;
font-weight: bold;
border: 0;
margin-top: 17px;
}
.grids_rt .p1 {
height: 13px;
}
.grids_rt .p2 {
height: 26px;
margin: 14px auto 23px 4px;
color: #863e01;
}
.grids_rt .p3 {
margin-bottom: 24px;
}
.grids_rt .p3 .span1 {
height: 13px;
width: 85px;
display: inline-block;
color: #c50934;
}
.grids_rt .p3 .span2 {
height: 10px;
width: 56px;
display: inline-block;
text-decoration: line-through;
color: #ca9155;
}
.grids_rt .p4 .span3,
.grids_rt .p4 .span4 {
/*span标签默认的大小是12px只可以改大不能改小*/
color: #e23e34;
}
.jianzhu_main_r_bottom {
border-top: 1px solid #d8d8d8;
}
.jianzhu_main_r_bottom ul {
margin: 4px auto auto 28px;
}
.jianzhu_main_r_bottom ul li {
list-style: square;
margin-bottom: 12px;
height: 12px;
}
.jianzhu_main_r_bottom ul li a {
font-size: 10px;
color: #444444;
}
.zuoyi_main_l {
box-sizing: border-box;
width: 730px;
height: 344px;
}
.zuoyi_main_l .zuoyi_top {
height: 22px;
background-color: white;
width: 100%;
background: url(../image/精灵图.png) no-repeat -230px 0;
}
.zuoyi_main_l .zuoyi_top s {
display: inline-block;
}
.zuoyi_main_l .zuoyi_top a {
color: #1a66b3;
font-weight: bold;
}
.zuoyi_bottom {
display: flex;
height: 300px;
width: 729px;
box-sizing: border-box;
border: 1px solid #cacaca;
border-top: 2px solid #00b0e7;
padding: 5px auto 12px auto;
padding: 5px 5px 13px 5px;
justify-content: space-around;
}
.yizi {
width: 165px;
height: 283px;
}
.yizi s {
display: inline-block;
width: 164px;
height: 170px;
background: url(../image/精灵图.png) no-repeat -525px -55px;
}
.yizi_bottom {
width: 146px;
height: 105px;
margin-left: 10px;
font-size: xx-small;
text-align: center;
line-height: 22px;
}
.yizi_bottom .p1,
.yizi_bottom .p2,
.yizi_bottom .p3 {
color: #999999;
}
.yizi_bottom .p3 b {
color: #a10000;
}
.zuoyi_main_r {
box-sizing: border-box;
height: 323px;
width: 230px;
}
.zuoyi_main_r_top {
box-sizing: border-box;
height: 128px;
border: 1px solid #d8d8d8;
background: url(../image/精灵图.png) no-repeat -695px -55px;
}
.zuoyi_main_r_bottom {
height: 175px;
margin-top: 10px;
background: url(../image/精灵图.png) no-repeat -695px -190px;
}
.lianjie {
height: 100px;
width: 970px;
border-top: 1px solid #dddddd;
font-size: small;
box-sizing: border-box;
color: #666666;
}
.lianjie_p1 {
margin-top: 10px;
}
.lianjie_p2 {
margin: 14px auto auto 65px;
}
footer {
box-sizing: border-box;
height: 92px;
width: 970px;
border-top: 3px solid #0a7ec3;
text-align: center;
font-size: medium;
}
footer p {
line-height: 25px;
}
HTML布局代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/cssReset.css">
<link rel="stylesheet" href="css/alone.css">
<link rel="stylesheet" href="css/commen.css">
</head>
<body>
<!-- S= 顶部导航栏 -->
<div id="top_nav">
<div id="top_nav_page" class="ctr">
<div class="top_nav_page_l fl">您好,欢迎来到建材网!</div>
<div class="top_nav_page_r fr">
<ul>
<li><a href="#">建材网首页</a></li>
<li><a href="#">我的商务室</a><s></s></li>
<li><a href="#">我的收藏</a><s></s></li>
<li><a href="#">建材服务</a><s></s></li>
<li><a href="#">客服中心</a></li>
<li><a href="#">网站导航</a><s></s></li>
</ul>
</div>
</div>
</div>
<!-- E= 顶部导航栏 -->
<!-- S= logo -->
<div class="top_logo ctr">
<h1 class="top_logo_l fl">梅兰商贸</h1>
<!--添加文字来增加浏览器友好性-->
<div class="top_logo_r fr">
<input type="text" class="fl" id="" placeholder="请输入关键字">
<input type="button" value="搜索" class="fl">
</div>
</div>
<!-- E= logo -->
<!-- S= nav -->
<nav class="nav ctr">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">建筑材料</a></li>
<li><a href="#">儿童安全座椅</a></li>
<li><a href="#">工艺美术品</a></li>
</ul>
</nav>
<!-- E= nav -->
<!-- S= main -->
<section class="main">
<div class="main_lf fl">
<h2>商机市场</h2>
<ul>
<li><s></s><a href="#">建筑材料</a></li>
<li><s></s><a href="#">儿童安全座椅</a></li>
<li><s></s><a href="#">工艺美术品</a></li>
<li><s></s><a href="#">建筑材料</a></li>
<li><s></s><a href="#">儿童安全座椅</a></li>
<li><s></s><a href="#">工艺美术品</a></li>
</ul>
</div>
<div class="main_ctr fl"></div>
<div class="main_rt fr">
<div class="main_rt_top">
<s></s>
</div>
<div class="main_rt_bottom">
<s></s>
</div>
</div>
</section>
<!-- E= main -->
<!-- S= 建筑材料 -->
<section class="jianzhu ctr">
<div class="jianzhu_top">建筑材料</div>
<div class="jianzhu_main">
<div class="jianzhu_main_l fl">
<div class="grids fl">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
<div class="grids fr">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
<div class="line fl"></div>
<div class="grids fl">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
<div class="grids fr">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
</div>
<div class="jianzhu_main_r fr">
<div class="jianzhu_main_r_top">建材资讯</div>
<div class="jianzhu_main_r_bottom">
<ul>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- E= 建筑材料 -->
<!-- S= 儿童安全座椅 -->
<section class="jianzhu ctr">
<div class="jianzhu_top">儿童安全座椅</div>
<div class="jianzhu_main">
<div class="zuoyi_main_l fl">
<div class="zuoyi_top">
<s class="fl"></s>
<p class="fr"><a href="#">详情请点击>></a></p>
</div>
<div class="zuoyi_bottom">
<div class="yizi fl">
<s></s>
<div class="yizi_bottom">
<p>英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p>
<p class="p1">适合年龄:9个月-4岁</p>
<p class="p2">市场价:<del>¥5580元</del> </p>
<p class="p3">直销价:<b>¥3380元</b></p>
</div>
</div>
<div class="yizi fl">
<s></s>
<div class="yizi_bottom">
<p>英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p>
<p class="p1">适合年龄:9个月-4岁</p>
<p class="p2">市场价:<del>¥5580元</del> </p>
<p class="p3">直销价:<b>¥3380元</b></p>
</div>
</div>
<div class="yizi fl">
<s></s>
<div class="yizi_bottom">
<p>英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p>
<p class="p1">适合年龄:9个月-4岁</p>
<p class="p2">市场价:<del>¥5580元</del> </p>
<p class="p3">直销价:<b>¥3380元</b></p>
</div>
</div>
<div class="yizi fl">
<s></s>
<div class="yizi_bottom">
<p>英国百代适-至尊者(带ISOFIX接口)奔驰宝马专用</p>
<p class="p1">适合年龄:9个月-4岁</p>
<p class="p2">市场价:<del>¥5580元</del> </p>
<p class="p3">直销价:<b>¥3380元</b></p>
</div>
</div>
</div>
</div>
<div class="zuoyi_main_r fr">
<div class="zuoyi_main_r_top"></div>
<div class="zuoyi_main_r_bottom"></div>
</div>
</div>
</section>
<!-- E= 儿童安全座椅 -->
<!-- S= 建筑材料 -->
<section class="jianzhu ctr">
<div class="jianzhu_top">建筑材料</div>
<div class="jianzhu_main">
<div class="jianzhu_main_l fl">
<div class="grids fl">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
<div class="grids fr">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
<div class="line fl"></div>
<div class="grids fl">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
<div class="grids fr">
<div class="grids_lf fl">
<div class="img"><s></s></div>
<button class="buy">立即购买</button>
</div>
<div class="grids_rt fr">
<p class="p1">好太太晾衣架 铝钛合金 升降双杆</p>
<p class="p2">自动换挡 安全耐用<br />稳定性好 抗氧化强</p>
<p class="p3">
<span class="span1">239.00</span>
<del class="span2">¥386.00</del>
</p>
<p class="p4">
限量<span class="span3">99</span>件
已售出<span class="span4">20</span>件
</p>
</div>
</div>
</div>
<div class="jianzhu_main_r fr">
<div class="jianzhu_main_r_top">建材资讯</div>
<div class="jianzhu_main_r_bottom">
<ul>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
<li><a href="#">贵阳钢材市场7月17日价格行情</a></li>
</ul>
</div>
</div>
</div>
</section>
<!-- E= 建筑材料 -->
<!-- S= 友情链接 -->
<section class="lianjie ctr">
<p class="lianjie_p1">
友情链接:中视网盟 9355开心创业网 连锁店加盟 就爱加盟网 百度 谷歌 雅虎 新浪 搜狐 网易 凤凰网 央视网 新华网 科易网 安家网 健康商城 生意街 连锁加盟网 渠道街
</p>
<p class="lianjie_p2">
中视网盟 9355开心创业网 连锁店加盟 就爱加盟网 百度 谷歌 雅虎 新浪 搜狐 网易 凤凰网 </p>
</section>
<!-- E= 友情链接 -->
<!-- S= 关于我们 -->
<footer class="ctr">
<p>关于我们 | 建材通服务 | 网站建设 | 诚聘英才 | 友情链接 | 联系方式 | 隐私声明 | 版权声明 | 帮助中心 | 网站地图
<br /> | 中国建材网 版权所有 2000-2012 服务热线:0571-89938887
请与我们联系:Service@BMlink.com| 建材网会员互动群:153120106</p>
<p>本站网络实名:中建网本站通用网址:| 中国建材网 | 浙B2-20060159</p>
</footer>
<!-- E= 关于我们 -->
</body>
</html>
精灵图: