效果图和代码
素材上传到csdn资源了，在主页可以找到。不需要积分和C币就能下载。
零碎技巧
- 给父元素定义text-align: center; 可以让块级元素、行内元素、行内块元素水平居中。
- 伪元素属于行内元素。虽然加大小之前需要转换成行内块元素，但是加了浮动或者定位，就不需要转换了。
- 一般情况下，a如果包含有宽度的盒子，a需要转换为块级元素。
- 防止盒子内的图片或者内容超出盒子大小，可以给盒子添加overflow:hidden;。
- 为了防止鼠标经过加边框后，盒子里面的内容出现抖动，可以事先就给盒子添加一个透明色的边框。
vertical-align: center;的作用。- logoSEO优化。
- 实际开发中，父盒子即使没有外边距，子盒子的外边距似乎也会坍塌。
javascript:;是表示在触发<a>默认动作时，执行一段JavaScript代码，而javascript:;表示什么都不执行，这样点击<a>时就没有任何反应。
一、品优购项目规划
- 品优购项目整体介绍（制作首页、列表页、注册页三个页面）。
- 品优购项目学习目的（里面包含技术较多，能极大锻炼我们布局技术）。
- 开发工具以及技术栈（切图用PS、代码用VScode、测试用Chrome、大量使用HTML5+CSS3）。
1.1 品优购整体项目介绍
- 项目名称：品优购
- 项目描述：品优购是一个电商网站，我们要完成pc端首页，列表页，注册页的制作。
1.2 品优购项目的学习目的
- 电商类网站比较综合，里面需要大量的布局技术，包括布局方式，常见效果以及周边技术。
- 品优购项目能复习，总结，提高前面所学的基础。
- 写完品优购项目，能对实际开发中制作pc端页面流程有个整体的感知。
- 为后期做移动端项目做铺垫。
1.3 开发工具以及技术栈
1.3.1 开发工具
VScode、Photoshop（fw）、主流浏览器（以Chrome浏览器为主）
1.3.2 技术栈
- 利用html5+css3手动布局，可以大量使用h5新增标签和样式。
- 采取结构和样式相分离，模块化开发。
- 良好的代码规范有利于团队更好的开发协作，提高代码质量。（详情请见素材文件 — 品优购代码规范.md）
1.4 品优购项目搭建工作
1.4.1 需要创建如下文件夹
| 名称 | 说明 |
|---|---|
| 项目文件夹 | shopping |
| 样式类图片文件夹 | images |
| 样式文件夹 | css |
| 产品类图片文件夹 | upload |
| 字体类文件夹 | fonts |
| 脚本文件夹 | js |
1.4.2 需要创建如下文件
| 名称 | 说明 |
|---|---|
| 首页 | index.html |
| CSS 初始化样式文件 | base.css |
| CSS公共样式文件 | common.css |
有些网站不太提倡
* {margin: 0; padding: 0;}
例如新浪：
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin:0; padding: 0;}
- 在 把我们所有标签的内外边距清零 那部分CSS样式中添加CSS3盒子模型。
/* 把我们所有标签的内外边距清零 */
* {
margin: 0;
padding: 0;
/* CSS3盒子模型 */
box-sizing: border-box;
}
-在index.html 文件中引入base.css文件。
<!-- 引入初始化样式文件 -->
<link rel="stylesheet" href="css/base.css" />
1.4.3 模块开发
所谓的模块开发：将一个项目按照功能划分，一个功能一个模块，互不影响。模块化开发具有重复使用、更换方便的优点。
- 代码也是如此，有些样式和结构在很多页面都会出现，比如页面头部和底部，大部分页面都有。此时，可以把这些结构和样式单独作为一个模块，然后重复使用。
- 这里典型的应用就是common.css公共样式。写好一个样式，其余的页面用到这些相同的样式。
- 模块化开发具有重复使用、修改方便等优点。
- common.css公共样式里面包含版心宽度、清除浮动、页面文字颜色等公共样式。
- 接下来在common.css文件中添加版心宽度样式，并且在index.html文件中引入common.css样式文件。
/* 版心 */
.w {
width: 1200px;
margin: 0 auto;
}
<!-- 引入公共样式 -->
<link rel="stylesheet" href="css/common.css" />
1.5 网站favicon图标
1.6 网站TDK三大标签SEO优化
经过上述步骤后，index.html文件的head部分包含如下内容：
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>品优购商城-正品低价、品质保障、配送及时、轻松购物！</title>
<!-- 网站说明 -->
<meta
name="description"
content="京东JD.COM-专业的综合网上购物商城,销售家电、 数码通讯、
电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品. 便捷、诚信的服务，为您提供愉悦的网上购物体验!"
/>
<!-- 关键字 -->
<meta
name="Keywords"
content="网上购物,网上商城,手机,笔记本,电脑,
MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"
/>
<!-- 引入favicon图标 -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- 引入初始化样式文件 -->
<link rel="stylesheet" href="css/base.css" />
<!-- 引入公共样式 -->
<link rel="stylesheet" href="css/common.css" />
</head>
二、品优购首页制作
- 网站的首页一般都是使用index命名，比如index.html 或者 index.php。
- 我们开始制作首页头部和底部的时候，根据模块化开发，样式要写到common.css里面。
2.1 常用模块类名命名
| 名称 | 说明 |
|---|---|
| 快捷导航栏 | shortcut |
| 头部 | header |
| 标志 | logo |
| 购物车 | shopcar |
| 搜索 | search |
| 热点词 | hotwords |
| 导航 | nav |
| 导航左侧 | dropdown 包含.dd .dt |
| 导航右侧 | navitems |
| 页面底部 | footer |
| 页面底部服务模块 | mod_service |
| 页面底部帮助模块 | mod_help |
| 页面底部版权模块 | mod_copyright |
2.2 快捷导航shortcut制作
- 上图中的每个 li 里面的字数不一样，所以不给 li 指定宽度，使用padding 或者 margin把它们挤开即可。pink老师的具体做法见代码。
2.3 header制作
- header盒子必须要有高度。
/* header 头部制作 */
.header {
position: relative;
height: 105px;
background-color: pink;
}
- 1号盒子是logo标志定位。
logoSEO优化
<!-- logo 模块 -->
<div class="logo">
<h1>
<a href="index.html" title="品优购商城">品优购商城</a>
</h1>
</div>
.logo {
position: absolute;
top: 25px;
width: 171px;
height: 61px;
}
.logo a {
display: block;
width: 171px;
height: 61px;
background: url("../images/logo.png") no-repeat;
font-size: 0;
}
- 2号盒子是search搜索模块定位。
.search {
position: absolute;
left: 346px;
top: 25px;
width: 538px;
height: 36px;
border: 2px solid #b1191a
}
.search input {
/* 此处加浮动是因为input和button都是行内元素，默认会有个小空隙 */
/* 因此添加浮动去掉小空隙 */
float: left;
/* 次数input虽然既有宽度也有padding， */
/* 但是我们用的是CSS3盒子模型（base.css中有声明） */
/* 不需要担心padding会撑大盒子 */
width: 454px;
height: 32px;
padding-left: 10px;
}
.search button {
/* 此处加浮动是因为input和button都是行内元素，默认会有个小空隙 */
/* 因此添加浮动去掉小空隙 */
float: left;
width: 80px;
height: 32px;
background-color: #b1191a;
font-size: 16px;
color: #ffffff;
}
- 3号盒子是hotwords 热词模块定位。
.hotwords {
position: absolute;
top: 66px;
left: 346px;
}
.hotwords a {
margin: 0 10px;
}
- 4号盒子是shopcar购物车模块。
.shopcar {
position: absolute;
right: 60px;
top: 25px;
width: 140px;
height: 35px;
line-height: 35px;
text-align: center;
border: 1px solid #dfdfdf;
background-color: #f7f7f7;
}
.shopcar::before {
content: "\e93a";
font-family: "icomoon";
margin-right: 5px;
color: #b1191a;
}
.shopcar::after {
content: "\ea42";
font-family: "icomoon";
margin-left: 10px;
/* 质量图标也是一种文本，可以给color */
color: #b1191a;
}
- count统计部分用绝对定位去做。
- count统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了，给一个高度。
- 一定要注意左下角不是一个圆角，其余三个是圆角。写法：
border-radius: 7px 7px 7px 0;。
.count {
position: absolute;
top: -5px;
/* 最好使用左对齐，而不是右对齐 */
/* 因为不排除有土豪买了很多东西 */
left: 95px;
height: 14px;
/* 不重新定义line-height，则会继承父元素的line-height值 */
line-height: 14px;
color: #ffffff;
background-color: #e60012;
padding: 0 5px;
border-radius: 7px 7px 7px 0;
}
2.4 nav 导航制作
- nav盒子通栏有高度，而且有个下边框
- 1 号盒子左浮动，dropdown
- 2 号盒子左浮动，navitems导航栏组
- 1 号盒子有讲究，根据相关性 里面包含.dt和.dd两个盒子
2.5 footer 底部制作
- footer页面底部盒子通栏给一个高度和灰色的背景。
- footer里面有个大的版心。
- 版心里面包含1号盒子，mod_service是服务模块，mod是模块的意思。
- 版心里面包含2号盒子，mod_help是帮助模块。
- 版心里面包含3号盒子，mod_copyright是版权模块。
2.6 main 主体模块制作
- 以前书写的就是模块化中公共的部分。
- main主体模块是index里面专有的，需要注意新的样式文件index.css。
- main盒子宽度为980像素，位置距离左边220px（margin-left），给了高度就不用清除浮动。
- main里面包含左侧盒子，左浮动，focus焦点图模块。
- main里面包含右侧盒子，右浮动，newsflash新闻快报模块。
newsflash新闻快报模块 - 1号盒子为news新闻模块 高度为165px
- 2号盒子为lifeservice生活服务模块 高度为209px
- 3盒子为bargain特价商品
news新闻模块
注意，这里我们分为上下两个模块，但是两个模块都用div
1号盒子news-hd新闻头部模块，给一个高度和下边框
2号盒子news-bd新闻主题部分，里面包含ul和li还有链接
2.7 推荐模块制作
- 大盒子recom推荐模块 recommend
- 里面包含两个大盒子，浮动即可
- 1号盒子recom-hd
- 2号盒子recom-bd，注意里面的小竖线
2.8 楼层区floor制作
-
注意这个floor，不要给高度，内容有多长算多少。
-
第一楼是家用电器模块：里面包含两个盒子。
-
1号盒子box_hd，给一个高度，下面有个边框，里面分为左右2个孩子。
-
2号盒子box_bd，不要给高度。
三、品优购列表页制作
3.1 结构搭建
- 列表页面是新的页面，我们需要新建页面文件list.html。
- 因为列表的头部和底部基本保持一致，所以我们需要把首页中的头部和底部的结构复制过来。
- 头部和底部也需要样式因此list.html中还需要引入common.css。
- 需要新的list.css样式文件，这是列表也专门的样式文件。
3.2 列表页header和nav修改
- 秒杀盒子sk（second kill）定位即可
- 1 号盒子左浮动sk_list里面包含ul和li
- 2号盒子左浮动sk_con里面包含ul和li
3.3 列表页主体 sk_container
- 1号盒子sk_container给宽度1200，不要给高度。
- 2号盒子sk_hd，插入图片即可。
- 3号盒子sk_bd，里面包含很多ul和li。
为了消除nav中.sk_con ul li a的line-height超出 47px 给sk_container带来的不好影响，需给nav添加下述代码：
.nav {
/* 消除nav中.sk_con ul li a的line-height超出47px的影响 */
overflow: hidden;
}
四、品优购注册页制作
4.1 注册页类名命名
注册页面：register.html
注意：注册页面比较隐私，为了保护用户信息，我们不需要对当前页面做SEO优化
| 名称 | 说明 |
|---|---|
| 注册专区 | registerarea |
| 注册内容 | ref-form |
| 错误的 | error |
| 成功的 | success |
| 默认的 | default |
4.2 注册页面布局
1165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
