admin 管理员组

文章数量: 1087652

简易模拟购物商场页面（不含响应式）

简易模拟购物商场页面（不含响应式）

今天来看看一个简易的购物页面，以下代码没有引用框架，首先针对一个页面先进行分析，它应该分为几个部分，每一个部分该怎么写。话不多说，直接上代码。

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><style>/**所有标签应用的样式*/* {margin: 0;padding: 0;}html, body {width: 100%;height: 100%;}/*div{*//*    border: 1px solid red;*//*}*/a {text-decoration: none;color: black;}a:hover {color: #FF464E;}li {list-style: none;}/**头部样式设计*//**头部导航样式*/.top {height: 25%;width: 100%;border-bottom: 2px solid #FF464E;}/**设置头部最上面的大小*/.topmain {height: 18%;width: 100%;background: #F6F6F6;}.topmain1 {height: 100%;width: 45%;float: right;}.topmain1 a {display: inline-block;height: 28px;line-height: 28px;margin-left: 10px;font-size: 14px;}.regist {color: #FF464E;}.topmain1 a span {display: inline-block;}.shopping_sum {margin: 0;}.icon_shop {height: 18px;width: 18px;background: url(icon-total.png) no-repeat 0px -156px;vertical-align: middle}.ordered {height: 100%;width: 85px;padding-left: 15px;}.ordered:hover {background: white;}/**头部主要部分设计*/.top_middle {clear: both;width: 100%;height: 33%;padding-top: 15px;}.top_middle a {height: 100%;width: 50px;display: inline-block;}.top_middle .search {height: 100%;width: 250px;float: right;margin-top: 5px;}.top_middle a:first-child {width: 201px;height: 100%;background: url(header-total.gif) no-repeat -78px -49px;margin-left: 75px;}.top_middle .update {width: 431px;height: 100%;background: url(header-total.gif) no-repeat -40px 13px;margin-left: 220px;}.top_middle .search input {display: inline-block;}.top_middle .search input:first-child {height: 34px;width: 175px;font-size: 12px;float: left;}/**用选择器选出最后一个input框*/.top_middle .search input:last-child {height: 37px;width: 41px;background: url(header-total.gif) no-repeat -463px -65px;}/**头部的底部设计*/.top_di {width: 100%;height: 35px;line-height: 35px;margin-top: 27px;}.top_di a {display: inline-block;width: 68px;height: 35px;padding-left: 33px;}.top_di a:first-child {margin-left: 90px;background: #FF464E;border-radius: 6px 6px 0 0;color: white;}.top_di a:first-child:hover {color: white;}.top_di a:last-child {width: 101px;}.top_di a:last-child span {float: left;background: url(phone-new-20151119.png) no-repeat 0px 0px;height: 17px;width: 12px;margin-top: 10px;}/**主体部分设计*/.mianbody {width: 100%;background: #F6F6F6;}.middle {height: 62%;width: 100%;background: #F6F6F6;}.middle .nav_l {float: left;width: 25%;height: 100%;margin-top: 11px;}.middle .nav_l dl {padding-left: 80px;}.middle .nav_l dl dd {float: left;width: 50%;height: 54px;overflow: hidden;line-height: 53px;text-align: center;}.middle .nav_l dl dd a {display: block;height: 50px;line-height: 50px;text-align: center;background: #fff;font-size: 14px;position: relative}.middle .nav_l dl dd a .icon {position: absolute;width: 25px;height: 25px;top: 12px;left: 27px;}.middle .nav_l dl dd a .icon_nvzhuang {background: url(ct_icons.png) no-repeat 0px 0px;}.middle .nav_l dl dd a .icon_nanzhuang {background: url(ct_icons.png) no-repeat -22px 0px;}.middle .nav_l dl dd a .icon_xiezi {background: url(ct_icons.png) no-repeat -47px 0px;}.middle .nav_l dl dd a .icon_xiangbao {background: url(ct_icons.png) no-repeat -71px 0px;}.middle .nav_l dl dd a .icon_muying {background: url(ct_icons.png) no-repeat -95px 0px;}.middle .nav_l dl dd a .icon_meizhuang {background: url(ct_icons.png) no-repeat -120px 0px;}.middle .nav_l dl dd a .icon_jujia {background: url(ct_icons.png) no-repeat -142px 0px;}.middle .nav_l dl dd a .icon_jiafang {background: url(ct_icons.png) no-repeat -169px 0px;}.middle .nav_l dl dd a .icon_wenti {background: url(ct_icons.png) no-repeat -190px 0px;}.middle .nav_l dl dd a .icon_meishi {background: url(ct_icons.png) no-repeat -215px 0px;}.middle .nav_l dl dd a .icon_shuma {background: url(ct_icons.png) no-repeat -240px 0px;}.middle .nav_l dl dd a .icon_dianqi {background: url(ct_icons.png) no-repeat -265px 0px;}.middle .nav_l dl dd a .icon_neiyi {background: url(ct_icons.png) no-repeat -288px 0px;}.middle .nav_l dl dd a .icon_peishi {background: url(ct_icons.png) no-repeat -312px 0px;}.middle .nav_middle {float: left;width: 50%;height: 100%;}.nav_middle img {margin-top: 25px;margin-left: 8px;}.middle .nav_r {float: left;width: 20%;height: 100%;margin-top: 11px;margin-left: 45px;}.middle .nav_r dl dd {float: left;display: inline;width: 124.5px;height: 119px;overflow: hidden;text-align: center;background-color: #fff;margin: 0 2px 8px 0;}.middle .nav_r dl dd:last-child {width: 250px;height: 120px;}
/**
今日品牌样式设计*/.today_pin {clear: both;width: 91%;margin-left: 75px;height: 20%;background: white;}.pin_top {clear: both;height: 50px;width: 100%;}.pin_top span {float: left;font-size: 18px;margin-left: 20px;margin-top: 10px;}.pin_top p {float: left;font-size: 16px;color: #bbb;margin-left: 10px;margin-top: 12px;}.pin_top a {float: right;margin-right: 10px;margin-top: 10px;}.pin_middle div {margin-left: 27px;float: left;}.pin_foot {clear: both;padding-top: 15px;}.pin_foot a img {width: 90px;height: 40px;vertical-align: middle;margin-left: 15px;}.pin_foot span {margin-left: 25px;font-size: 14px;font-weight: lighter;}.pin_foot a:last-child {margin-left: 121px;}/**
今日商品样式设计*/.mianshopping {clear: both;width: 91%;margin-left: 75px;height: 20%;background: white;}.shopping_top {clear: both;height: 50px;width: 100%;margin-top: 25px;}.shopping_top span {float: left;font-size: 18px;margin-left: 20px;margin-top: 10px;}.shopping_top p {float: left;font-size: 16px;color: #bbb;margin-left: 10px;margin-top: 12px;}.shopping_top p:last-child {color: black;float: right;margin-right: 10px;}.shoppping_list {}.shoppping_list ul li {display: inline-block;margin-left: 25px;margin-top: 5px;border: 1px solid white;}.shoppping_list ul li img, .shoppping_list ul li span {display: block;}.shoppping_list ul li img {padding-top: 1px;padding-left: 1px;width: 210px;height: 200px;}.shoppping_list ul li a {color: black;}.shoppping_list ul li a del {color: #bbbbbb;}.shoppping_list ul li span:hover {color: black;}.shoppping_list ul li p:hover {color: black;}.shoppping_list ul li span {padding-left: 4px;}.shoppping_list ul li p {padding-left: 4px;display: inline-block;}.shoppping_list ul li:hover {border: 1px solid #bbbbbb;}
/**
底部页码设计*/.shopping_yema{width: 100%;height: 65px;text-align: center;padding-top: 20px;}.shopping_yema span,.shopping_yema a,.shopping_yema i{display: inline-block;width: 55px;height: 30px;color: #bbb;font-weight: normal;background: #fff;/* text-align: center; */padding-top: 5px;}.shopping_yema .yema1{background: #FF464E;}.shopping_yema .yema_pre{border-radius: 20px 0 0 20px;width: 70px;cursor: pointer;box-shadow: 1px 1px 3px rgba(204, 204, 204, 0.7);}.shopping_yema a,.shopping_yema i{box-shadow: 1px 1px 3px rgba(204, 204, 204, 0.7);}.shopping_yema a:last-child{border-radius: 0px 13px 13px 0px;cursor: pointer;width: 70px;}.shopping_yema a:hover,.shopping_yema i:hover,.shopping_yema .yema_pre:hover{background: #FF464E;}
/**
最底部设计*/.foot_di {margin-top: 60px;display: inline-block;width: 100%;border-top: 2px solid salmon;}.foot_di img {float: left;margin-left: 100px;margin-top: 50px;}.foot_di ul {margin-top: 40px;float: left;margin-left: 145px;}.foot_di ul li {font-size: 14px;color: #666666;}.foot_di ul li i {width: 4px;height: 4px;overflow: hidden;border-radius: 50%;background: #c6c6c6;display: inline-block;margin-right: 5px;float: left;margin-top: 8px;}.foot_di ul li:first-child {color: black;padding-left: 10px;font-size: 15px;font-weight: 600;}.foot_di ul:first-child {}.foot_di p {clear: both;margin-left: 127px;padding-top: 25px;color: #666666;}</style><body><div class="top"><div class="topmain"><div class="topmain1"><a href="#" class="login">登录</a><a href="#" class="regist">免费注册</a><a href="#" class="order">我的订单</a><a href="#" class="shopper">商家入驻</a><a href="#" class="ordered"><span class="icon_shop"></span><span class="shopping_sum">购物袋</span><em class="shop_num"></em></a><a href="#" class="shopper_all">商家中心</a><a href="" class="shopper_deal">客户服务</a></div></div><div class="top_middle"><a href="#"></a><a title="每天10点开抢" class="update" href="#"></a><div class="search"><input type="text" placeholder="请输入想找的宝贝" name="宝贝"><input type="submit" value name="搜索"></div></div><div class="top_di"><a href="#">首页</a><a href="#">品牌折扣</a><a href="#">9.9包邮</a><a href="#">即将上线</a><a href="#"><span></span>手机版</a></div></div><div class="mianbody"><div class="middle"><div class="nav_l"><dl><dd><a href="#"><i class="icon icon_nvzhuang"></i>女装</a></dd><dd><a href="#"><i class="icon icon_nanzhuang"></i>男装</a></dd><dd><a href="#"><i class="icon icon_xiezi"></i>鞋子</a></dd><dd><a href="#"><i class="icon icon_xiangbao"></i>箱包</a></dd><dd><a href="#"><i class="icon icon_muying"></i>母婴</a></dd><dd><a href="#"><i class="icon icon_meizhuang"></i>美妆</a></dd><dd><a href="#"><i class="icon icon_jujia"></i>居家</a></dd><dd><a href="#"><i class="icon icon_jiafang"></i>家纺</a></dd><dd><a href="#"><i class="icon icon_wenti"></i>文体</a></dd><dd><a href="#"><i class="icon icon_meishi"></i>美食</a></dd><dd><a href="#"><i class="icon icon_shuma"></i>数码</a></dd><dd><a href="#"><i class="icon icon_dianqi"></i>电器</a></dd><dd><a href="#"><i class="icon icon_neiyi"></i>内衣</a></dd><dd><a href="#"><i class="icon icon_peishi"></i>配饰</a></dd></dl></div><div class="nav_middle"><img src="5fdc65caabf98675e53577cb_700x360.jpg" alt=""></div><div class="nav_r"><dl><dd><a href="#"><img src="r-1.jpg" alt=""></a></dd><dd><a href="#"><img src="r-2.jpg" alt=""></a></dd><dd><a href="#"><img src="r-3.jpg" alt=""></a></dd><dd><a href="#"><img src="r-4.jpg" alt=""></a></dd><dd><a href="#"><img src="r-5.jpg" alt=""></a></dd></dl></div></div><div class="today_pin"><div class="pin_top"><span>今日品牌</span><p>TODAY'S BRAND</p><a href="#">更多品牌>></a></div><div class="pin_middle"><div class="pin_1"><img src="pin.png" alt=""></div><div class="pin_2"><img src="pin.png" alt=""></div><div class="pin_3"><img src="pin.png" alt=""></div><div class="pin_4"><img src="pin.png" alt=""></div></div><div class="pin_foot"><span>更多品牌特卖：</span><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#"><img src="5722ff8592be5927968b457b_180x90.png" alt=""></a><a href="#">查看更多>></a></div></div><div class="mianshopping"><div class="shopping_top"><span>今日新品</span><p>TODAY'S NEW</p><p>每天十点上新</p></div><div class="shoppping_list"><ul><li class="list1_1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_2"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_3"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_4"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li></ul><ul><li class="list1_1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_2"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_3"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_4"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li></ul><ul><li class="list1_1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_2"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_3"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_4"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li></ul><ul><li class="list1_1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_2"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_3"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_4"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li></ul><ul><li class="list1_1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_2"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_3"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1_4"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li><li class="list1"><a href="#"><img src="5eb1249e33b0895d257b0dd3_800x800.jpg" alt=""><span>￥49<del>￥299</del></span><p>2020春装新款</p><p>剩8天</p></a></li></ul></div><div class="shopping_yema"><span class="yema_pre">上一页</span><span class="yema1">1</span><a href="#">2</a><a href="#">3</a><i>...</i><a href="#">13</a><a class="yema_next" >下一页</a></div></div><div class="foot_di"><img src="jp-app-90.png" alt=""><ul><li><span>获取更新</span></li><li><i></i><span>iPhone/Android</span></li><li><i></i><span>卷皮QQ空间</span></li><li><i></i><span>开放API</span></li></ul><ul><li>商务合作</li><li><i></i>卖家免费报名</li><li><i></i>商家入驻</li><li><i></i>廉政邮箱</li><li><i></i>开放平台</li></ul><ul><li>公司信息</li><li><i></i>关于卷皮</li><li><i></i>媒体报道</li></ul><ul><li>帮助中心</li><li><i></i>新手上路</li><li><i></i>网站地图</li></ul><p class="ft-company">武汉奇米网络科技有限公司 鄂ICP备10209250号 | ICP许可证号：鄂B2-20150109 | 鄂公网安备42018502000390号 |食品流通许可证 SP4201991510041888　　</p></div></div></body>
</html>

下面是页面的部分截图



以上就是全部的设计。

本文标签： 简易模拟购物商场页面（不含响应式）

版权声明：本文标题：简易模拟购物商场页面（不含响应式） 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1700300632a386712.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。