一、楼层区floor制作

注意这个floor，不要给高度，内容有多少，算多少。
第一楼是家用电器模块：里面包含两个盒子

1号盒子box_hd，给一个高度，有个下边框，里面分为左右2个盒子。
2号盒子box_bd，不要给高度

1.1、box_hd 模块

有高度可以不用清除浮动
左边h3，盒子左浮动
右边tab-list，右浮动，因为用到tab切换效果，所以里面要用ul和li来做

1.2 、tab栏原理-布局需求

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>品优购</title><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 引入我们初始化样式文件 --><link rel="stylesheet" href="./css/base.css"><!-- 引入我们公共的样式文件 --><link rel="stylesheet" href="./css/common.css"><!-- 引入我们index.css文件 --><link rel="stylesheet" href="./css/index.css">
</head>
<body><!-- 快捷导航模块 start --><section class="shortcut"><div class="w"><div class="fl"><ul><li>品优购欢迎您!</li><li><a href="#">请登录</a><a href="#" class="style_red">免费注册</a></li></ul></div><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end --><!-- header 头部模块 start --><header class="header w"><!-- logo模块 --><div class="logo"><h1><a href="index.html">品优购商城</a></h1></div><!-- search搜索模块 --><div class="search"><input type="search" name="" id="" placeholder="语言开发"><button>搜索</button></div><!-- hotwords模块制作 --><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><!-- header 头部模块 end --><!-- nav模块制作 start --><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>、 <a href="#">数码</a>、<a href="#">通信</a> </li><li><a href="#">电脑</a>、<a href="#">办公</a> </li><li><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a> </li><li><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">童装</a>、<a href="#">内衣</a> </li><li><a href="#">个户化妆</a>、<a href="#">清洁用品</a>、<a href="#">宠物</a> </li><li><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">珠宝</a>、<a href="#">奢侈品</a> </li><li><a href="#">运动户外</a>、<a href="#">钟表</a> </li><li><a href="#">汽车</a>、<a href="#">汽车用品</a> </li><li><a href="#">母婴</a>、<a href="#">玩具乐器</a> </li><li><a href="#">食品</a>、<a href="#">酒类</a>、<a href="#">生鲜</a>、<a href="#">特产</a> </li><li><a href="#">医药保健</a> </li><li><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">电子书</a> </li><li><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a> </li><li><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<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><!-- nav模块制作 end --><!-- 首页专有的模块 main start --><div class="w"><div class="main"><div class="focus"><ul><li><img src="./upload/focus1.png" alt=""></li></ul></div><div class="newsflash"><div class="news"><div class="news-hd"><h5>品优购快报</h5><a href="#" class="more">更多</a></div><div class="news-bd"><ul><li><a href="#"><strong>[特惠]</strong>备战开学季  全民半价购数码  快速抢购</a></li><li><a href="#"><strong>[公告]</strong>品优稳占家电网购六成份额</a></li><li><a href="#"><strong>[特惠]</strong>百元中秋全品类礼券限量领</a></li><li><a href="#"><strong>[公告]</strong>上品优生鲜  享阳澄湖大闸蟹</a></li><li><a href="#"><strong>[特惠]</strong>每日享折扣品优品质游</a></li></ul></div></div><div class="lifeservice"><ul><li><i class="phone_fee"></i><p>话费</p></li><li><i class="air_tickets"></i><p>机票</p></li><li><i class="movie_tickets"></i><p>电影票</p></li><li><i class="game"></i><p>游戏</p></li><li><i class="lottery"></i><p>彩票</p></li><li><i class="oil_card"></i><p>加油卡</p></li><li><i class="hotel"></i><p>酒店</p></li><li><i class="train_tickets"></i><p>火车票</p></li><li><i class="the_raise"></i><p>众筹</p></li><li><i class="financial"></i><p>理财</p></li><li><i class="gift_card"></i><p>礼品卡</p></li><li><i class="ious"></i><p>白条</p></li></ul></div><div class="bargain"><img src="./upload/bargain.png" alt=""></div></div></div></div><!-- 首页专有的模块 main end --><!-- 推荐模块 start --><div class="w recom"><div class="recom_hd"><img src="./images/recom.png" alt=""></div><div class="recom_bd"><ul><li><img src="./upload/recom_01.jpg" alt=""></li><li><img src="./upload/recom_02.jpg" alt=""></li><li><img src="./upload/recom_03.jpg" alt=""></li><li><img src="./upload/recom_04.jpg" alt=""></li></ul></div></div><!-- 楼层区域 start --><div class="floor"><!-- 1楼家用电器楼层 --><div class="w jiadian"><div class="box_hd"><h3>家用电器</h3><div class="tab_list"><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></ul></div></div><div class="box_bd"><div class="tab_content"><div class="tab_list_item"><div class="col_210"><ul><li><a href="#">节能补贴</a></li><li><a href="#">4K电视</a></li><li><a href="#">空气净化器</a></li><li><a href="#">IH电饭煲</a></li><li><a href="#">滚筒洗衣机</a></li><li><a href="#">电热水器</a></li></ul><a href="#"><img src="./upload/floor-1-1.png" alt=""></a></div><div class="col_329"><a href="#"><img src="./upload/floor-1-b01.png" alt=""></a></div><div class="col_221"><a href="#" class="bb"><img src="./upload/floor-1-2.png" alt=""></a><a href="#"><img src="./upload/floor-1-3.png" alt=""></a></div><div class="col_221"><a href="#"><img src="./upload/floor-1-4.png" alt=""></a></div><div class="col_219"><a href="#" class="bb"><img src="./upload/floor-1-5.png" alt=""></a><a href="#"><img src="./upload/floor-1-6.png" alt=""></a></div></div></div></div></div></div><!-- 楼层区域 end --><!-- 推荐模块 end --><!-- 底部模块的制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h5 class="one"></h5><div class="service_txt"><h4>正品保障</h4><p>正品保障,提供发票</p></div></li><li><h5 class="two"></h5><div class="service_txt"><h4>急速物流</h4><p>急速物流,急速送达</p></div></li><li><h5 class="three"></h5><div class="service_txt"><h4>无忧售后</h4><p>7天无理由退换货</p></div></li><li><h5 class="four"></h5><div class="service_txt"><h4>特色服务</h4><p>私人定制家电套餐</p></div></li><li><h5 class="five"></h5><div class="service_txt"><h4>帮助中心</h4><p>您的购物指南</p></div></li></ul></div><div class="mod_help"><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>服务指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="data:images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a> | <a href="#">联系我们</a> | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 |品优购公益 | English Site | Contact U</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块的制作 end -->
</body>
</html>

