黑马品优购项目的总结-首页

一，准备阶段

建立好代码的统一规范和文件夹的布置命名，以便后期管理

因为一些html元素有默认样式，我们不喜欢它的默认样式，所以需要一个名为base.css的初始化样式。
然后注意到，首页，详情页这几个页面的头部和尾部是一样的，为了避免重写样式，可以把共有的样式提取出来，取名common.css。
设置网页的icon图标，位置是放到根目录下，然后代码引用放在head之间即可。
书写网页的三大标签：title、content、keywords
字体图标的创建：

二，导航栏的制作：

就是大盒子套小盒子，内部小盒子用浮动。

同样是大盒子套小盒子，内部小盒子用定位

并列关系，底下的详细页面是对全部商品分类的具体描述，所以用dd和dt标签，dt标签下再用li标签就可以了！

<div class="dt">全部商品分类</div><div class="dd"><ul><li class="menu_item"><a href="">家用电器</a> <i>&#xea51</i></li>

三，底部的制作

外部大盒子里面装小盒子，里面依旧是浮动来完成。

同样是6个dl浮动排布，然后小格子里面利用dt和dd来排布：

                 <dl  class="mod_help_item"><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>

四，轮播图部分的结构

                 <ul><li><a href="#"><img src="upload/focus.jpg" alt=""></a></li></ul>

五，热点区域

三个盒子做。

12个小li去做。

六，推荐区域

这里分为左右两个盒子去做。

      <!-- 推荐服务模块开始 --><div class="recommend w"><div class="recom_hd fl"><img src="img/clock.png" alt=""><h3>今日推荐</h3></div><div class="recom_bd fr"><ul><li><a href="#"><img src="img/today01.png"></a></li><li><a href="#"><img src="img/today02.png"></a></li><li><a href="#"><img src="img/today03.png"></a></li><li><a href="#"><img src="img/today04.png"></a></li></ul></div></div><!-- 推荐服务模块结束-->

七，可能喜欢区域：

同样是大盒子包含小盒子，结合浮动效果来完成

八，楼层区

因为这接下来的区域是一样的，相当于一个层一层楼，需所以结构和样式是通用的，所以不需要设置最外层的高，这样，里面有几层，这个楼就有多高。

同样是大盒子套小盒子的套路，细节优化下，首页就结束了

黑马品优购项目的总结-首页相关推荐

品优购项目——黑马程序员pink老师/完整源代码/项目讲解/内容补充完善
话不多说先看效果图,源代码在文末首页产品页:根据此前京东抢购案例补充完善注册页文章目录品优购项目规划 1. 网站制作流程 2. 品优购项目整体介绍 3. 开发工具以及技术栈 4. 品优购项目 ...
PC端品优购项目——首页制作
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 开发工具以及技术栈 1.5 总结 1.6 品优购项目搭建工作 1.6.1 创建文件夹 ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
独家首发java品优购项目课程，20天课程，430个知识点！视频+资料全部免费领！
千呼万唤始出来黑马程序员终于将"品优购"项目课程全部免费公开啦~ 划重点原价1690元现在免费领! 此次公开的是全部课程视频+资料资源! 不用在网上东拼西凑的找"品 ...
web前端入门学习 css（9）广义的html5 品优购项目（html+css基础完结，js开始，移动端布局开始）
文章目录广义的html5 品优购项目导读网站制作流程原型图项目规划项目整体介绍项目规划项目搭建网站favicon图标网站TDK三大标签SEO优化品优购首页制作常用模块类名命名快 ...
品优购项目的制作——知识分享
目录前言一.首页 1.基本的布局 2.版心部分 3.主要内容模块二.注册页面三.产品列表页面四.产品详情页面总结前言品优购项目是一个需要糅杂大量HTML5+CSS3知识点的网站项目,一 ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
品优购项目学习---基本概述(简略)
做项目期间看不懂的可以查阅标记有注的这些部分的内容一定会有你的需要的答案哦如果没有那小卓这边建议可以直接私信小卓小卓一定尽力提供最优解释哈等第二遍做的时候进行梳理注: CS ...
day18（续）PC端品优购项目
一.品优购项目导读网站制作流程原型图三.品优购项目规划四.品优购项目搭建工作五.样式的模块化开发六.favicon图标制作七.TDK三大标签ASEO优化八.品优购首页制作 logo s ...