品优购项目——div+css的静态页面

项目代码
小结：对于DIV+CSS的盒子模型的布局练习
对于favicon.ico，网页的seo，CSS精灵图，浮动和定位，表单，无序列表和自定义列表等设置更加熟练

1.首页布局

引入ico图标

SEO三元素

<head>
    <meta charset="UTF-8">
    <title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
    <meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
    <!-- 引入facicon.ico网页图标 -->
    <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>    
    <!-- 引入css 初始化的css 文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式的css 文件 -->
    <link rel="stylesheet" href="css/common.css">
</head>

网站的SEO

font-icon

字体图标

命名集合：

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwrods
导航	nav
导航左侧	dorpdown 包含 .dd .dt
导航右侧	navitems

1). shortcut 制作

通栏的盒子命名为shortcut 快捷导航的意思，注意，这里给行高，可以继承给里面的子盒子。
里面包含版心的盒子
版心盒子里面包含1号左侧盒子左浮动
版心盒子里面包含2号右侧盒子右浮动
中间的竖线

2). header 制作

header盒子必须要有高度

1号盒子是 logo 标志定位

LOGO区域

注意写成利于SEO的写法

<!-- header制作 -->
  <div class="header w">
      <!-- logo -->
      <h1 class="logo">
              <a href="index.html" title="品优购">品优购</a>
          </h1>
      </div>

将超链接作为logo的布局，里面放入文字，（文字可以被SEO）

/*header区域*/
.header {
  position: relative;
  height: 105px;
}
.logo {
  position: absolute;
  top: 25px;
  left: 0;
  width: 175px;
  height: 56px;
}
.logo a {
  display: block;
  /*overflow: hidden;*/
  width: 175px;
  height: 56px;
  background: url(../img/logo.png) no-repeat;
  /*text-indent: -999px;*/
  font-size: 0;
}

然后将logo设置为背景图：然后通过text-indent缩进的属性把文字赶走到视线以外的地方。

2号盒子是 search 搜索模块定位
3号盒子是 hotwrods 热词模块定位
4号盒子是 shopcar 购车车模块
- count 统计部分用绝对定位做
- count 统计部分不要给宽度，因为可能买的件数比较多，让件数撑开就好了给一个高度
- 一定注意左下角不是圆角其余三个是圆角

.count {
    position: absolute;
    top: -5px;
    /*应该是左侧对齐 文字才能往右走显示*/
    left: 100px;
    background-color: #e60012;
    height: 14px;
    padding: 0 3px;
    line-height: 14px;
    color: #fff;
    /*border-radius: 左上角 右上角  右下角  左下角;*/
    border-radius: 7px 7px 7px 0;
}

3). nav 制作

nav 盒子通栏有高度而且有个下边框
1号盒子左侧浮动 dorpdown 下拉导航里面包含 dt dd
2号盒子右侧浮动 navitems 导航栏组
2). footer 底部制作

footer 页面底部盒子通栏给一个高度灰色的背景
footer 里面首先一个大的版心
版心里面包含 1号盒子 mod_service 服务模块 module 模块的意思
版心里面包含 2号盒子 mod_help 帮助模块
版心里面包含 3号盒子 mod_copyright 版权模块

3). mod_service 服务模块制作

依然是ul>li的结构
在li里再左右分两个盒子，一个装图一个装字
不赘述

4). main 主体模块制作

这部分是 index 里面专有的，注意需要新的样式文件 index.css

main 盒子宽度为 980像素，距离左边 220 给一个margin-left 就好了，给高度就不用清除浮动。
main 里面包含左侧盒子左浮动 focus 焦点图模块
main 里面包含右侧盒子右浮动 newsflash 新闻快报模块
5). newsflash 新闻快报模块

1 号盒子为 news 新闻模块
2 号盒子为lifeservice 生活服务模块
3 号盒子为 bargain 特价商品

6). news 新闻模块

注意，这里我们分为上下两个模块，但是两个模块都用div
1号盒子 news-hd 新闻头部模块给一个高度和下边框 dotted
2号盒子 news-bd 新闻主题部分里面包含 ul 和 li 还有链接

7). lifeservice 生活服务模块

此地方有个小技巧，