index.css

.main {width: 980px;height: 455px;margin-left: 220px;margin-top: 10px;
}
.focus {float: left;width: 721px;height: 455px;
}
.newsflash {float: right;width: 250px;height: 455px;
}
.news {height: 165px;
}
.news-hd {height: 33px;border: 1px dotted #e4e4e4;
}
.news-hd h5 {float: left;font-size: 14px;
}
.news-hd .more {float: right;
}
.news-hd .more::after {font-family: 'icomoon';content: '\e920';
}
.news-bd {padding: 5px 15px 0;
}
.news-bd ul li {height: 24px;line-height: 24px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
}
.lifeservice {overflow: hidden;height: 209px;border: 1px solid #e4e4e4;border-top: 0;
}
.lifeservice ul {width: 252px;
}
.lifeservice ul li {float: left;width: 63px;height: 71px;border-right: 1px solid #e4e4e4;border-bottom: 1px solid #e4e4e4;text-align: center;
}
.lifeservice ul li i {display: inline-block;width: 24px;height: 28px;margin-top: 12px;background: url(../images/icons.png) no-repeat;
}
.lifeservice .phone_fee {background-position: -19px -15px;
}
.lifeservice .air_tickets {background-position: -78px -15px;
}
.lifeservice .movie_tickets {background-position: -141px -15px;
}
.lifeservice .game {background-position: -204px -15px;
}
.lifeservice .lottery {background-position: -17px -87px;
}
.lifeservice .oil_card {background-position: -79px -87px;
}
.lifeservice .hotel {background-position: -142px -87px;
}
.lifeservice .train_tickets {background-position: -208px -87px;
}
.lifeservice .the_raise {background-position: -17px -159px;
}
.lifeservice .financial {background-position: -76px -159px;
}
.lifeservice .gift_card {background-position: -141px -159px;
}
.lifeservice .ious {background-position: -207px -159px;
}
.bargain {margin-top: 5px;
}
/* 推荐模块 */
.recom {height: 163px;margin-top: 12px;
}
.recom_hd {float: left;height: 163px;width: 205px;background-color: #5c5251;text-align: center;padding-top: 30px;
}
.recom_bd {float: left;
}
.recom_bd ul li {position: relative;float: left;
}
.recom_bd ul li img {width: 248px;height: 163px;
}
.recom_bd ul li:nth-child(-n+3)::after {content: '';position: absolute;right: 0;top: 10px;width: 1px;height: 145px;background-color: #ddd;
}
/* 楼层区域 */
/* 家用电梯模块 */
.box_hd {height: 30px;border-bottom: 2px solid #c81623;
}
.box_hd h3 {float: left;font-size: 18px;color: #c81623;font-weight: 400;
}
.tab_list {float: right;line-height: 30px;
}
.tab_list ul li {float: left;
}
.tab_list ul li a {margin: 0 15px;
}
.floor .w {margin-top: 30px;
}
.box_bd {height: 361px;
}
.tab_list_item>div {float: left;height: 361px;
}
.col_210 {width: 210px;background-color: #f9f9f9;text-align: center;
}
.col_210 ul {padding-left: 12px;
}
.col_210 ul li {float: left;width: 85px;height: 34px;border-bottom: 1px solid #ccc;text-align: center;line-height: 33px;margin-right: 10px;
}
.col_329 {width: 329px;
}
.col_221 {width: 221px;border-right: 1px solid #ccc;
}
.col_219 {width: 219px;
}
.bb {/* 一般情况下，a如果包含有宽度的盒子，a需要转为块级元素 */display: inline-block;border-bottom: 1px solid #ccc;
}

