我的项目代码
小结：对于DIV+CSS的盒子模型的布局练习
对于favicon.ico，网页的seo，CSS精灵图，浮动和定位，表单，无序列表和自定义列表等设置更加纯熟
1.首页布局
引入ico图标
favicon.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 |