梅兰商城案例代码编写（自己练习，纯手写，最后附有结果图以及精灵图）
2024-04-09 18:50:21
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>
精灵图：
梅兰商城案例代码编写（自己练习，纯手写，最后附有结果图以及精灵图）相关推荐
- 前端静态页面练习——梅兰商城
网站实战二--梅兰商城 1.0 首先分析PSD文件布局 顶部 欢迎信息(左)+导航信息(右) logo区 logo(左)+搜索框(右) 网站导航 次级导航(左)+产品信息(中)[视频里没做]+辅助信 ...
- HTML5期末大作业：商城网站设计——仿唯品会购物商城(5页) 纯手写-高质量 HTML+CSS+JavaScript
HTML5期末大作业:商城购物网站设计--仿唯品会商城(5页) 纯手写 HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网页设计 ...
- IOS纯手写代码支持旋屏
2019独角兽企业重金招聘Python工程师标准>>> 不用ib纯手写代码实现旋屏效果,xcode4.6.3,今天试了一下,可以做到,但是代码量会增加,基本思路是:在 - (void ...
- 【JS 纯手写轮播图代码】
轮播图实现 首先需要在同级目录下创建img文件夹,用以储存你需要轮播的图片,注意设置好图片的宽度,以免出现空白区域.然后就可以愉快地实现轮播功能啦~ // An highlighted block & ...
- Hadoop 3.x|第九天|序列化及案例代码编写
目录 Hadoop序列化 定义 为什么需要序列化 为什么不用Java的序列化 源码 序列化案例实操-流量统计 需求 输入数据 输出数据 分析各个阶段的KV 自定义对象实现序列化接口的步骤 创建Flow ...
- 深度学习案例之基于 CNN 的 MNIST 手写数字识别
一.模型结构 本文只涉及利用Tensorflow实现CNN的手写数字识别,CNN的内容请参考:卷积神经网络(CNN) MNIST数据集的格式与数据预处理代码input_data.py的讲解请参考 :T ...
- python手写数字识别实验报告_Python代码实现简单的MNIST手写数字识别（适合初学者看）...
补充:由于很多同学找我要原数据集和代码,所以我上传到了资源里,https://download..net/download/zugexiaodui/10913834 初学机器学习,第一步是做一个简单的 ...
- 【深度学习】学习案例：Keras 多层感知器手写数字识别
实验:Keras 多层感知器 手写数字识别 1. 下载 MNIST数据集(前提) 2. 进行数据预处理 3. 建立模型 4. 进行训练 5. 以测试数据评估模型 6. 进行预测 拓展: 1. 显示混淆 ...
- 表白女神专用代码（漂浮的心+手写文字效果）
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>练习& ...
- 简单python代码实现三层神经网络识别手写数字
准备 这个过程非常简单,就是用到了很多的矩阵运算. 训练数据集下载地址, 测试数据集下载地址, 数据格式 .csv格式数据的每一行都是一个28*28像素的手写数字图片,每一行的第一个像素是数字的值,从 ...
最新文章
- 「天才少年」稚晖君调戏机械臂！加上AI视觉，2小时学会抓螺母【文末送5本书】...
- SAP-采购订单交货成本抓取方法
- spark 如何用netty实现akka的actor模型
- 网站漏洞修复方案防止SQL注入攻击漏洞
- 【软考】2021软件设计师复习开坑指南
- leetcode c程序总提示主函数_Python练手：一行Python解Leetcode习题
- 18个黑科技网站，你想要的软件都能找到，请收藏！！！
- 菜鸟教程python100-Python 基础教程 | 菜鸟教程
- matlab errorbar 例子,科学网—【MATLAB】如何画水平errorbar - 叶瑞杰的博文
- Kubernetes和Jenkins——基于Kubernetes构建Jenkins持续集成平台
- 傻瓜式教学——手把手教你电脑三种方式连接打印机
- 【网单服务端】神鬼世界一键安装服务端双镜像优化版网游单机
- 多媒体计算机设计原则,多媒体课件的设计原则
- 数据处理-500行Python代码处理ave/chunk命令下1d和2d分块数据
- 如何解决element ui 表单resetFields 的indexOf报错
- [读论文]-Mask-Predict: Parallel Decoding of Conditional Masked Language Models阅读报告-机器翻译
- sql中插入带有单引号的数据
- 周迅：想想十年后的自己
- 解决海康相机连接无法显示图像问题
- Kotlin学习笔记（三）：Kotlin中的函数