八、品优购首页制作_主体区域（下）相关推荐

三、品优购首页制作_快捷导航区域
代码下载地址:https://gitee.com/bitaotao/quality-shopping-static-page.git 一.品优购首页制作网站的首页一般都是使用index命名,比如in ...
HTML5 和 CSS3 的新特性--品优购首页制作
网站的首页一般都是使用 index 命名,比如 index.html 或者 index.php . 我们开始制作首页的头部和底部的时候,根据模块化开发,样式要写到common.css里面. 以下是我们 ...
【HTML+CSS】01.品优购首页制作——快捷导航shortcut制作
1.常用模块类名命名 2.快捷导航shortcut制作 (1)快捷导航整体上在common.css中: /* 左浮动 */ .fl{float: left; } /* 右浮动 */ .fr{floa ...
HTML和CSS实现品优购首页
HTML和CSS实现品优购首页效果图如下: 1.HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-CN"><h ...
品优购首页——网页轮播图
效果图首页文件 index.html <!DOCTYPE html> <html lang="en"> <head><meta char ...
前端初尝试---品优购首页（只用HTML和CSS）
品优购首页(只用HTML和CSS) 预览主页HTML码 base.css common.css index.css 预览主页HTML码 <!DOCTYPE html> <html ...
品优购网页制作（HTML和css内容）
品优购前期准备书写对应页面首页列表页注册页后话前期准备 1.准备一个大的文件夹,里面包括若干小的文件夹. 2.小的文件夹分为: css-----存储初始化样式以及各个页面的样式 imag ...
web前端品优购首页+源代码(2)
目录 main 首页主体模块制作 recom 今日推荐模块 ulike 猜你喜欢模块 main 模块不再时公共模块,新建一个index.css文件在该文件中编写css代码分类部分在nav 导航模 ...
PC端品优购网页制作（common.css）
制作网页前的基础学习品优购项目规划 1.1网站制作流程客户沟通制定方案签订合同预付定金不能退初稿审核网页美工会制作原型图和PSD效果图前台页面设计后台工程开发测试验收上线培训后期 ...

八、品优购首页制作_主体区域（下）

一、楼层区floor制作

1.1、box_hd 模块

1.2 、tab栏原理-布局需求

八、品优购首页制作_主体区域（下）相关推荐

最新文章

热门文章