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

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

1.首页布局

引入ico图标

favicon.ico的制作和插入

SEO三元素

网站的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的写法

  
    
  
        
        
  
                品优购
            
        

  将超链接作为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

7.1 registerarea布局