web前端品优购首页+源代码(1)

首页构成

shortcut 快捷导航模块
header 头部模块
nav 导航模块
footer 底部模块(优先做页面公共模块)

快捷导航模块

<!-- 快捷导航模块 --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您! &nbsp;</li><li><a href="#">请登录</a>&nbsp;<a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li><a href="#">我的订单</a></li><li></li><li class="tri-icon">我的品优购</li><li></li><li><a href="#">品优购会员</a></li><li></li><li><a href="#">企业采购</a></li><li></li><li class="tri-icon">关注品优购</li><li></li><li class="tri-icon">客户服务 </li><li></li><li class="tri-icon">网站导航</li></ul></div></div></section>

css代码:

/* 版心 */
.w{width: 1200px;margin: 0 auto;
}
.style_red{color: #c81623;
}
@font-face {font-family: 'icomoon';/* 路径变化 */src:  url('../fonts/icomoon.eot?nukn6v');src:  url('../fonts/icomoon.eot?nukn6v#iefix') format('embedded-opentype'),url('../fonts/icomoon.ttf?nukn6v') format('truetype'),url('../fonts/icomoon.woff?nukn6v') format('woff'),url('../fonts/icomoon.svg?nukn6v#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}/* 快捷导航模块 */
.fl{float: left;
}
.fr{float: right;
}
.shortcut{height: 31px;line-height: 31px;background-color: #f1f1f1;color: #666666;font-size: 12px;
}
.shortcut ul li{float: left;position: relative;}
.shortcut .fr ul li:nth-child(even){width: 1px;height: 12px;margin: 9px 15px 0;background-color: #666666;
}
.tri-icon::after{font-family: 'icomoon';content: '\e901';margin-left: 5px;
}

头部模块

<!-- 头部header模块 --><header class="header w"><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a></h1></div><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><div class="hotwords"><a href="#" class="style_red">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><div class="shopcar">我的购物车<i class="count">8</i></div></header>

css代码:

/* 头部header模块 */
.header{position: relative;height: 105px;}
.header .logo{position: absolute;top: 25px;height: 61px;width: 171px;
}
.header .logo a{display: block;height: 61px;width: 171px;background: url(../images/logo.png);/* font-size: 0; */text-indent: -999px;overflow: hidden;
}
.search{position: absolute;left: 346px;top: 25px;width: 538px;height: 36px;border: 2px solid #b1191a;
}
.search input{float: left;width: 454px;height: 32px;padding-left: 10px;
}
.search button{float: left;height: 32px;width: 80px;background-color: #b1191a;/* 按钮掉下来是因为两个行内快元素之间会有缝隙,加浮动解决 */font-size: 16px;color: white;
}
.hotwords{position: absolute;top: 66px;left: 346px;
}
.hotwords a{font-size: 12px;margin: 0 10px;
}
.shopcar{position: absolute;top: 25px;right: 64px;width: 140px;height: 36px;border: 1px solid #dfdfdf;background-color: #f7f7f7;font-size: 12px;color: #666666;line-height: 36px;text-align: center;
}
.shopcar::before{content: '\e900';font-family: 'icomoon';color: #b1191a;margin-right: 5px;
}
.shopcar::after{content: '\e904';font-family: 'icomoon';margin-left: 10px;
}
.shopcar .count{position: absolute;/* 右对齐数字多了会往左走,应该为左对齐符合书写习惯 *//* right: 18px; */left: 100px;top: -4px;/* 不设置宽度,让它自动撑开 *//* width: 16px; */height: 14px;/* 继承了父盒子的行高,所以8不在图标内,把行高层叠掉即可 */line-height: 14px;border-radius: 7px 7px 7px 0;color: #fff;background-color: #e60012;padding: 0 5px;
}

nav 导航模块

<!-- nav 导航模块 --><nav class="nav"><div class="w"><div class="dropdown"><div class="dt">全部商品分类</div><div class="dd"><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><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="navitems"><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></nav>

css代码:

.nav{height: 45px;border-bottom: 2px solid #b1191a;
}
.nav .dropdown{float: left;width: 210px;height: 45px;background-color: #b1191a;
}
.dropdown .dt{width: 100%;height: 100%;line-height: 45px;text-align: center;font-size: 16px;    color: #ffffff;
} /* 详细分类应该和分类放在一起 */
.dropdown .dd{width: 210px;height: 465px;background-color: #c81623;
}
.dropdown .dd li{position: relative;height: 31px;margin-left: 2px;line-height: 31px;padding-left: 11px;
}
.dropdown .dd li a{font-size: 14px;color: #fff;
}
.dropdown .dd li::after{position: absolute;top: 1px;right: 10px;color: #fff;font-size: 14px;font-family: 'icomoon';content: '\e904';
}
.dropdown .dd li:hover{background-color: #fff;
}
.dropdown .dd li:hover a{color: #c81623;
}
.nav .navitems{float: left;
}
.navitems ul li{/* display: inline-block; *//* 加浮动 也可以在一行*/float: left;line-height: 45px;}
.navitems ul li a{font-size: 16px;color: #333333;padding: 0 23px;
}

footer 底部模块

mod_service模块里的小图标可以采用进精灵图的方式比较简单,但缺少精灵图,所以分开写.

<footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5 class="footer1"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障，提供发票</p></div></li><li><h5 class="footer2"></h5><div class="service_txt"><h4>极速物流</h4><p>极速物流，极速送达</p></div></li><li><h5 class="footer3"></h5><div class="service_txt"><h4>无忧售后</h4><p>7天无理由退货</p></div></li><li><h5 class="footer4"></h5><div class="service_txt"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5 class="footer5"></h5><div class="service_txt"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><div class="mod_help"><dl><dt>购物指南</dt><dd>购物流程</dd><dd>会员介绍</dd><dd>生活旅行/团购</dd><dd>常见问题</dd><dd>大家电</dd><dd>联系客服</dd></dl><dl><dt>配送方式</dt><dd>上门自提</dd><dd>211限时达</dd><dd>配送服务查询</dd><dd>配送费收取标准</dd><dd>海外配送</dd></dl><dl><dt>支付方式</dt><dd>在线支付</dd><dd>分期付款</dd><dd>邮局汇款</dd><dd>公司转账</dd><dd>货到付款</dd></dl><dl><dt>售后服务</dt><dd>售后政策</dd><dd>价格保护</dd><dd>退款说明</dd><dd>返修/退换货</dd><dd>取消订单</dd></dl><dl><dt>特色服务</dt><dd>夺宝岛</dd><dd>DIY装机</dd><dd>延保服务</dd><dd>品优购E卡</dd><dd>品优购通信</dd></dl><dl><dt>帮助中心</dt><dd><img src="./upload/ewm.png" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="link"><a href="#">关于我们 </a> |  <a href="#">联系我们</a>  |  <a href="#">联系客服</a>  |  <a href="#">商家入驻</a>  |  <a href="#">营销中心</a>  |  <a href="#">手机品优购</a>  |  <a href="#">友情链接</a>  |  <a href="#">销售联盟</a>  |  <a href="#">品优购社区</a>  |  <a href="#">品优购公益</a>  |  <a href="#">English Site</a>  |  <a href="#">Contact U</a></div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />京ICP备08001421号京公网安备110108007702</div></div></div></footer>

css代码部分:

/* footer  底部模块 */
.footer{height: 415px;background-color: #f5f5f5;padding-top: 30px;
}
.footer .mod_service{height: 80px;border-bottom: 1px solid #ededed;
}
.mod_service ul li{float: left;width: 240px;height: 50px;padding-left: 35px;
}
.mod_service ul li h5{float: left;width: 50px;height: 50px;border-radius: 50%;margin-right: 7px;
}
.mod_service li .footer1{background:#c81623 url(../images/footer1.png) no-repeat 50% 50%;
}
.mod_service li .footer2{background:#c81623 url(../images/footer2.png) no-repeat 50% 50%;
}
.mod_service li .footer3{background:#c81623 url(../images/footer3.png) no-repeat 50% 50%;
}
.mod_service li .footer4{background:#c81623 url(../images/footer4.png) no-repeat 50% 50%;
}
.mod_service li .footer5{background:#c81623 url(../images/footer5.png) no-repeat 50% 50%;
}
.mod_service .service_txt h4{margin-top: 8px;font-size: 14px;
}
.mod_service .service_txt p{font-size: 12px;
}
.mod_help{height: 190px;border-bottom: 1px solid #ededed;margin-left: 50px;margin-top: 20px;
}
.mod_help dl{float: left;width: 200px;/* margin-right: 120px; */ /* 给dl一个宽度也可以,,但是最后一个会掉下来,要单独设置它的宽度 */
}
.mod_help dl:last-child{/* position: absolute; */width: 90px;text-align: center;
}
.mod_help dl:last-child::after{  /* 中心的购物车用添加伪元素的方法 *//* content: \''; */position: relative;top: -79px;left: 1px;content: '\e900';font-family: 'icomoon';color: #b1191a;
}
.mod_help dl dt{font-size: 16px;color: #333;margin-bottom: 14px;
}
.mod_help dl dd{font-size: 12px;color: #666666;margin-bottom: 4px;
}
.mod_copyright{text-align: center;font-size: 12px;color: #666666;
}
.mod_copyright .link{margin-top: 20px;
}
.mod_copyright .link a{padding: 0 10px;
}
.mod_copyright .copyright{margin-top: 15px;line-height: 20px;
}

web前端品优购首页+源代码(1)相关推荐

web前端品优购首页+源代码(2)
目录 main 首页主体模块制作 recom 今日推荐模块 ulike 猜你喜欢模块 main 模块不再时公共模块,新建一个index.css文件在该文件中编写css代码分类部分在nav 导航模 ...
web前端|品优购|html+css|代码
项目名称:品优购电商网页制作前端小白的熬夜+入门边缘试探+颓废中热情之作,欢迎各位小可爱交流~ 参考教程:(戳一下)b站黑马教程链接https://www.bilibili.com/video/B ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
前端初尝试---品优购首页（只用HTML和CSS）
品优购首页(只用HTML和CSS) 预览主页HTML码 base.css common.css index.css 预览主页HTML码 <!DOCTYPE html> <html ...
HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
前端——品优购项目（html+css）
前端--品优购项目文章目录前端--品优购项目一.品优购项目规划二.首页公共部分(common.css) 快捷导航模块 header模块 nav导航部分底部模块首页专有部分(index.c ...
品优购首页——网页轮播图
效果图首页文件 index.html <!DOCTYPE html> <html lang="en"> <head><meta char ...
三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
八、品优购首页制作_主体区域（下）
一.楼层区floor制作注意这个floor,不要给高度,内容有多少,算多少. 第一楼是家用电器模块:里面包含两个盒子 1号盒子box_hd,给一个高度,有个下边框,里面分为左右2个盒子. 2号盒子b ...

web前端品优购首页+源代码(1)

首页构成

快捷导航模块

头部模块

nav 导航模块

footer 底部模块

web前端品优购首页+源代码(1)相关推荐

最新文章

热门文章

web前端 品优购首页+源代码(1)

首页构成

快捷导航模块

头部模块

nav 导航模块

footer 底部模块

web前端 品优购首页+源代码(1)相关推荐

最新文章

热门文章

web前端品优购首页+源代码(1)

web前端品优购首页+源代码(1)相关推荐