lifeservice 盒子宽度为 250 但是装不开里面的 4个小 li
可以让 lifeservice 里面的 ul 宽度为 252 就可以装的下 4个小li
lifeservice 盒子 overflow 隐藏多余的部分就可以了。
这里的图用到了CSS精灵技术
8). recommend 推荐模块

里面包含2个盒子，浮动即可
1号盒子 recom-hd
2号盒子 recom-bd 注意里面的小竖线
1). 楼层区 floor

注意这个floor 一个大盒子包含，不要给高度，内容有多少，算多少

2). 家用电器模块

这个模块 jiadian 不需要写样式
版心居中对齐因为这些模块基本相同，下面的模块基本用这些样式所以咱们下面两个盒子的命名是：
1号盒子 box-hd 给一个高度，有个下边框里面分为左右2个盒子
2号盒子 box-bd 不要给高度。

3). box-hd 模块

有高度
左边 h3 盒子
右边 div 命名为 tab-list 因为用到 tab 切换效果，所以里面要用 ul 和 li 来做。

4). box-bd 模块

根据tab 切换的原理，应该还需要一个 tab-content 的内容来包装里面的 5个盒子
分为5个大列列的宽度不一致
总体还是ul>li的布局
图片的过渡效果

.box-bd img {
    /*过渡写到本身上， 谁做动画，给谁加*/
    transition: all .2s;
}
/*我们鼠标经过图片 往右走 8px*/
.box-bd img:hover {
    margin-left: 8px;
}

5). 侧边栏 fixedtool 制作

此模块用固定定位里面包含 li

2. 列表页制作

1). 列表页准备工作

列表页面是新的页面，我们需要新建 list.html
因为列表页的头部和底部基本一致，我们需要把首页中的头部和底部的结构复制过去
头部和底部的样式，列表也需要，因此 list.html 也需要引入 common.css
同时需要新的 list.css 文件这个样式文件，里面只写 list.html 结构里面的内容就好了
2). 列表页 header 和 nav 修改

秒杀盒子 sk 定位即可 second kill
1 号盒子左侧浮动 sk_list 里面包含 ul 和 li
2 号盒子左侧浮动 sk_con 里面包含 ul 和 li
3). 列表页主体盒子 sk _container

这个盒子里面包含了所有的列表页的所有主体内容

1号盒子 sk _container 给宽度 1200 不要给高度
2号盒子 sk_hd 插入图片即可
3号盒子 sk_bd 里面包含很多的 ul 和 li

4). sk_goods 布局

此li 我们命名为 sk_goods
1号位置有 a 包含本图片和下面的标题插入图片即可 seckill_mod_goods_img 可以做一个鼠标放入图片上滑动的效果
2号位置标题 H5 命名为 sk_goods_title
3号位置为价格 div 命名为 sk_goods_price
4号位置为 div 命名为 sk_goods_progress 此处，我们采取代码的形式写出这个导航条
5号位置为 a 链接命名为 sk_goods_buy 此处注意，因为父盒子已经有左右padding 我们这里用定位合适。
5). 分页制作 page

最大的盒子我们div 命名为 page 注意里面的盒子全部用行内块
1号盒子用 span 命名为 page_num ( 页码的意思 ) 里面放 a 把a 转换为行内块设置样式
- pn_prev 上一页 pn_next 下一页
2号盒子用 span 命名为 page_skip ( skip 跳转转移的意思 ) 里面注意有 input 和 button
1). 详情页 detail.html 常用单词

名称	说明
主体	de_container
面包屑导航	crumb_wrap
产品介绍	product_intro （ introduction介绍）
预览包	preview_wrap（左侧部分）
预览缩略图	preview_img
预览列表	preview_list
左按钮	arrow_prev
右按钮	arrow_next
小图列表	preview_items
产品详细信息区域	itemInfo_wrap （右侧部分）
头部名称	sku_name skull 头骨
新闻	news
摘要	summary
评价	remark
价格摘要	summary_price
配送至	summary_stock
支持	summary_support
选择	choose
选择按钮组	choose_btns
选择数量	choose_amount
减去	reduce
加入购物车	addshopcar
产品细节	product_detail （ detail描述）
左侧边	aside
详细描述	detail

2). 面包屑导航

