梅兰商城案例代码编写（自己练习，纯手写，最后附有结果图以及精灵图）

下雨打伞干嘛

于 2020-11-30 20:41:26 发布

阅读量578

点赞数 2

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_45488467/article/details/110404537

版权

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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">好太太晾衣架&nbsp;铝钛合金&nbsp;升降双杆</p>
                        <p class="p2">自动换挡&nbsp;安全耐用<br />稳定性好&nbsp;抗氧化强</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>件&nbsp;
                            已售出<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">
            友情链接：中视网盟&nbsp;9355开心创业网&nbsp;连锁店加盟&nbsp;就爱加盟网&nbsp;百度&nbsp;谷歌&nbsp;雅虎&nbsp;新浪&nbsp;搜狐&nbsp;网易&nbsp;凤凰网&nbsp;央视网&nbsp;新华网&nbsp;科易网&nbsp;安家网&nbsp;健康商城&nbsp;生意街&nbsp;连锁加盟网&nbsp;渠道街&nbsp;
        </p>
        <p class="lianjie_p2">
            中视网盟&nbsp;9355开心创业网&nbsp;连锁店加盟&nbsp;就爱加盟网&nbsp;百度&nbsp;谷歌&nbsp;雅虎&nbsp;新浪&nbsp;搜狐&nbsp;网易&nbsp;凤凰网&nbsp;</p>
    </section>
    <!-- E= 友情链接 -->

    <!-- S= 关于我们 -->
    <footer class="ctr">
        <p>关于我们&nbsp;|&nbsp;建材通服务&nbsp;|&nbsp;网站建设&nbsp;|&nbsp;诚聘英才&nbsp;|&nbsp;友情链接&nbsp;|&nbsp;联系方式&nbsp;|&nbsp;隐私声明&nbsp;|&nbsp;版权声明&nbsp;|&nbsp;帮助中心&nbsp;|&nbsp;网站地图
            <br /> &nbsp;|&nbsp;中国建材网&nbsp;版权所有 2000-2012 服务热线：0571-89938887
            请与我们联系：Service@BMlink.com|&nbsp;建材网会员互动群：153120106</p>
        <p>本站网络实名：中建网本站通用网址：|&nbsp;中国建材网&nbsp;|&nbsp;浙B2-20060159</p>
    </footer>
    <!-- E= 关于我们 -->
</body>
</html>

在这里插入图片描述

在这里插入图片描述

精灵图：

下雨打伞干嘛

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
梅兰商城案例代码编写（自己练习，纯手写，最后附有结果图以及精灵图）

PS:一样的布局样式使用了同一段代码代替CSS样式设置各个浏览器的基础样式：cssReset.csshtml { 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;}ta
复制链接

扫一扫