typora-copy-images-to: media
第01阶段.WEB基础:品优购-day04笔记-品优购项目的详情页
一、品优购项目(四)
学习目标
- 布局 品优购项目的详情页 detail.html
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 |
1) 面包屑导航 crumb_wrap
- 详情页的主体内容主体 大盒子 de_container
- 主体里面,放着面包屑导航 crumb_wrap
- 关于面包屑导航的由来是源于一则童话故事的一个词语:汉泽尔和格蕾特尔两个人在穿过森林是,为了避免找不到回家的路,他们在沿途走过的地方都会撒下面包屑以便于根据这些面包屑找到回家的路。
2) 产品介绍 模块 product_intro ( introduction介绍)
- 1号盒子 本模块 命名为产品模块 product_intro ( introduction介绍)
- 此模块不要给高度 因为右侧的模块内容高度不固定
- 里面有2个盒子 分为是2号盒子 和 3号盒子
- 2号盒子为 预览区域 preview_wrap 给宽度,给高度, 左浮动
- 3号盒子为 产品详细信息区域 itemInfo_wrap 给宽度 ,不要给高度 右侧浮动
a. 预览区域制作 preview_wrap
- 1号盒子 为 图片预览 命名为 preview_img 注意里面的图片,我们切图的时候是 398*398 像素的
- 2号盒子 为 预览列表 命名为 preview_list
① 图片预览 preview_img
② 预览列表 preview_list
- 盒子 有左右按钮 arrow_prev arrow_next 用定位即可
- 中间 用 ul 命名为 list-item 给宽度和高度 然后 margin: 0 auto; 水平居中对齐即可
b. 产品详细信息区域制作 itemInfo_wrap
-
此盒子命名为 itemInfo_wrap
-
1 号盒子 为 头部 sku_name
-
2 号盒子 为 最新新闻 news
-
3号盒子 为 产品详细摘要 我们命名为 summary (摘要的意思) 之所以下面都是摘要部分,因为里面格式基本相同。
c. 下面为详细命名的 单词
名称 | 说明 |
---|---|
头部名称 第一行标题 | 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; 禁止符号 |
加入购物车 | addcar |
3) 产品细节模块 product_detail
- 大盒子为 product_detail 模块 不要给高度 ,别忘记清除浮动
- 1号盒子 左侧浮动 命名为 aside 有宽度 不给高度
- 2号盒子 右侧浮动 命名为 detail 有宽度不给高度
a. aside 布局
- 1 号盒子 命名为 tab_list 给高度就好了 ,里面 放 ul 和 li 注意这是 tab栏切换布局
- 2 号盒子 命名为 tab_con 里面还包含 很多个ul.item 和 上面的 tab_list 里面的li一一对应。
b. detail 布局
- 1 号盒子 命名为 detail_tab_list 给高度就好了 ,里面 放 ul 和 li 注意这是 tab栏切换布局
- 2 号盒子 命名为 detail_tab_con 里面还包含 很多个ul.item 和 上面的 tab_list 里面的li一一对应。
2. 注册页面 register (课后练习)
注册页 register.html 常用单词
注册页面我把结构划分好了,大家参考下面的结构说明和类名,完成注册页面的练习。
名称 | 说明 |
---|---|
注册专区 | registerarea |
注册内容 | reg-form |
错误的 | error |
成功的 | success |
默认的 | default |
1) 头部 header 的布局
参考上图的1号盒子
2) 主体内容 registerarea布局
3) 页脚 footer
注册页面的页脚,比首页和列表页的页脚简单的多,给些超链接就可以了。
二、课程总结
- html 我们学的就是常用标签, 就是基本盒子
- css 就是用来美化布局网页。
- html+css 是没有逻辑可言的,基本就是搭积木摆放盒子的过程,你需要的是耐心。
- 对同学们来说,现在最困难的是 布局结构 。欠缺分析页面布局的能力
- 多看别人写的页面,模仿人家的布局,每次写页面总会有新的收获。
- 错误总是在所难免,一定要学会利用chrome 调试工具, 他们能快速帮我们排查错误。你还需要细心。
- 学好定位,对后面学习JavaScript 有很大的帮助。
- 后面的课程会更精彩,尽情期待。。。