crumb_wrap 面包屑导航
关于面包屑导航的由来是源于一则童话故事的一个词语：汉泽尔和格蕾特尔两个人在穿过森林是，为了避免找不到回家的路，他们在沿途走过的地方都会撒下面包屑以便于根据这些面包屑找到回家的路。

3). 产品介绍模块

1号盒子本模块命名为产品模块 product_intro （ introduction介绍）
此模块不要给高度因为右侧的模块内容高度不固定
里面有2个盒子分为是2号盒子和 3号盒子
2号盒子为预览区域 preview_wrap 给宽度，给高度，左浮动
3号盒子为产品详细信息区域 itemInfo_wrap 给宽度，不要给高度左侧浮动
4). 预览区域制作

1号盒子为图片预览命名为 preview_img 注意里面的图片，我们切图的时候是 398*398 像素的
2号盒子为预览列表命名为 preview_list
3.1 preview_list 制作

盒子有左右按钮 arrow_prev arrow_next 用定位即可
中间用 ul 命名为 list-item 给宽度和高度然后 margin: 0 auto; 水平居中对齐即可
5). 产品详细信息区域制作 itemInfo_wrap

此盒子命名为 itemInfo
1 号盒子为头部 sku_name
2 号盒子为最新新闻 news
3号盒子为产品详细摘要我们命名为 summary （摘要的意思）之所以下面都是摘要部分，因为里面格式基本相同。

下面为详细命名

名称	说明
头部名称	sku_name skull 头骨
新闻	news
摘要	summary
评价	remark
价格摘要	summary_price
促销摘要	summary_promotion
配送至	summary_stock
支持	summary_support
选择	choose
选择版本	choose_version
选择类型	choose_type
选择按钮组	choose_btns
选择数量	choose_amount add 是加的意思
减去	reduce cursor: not-allowed; 禁止符号
加入购物车	addshopcar

按dl dt dd来写

6). 产品细节模块 product_detail

大盒子为 product_detail 模块不要给高度，别忘记清除浮动
1号盒子左侧浮动命名为 aside 有宽度不给高度
2号盒子右侧浮动命名为 detail 有宽度不给高度
6.1) aside 布局

1 号盒子命名为 tab_list 给高度就好了，里面放 ul 和 li 注意这是 tab栏切换布局
2 号盒子命名为 tab_con 里面还包含很多个ul.item 和上面的 tab_list 里面的li一一对应。
6.2) detail 布局

1 号盒子命名为 detail_tab_list 给高度就好了，里面放 ul 和 li 注意这是 tab栏切换布局
2 号盒子命名为 detail_tab_con 里面还包含很多个ul.item 和上面的 tab_list 里面的li一一对应。
## 7. 注册页面 register

注册页面

名称	说明
注册专区	registerarea
注册内容	reg-form
错误的	error
成功的	success
默认的	default

品优购项目——div+css的静态页面

1.首页布局

引入ico图标

SEO三元素

font-icon

命名集合：

1). shortcut 制作

中间的竖线

2). header 制作

LOGO区域

3). nav 制作

2). footer 底部制作

3). mod_service 服务模块制作

4). main 主体模块制作

5). newsflash 新闻快报模块

6). news 新闻模块

7). lifeservice 生活服务模块

8). recommend 推荐模块

1). 楼层区 floor

2). 家用电器模块

3). box-hd 模块

4). box-bd 模块

5). 侧边栏 fixedtool 制作

2. 列表页制作

1). 列表页准备工作

2). 列表页 header 和 nav 修改

3). 列表页主体盒子 sk _container

4). sk_goods 布局

5). 分页制作 page

1). 详情页 detail.html 常用单词

2). 面包屑导航

3). 产品介绍 模块

4). 预览区域制作

3.1 preview_list 制作

5). 产品详细信息区域制作 itemInfo_wrap

6). 产品细节模块 product_detail

6.1) aside 布局

6.2) detail 布局

7.1 registerarea布局

日月彗心

引用和评论

vue2移动端电商项目，商城，仿蘑菇街（总结）

CSS grid 布局如何添加分隔线?

问题记录

Html&Css测试试题（简单版）

浏览器如何确定最终的CSS属性值？解析计算优先级与规则

刷新iframe的几个方法，管你跨不跨域

在线考试答题系统（Web+H5+小程序）开发方案与实现附源代码

3). 产品介绍模块