1. 品优购项目(四)

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

2). 面包屑导航

3). 产品介绍模块

4). 预览区域制作

3.1 preview_list 制作

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

6). 产品细节模块 product_detail

6.1) aside 布局

6.2) detail 布局

7.详情页代码

8. 注册页面 register

8.1 registerarea布局

9.注册页代码

1. 品优购项目(四)

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

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.详情页代码

<!-- nav start --><div class="nav"><div class="w"><div class="dropdown fl"><div class="dt"> 全部商品分类 </div><div class="dd" style="display: none;">  <ul><li class="menu_item"><a href="#">家用电器</a>  <i>  </i>  </li><li class="menu_item"><a href="list.html">手机</a>   、<a href="#">数码</a>   、<a href="#">通信</a>   <i>  </i>  </li><li class="menu_item"><a href="#">电脑、办公</a>  <i>  </i>  </li><li class="menu_item"><a href="#">家居、家具、家装、厨具</a>  <i>  </i>  </li><li class="menu_item"><a href="#">男装、女装、童装、内衣</a>  <i>  </i>  </li><li class="menu_item"><a href="#">个户化妆、清洁用品、宠物</a>  <i>  </i>  </li><li class="menu_item"><a href="#">鞋靴、箱包、珠宝、奢侈品</a>  <i>  </i>  </li>        <li class="menu_item"><a href="#">运动户外、钟表</a>  <i>  </i>  </li><li class="menu_item"><a href="#">汽车、汽车用品</a>  <i>  </i>  </li><li class="menu_item"><a href="#">母婴、玩具乐器</a>  <i>  </i>  </li><li class="menu_item"><a href="#">食品、酒类、生鲜、特产</a>  <i>  </i>  </li><li class="menu_item"><a href="#">医药保健</a>  <i>  </i>  </li><li class="menu_item"><a href="#">图书、音像、电子书</a>  <i> </i>  </li><li class="menu_item"><a href="#">彩票、旅行、充值、票务</a>  <i> </i>  </li><li class="menu_item"><a href="#">理财、众筹、白条、保险</a>  <i>  </i>  </li></ul></div></div><!-- 右侧导航 --><div class="navitems fl"><ul><li><a href="#">服装城</a></li><li><a href="#">美妆馆</a></li><li><a href="#">传智超市</a></li><li><a href="#">全球购</a></li><li><a href="#">闪购</a></li><li><a href="#">团购</a></li><li><a href="#">拍卖</a></li><li><a href="#">有趣</a></li></ul>                                                </div></div></div><!-- nav end --><!-- 详情页内容部分     --><div class="de_container w"><!-- 面包屑导航 --><div class="crumb_wrap"><a href="#">手机、数码、通讯</a>   〉  <a href="#">手机   </a>〉  <a href="#">Apple苹果   </a>〉  <a href="#">iphone 6S Plus系类</a> </div><!-- 产品介绍模块 --><div class="product_intro clearfix"><!-- 预览区域 --><div class="preview_wrap fl"><div class="preview_img"><img src="upload/s3.png" alt=""></div><div class="preview_list"><a href="#" class="arrow_prev"></a><a href="#" class="arrow_next"></a><ul class="list_item"><li><img src="upload/pre.jpg" alt=""></li><li class="current"><img src="upload/pre.jpg" alt=""></li><li><img src="upload/pre.jpg" alt=""></li><li><img src="upload/pre.jpg" alt=""></li><li><img src="upload/pre.jpg" alt=""></li></ul></div></div><!-- 产品详细信息 --><div class="itemInfo_wrap fr"><div class="sku_name">Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</div><div class="news">推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返</div><div class="summary"><dl class="summary_price"><dt>价格</dt><dd><i class="price">￥5299.00 </i><a href="#">降价通知</a><div class="remark">累计评价612188</div></dd></dl><dl class="summary_promotion"><dt>促销</dt><dd><em>加购价</em>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换购热销商品  详情 》</dd></dl><dl class="summary_support"><dt>支持</dt><dd>以旧换新，闲置手机回收  4G套餐超值抢  礼品购</dd></dl><dl class="choose_color"><dt>选择颜色</dt><dd><a href="javascript:;" class="current">玫瑰金</a><a href="javascript:;">金色</a><a href="javascript:;">白色</a><a href="javascript:;">土豪色</a></dd></dl><dl class="choose_version"><dt>选择版本</dt><dd><a href="javascript:;" class="current">公开版</a><a href="javascript:;">移动4G</a></dd></dl><dl class="choose_type"><dt>购买方式</dt><dd><a href="javascript:;" class="current">官方标配</a><a href="javascript:;">移动优惠购</a><a href="javascript:;">电信优惠购</a></dd></dl><div class="choose_btns"><div class="choose_amount"><input type="text" value="1"><a href="javascript:;" class="add">+</a><a href="javascript:;" class="reduce">-</a></div><a href="#" class="addcar">加入购物车</a></div></div></div></div> <!-- 产品细节模块 product_detail   --><div class="product_detail clearfix">   <!-- aside --><div class="aside fl"><div class="tab_list"><ul><li class="first_tab ">相关分类</li><li class="second_tab current">推荐品牌</li></ul></div><div class="tab_con"><ul><li><img src="upload/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li><li><img src="upload/aside_img.jpg" alt=""><h5>华为 HUAWEI P20 Pro 全面屏徕卡</h5><div class="aside_price">¥19</div><a href="#" class="as_addcar">加入购物车</a></li></ul></div></div><!-- detail --><div class="detail fr"><div class="detail_tab_list"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价（50000）</li><li>手机社区</li></ul></div><div class="detail_tab_con"><div class="item"><ul class="item_info"><li>分辨率：1920*1080(FHD)</li><li>后置摄像头：1200万像素</li><li>前置摄像头：500万像素</li><li>核      数：其他</li><li>频      率：以官网信息为准</li><li>品牌： Apple ♥关注</li><li>商品名称：APPLEiPhone 6s Plus</li><li>商品编号：1861098</li><li>商品毛重：0.51kg</li><li>商品产地：中国大陆</li><li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li><li>系统：苹果（IOS）</li><li>像素：1000-1600万</li><li>机身内存：64GB</li></ul><p> <a href="#" class="more">查看更多参数</a></p><img src="upload/detail_img1.jpg" alt=""><img src="upload/detail_img2.jpg" alt=""><img src="upload/detail_img3.jpg" alt=""></div>

/*详情页的样式文件*/
.de_container {margin-top: 20px;
}
.crumb_wrap {height: 25px;
}
.crumb_wrap a {margin-right: 10px;
}
.preview_wrap {width: 400px;height: 590px;
}
.preview_img {height: 398px;border: 1px solid #ccc;
}
.preview_list {position: relative;height: 60px;margin-top: 60px;
}
.list_item {width: 320px;height: 60px;margin: 0 auto;
}
.list_item li {float: left;width: 56px;height: 56px;border: 2px solid transparent;margin: 0 2px;
}
.list_item li.current {border-color: #c81623;
}
.arrow_prev,
.arrow_next {position: absolute;top: 15px;width: 22px;height: 32px;background-color: purple;
}
.arrow_prev {left: 0;background: url(../img/arrow-prev.png) no-repeat;
}
.arrow_next {right: 0;background: url(../img/arrow-next.png) no-repeat;
}
.itemInfo_wrap {width: 718px;
}
.sku_name {height: 30px;font-size: 16px;font-weight: 700;
}
.news {height: 32px;color: #e12228;
}
.summary dl {overflow: hidden;
}
.summary dt,
.summary dd {float: left;
}
.summary dt {width: 60px;padding-left: 10px;line-height: 36px;
}
.summary_price ,
.summary_promotion {position: relative;padding: 10px 0;background-color: #fee9eb;
}
.price {font-size: 24px;color: #e12228;
}
.summary_price a {color: #c81623;
}
.remark {position: absolute;right: 10px;top: 20px;
}
.summary_promotion {padding-top: 0;
}
.summary_promotion dd {width: 450px;line-height: 36px;
}
.summary_promotion em {display: inline-block;width: 40px;height: 22px;background-color: #c81623;text-align: center;line-height: 22px;color: #fff;
}
.summary_support dd {line-height: 36px;
}
.choose_color a {display: inline-block;width: 80px;height: 41px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 41px;
}
.summary a.current {border-color: #c81623;
}
.choose_version  {margin: 10px 0;
}
.choose_version a,
.choose_type a {display: inline-block;height: 32px;padding: 0 12px;background-color: #f7f7f7;border: 1px solid #ededed;text-align: center;line-height: 32px;
}
.choose_btns {margin-top: 20px;
}
.choose_amount {position: relative;float: left;width: 50px;height: 46px;background-color: pink;
}
.choose_amount input {width: 33px;height: 44px;border: 1px solid #ccc;text-align: center;
}
.add,
.reduce {position: absolute;right: 0;width: 15px;height: 22px;border: 1px solid #ccc;background-color: #f1f1f1;text-align: center;line-height: 22px;
}
.add {top: 0;}
.reduce {bottom: 0;/*禁止鼠标样式*/cursor: not-allowed;   /* pointer  小手  move  移动  */
}
.addcar {float: left;width: 142px;height: 46px;background-color: #c81623;text-align: center;line-height: 46px;font-size: 18px;color: #fff;margin-left: 10px;font-weight: 700;
}
.product_detail {margin-bottom: 50px;
}
.aside {width: 208px;border: 1px solid #ccc;
}
.tab_list {overflow: hidden;height: 34px;
}
/*把背景颜色 底边框都给 li*/
.tab_list li {float: left;background-color: #f1f1f1;border-bottom: 1px solid #ccc;height: 33px;text-align: center;line-height: 33px;
}
/*鼠标单击 li 变化样式   背景变白色 去掉下边框 文字变颜色*/
.tab_list .current {background-color: #fff;border-bottom: 0;color: red;
}
.first_tab {width: 104px;
}
.second_tab {width: 103px;border-left: 1px solid #ccc;
}
.tab_con {padding: 0 10px;
}
.tab_con li {border-bottom: 1px solid #ccc;
}
.tab_con li h5 {/*超出的文字省略号显示*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-weight: 400;
}
.aside_price {font-weight: 700;margin: 10px 0;
}
.as_addcar {display: block;width: 88px;height: 26px;border: 1px solid #ccc;background-color: #f7f7f7;margin: 10px auto;text-align: center;line-height: 26px;
}
.detail {width: 978px;
}
.detail_tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;
}
.detail_tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;
}
.detail_tab_list .current {background-color: #c81623;color: #fff;
}
.item_info {padding: 20px 0 0 20px;
}
.item_info li {line-height: 22px;
}
.more {float: right;font-weight: 700;font-family: 'icomoon';
}

8. 注册页面 register

注册页面

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

8.1 registerarea布局

9.注册页代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册页面</title><!-- 初始化css --><link rel="stylesheet" href="css/base.css"><!-- register css文件 --><link rel="stylesheet" href="css/register.css">
</head>
<body><div class="w"><!-- header --><div class="header"><div class="logo"><a href="index.html"><img src="img/logo.png" alt=""></a></div></div><!-- registerarea --><div class="registerarea"><h3>注册新用户<em>我有账号，去<a href="login.html">登陆</a></em></h3><div class="reg_form"><form action="demo.php"><ul><li><label for="tel">手机号:</label><input type="text" class="inp" id="tel"><span class="error">        <i class="error_icon"></i>手机号码格式不正确，请从新输入  </span></li><li><label for="">短信验证码:</label><input type="text" class="inp"></li><li><label for="">登陆密码:</label><input type="text" class="inp"><span class="success">      <i class="success_icon"></i>恭喜您输入正确  </span></li><li class="safe">安全程度 <em class="ruo">弱</em><em class="zhong">中</em><em class="qiang">强</em>  </li><li><label for="">确认密码:</label><input type="text" class="inp"><span class="success" >      <i class="success_icon"></i>恭喜您输入正确  </span></li><li class="agree">  <input type="checkbox" >同意协议并注册<a href="#">《知果果用户协议》</a></li><li><input type="submit" value="完成注册" class="over"></li></ul></form></div></div><div class="footer"><p class="links">关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U</p><p class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>
京ICP备08001421号京公网安备110108007702</p></div></div>
</body>
</html>

.w {width: 1200px;margin: auto;
}
.header {height: 82px;border-bottom: 2px solid #b1191a;
}
.logo {padding-top: 15px;
}
.registerarea {height: 520px;border: 1px solid #ccc;margin-top: 20px;
}
.registerarea h3 {height: 40px;border-bottom: 1px solid #ccc;background-color: #ececec;padding: 0  10px;font-weight: 400;line-height: 40px;font-size: 18px;
}
.registerarea h3 em {float: right;font-size: 14px;
}
.registerarea a {color: #c81623;
}
.reg_form {width: 600px;height: 400px;.margin: 40px auto 0;
}
.reg_form li {margin-bottom: 15px;
}
.reg_form label {display: inline-block;width: 100px;height: 36px;line-height: 36px;text-align: right;
}
.inp {width: 238px;height: 34px;border: 1px solid #ccc;margin-left: 10px;
}
.error {color: #df3033;margin-left: 10px;
}
.error_icon,
.success_icon {display: inline-block;width: 20px;height: 20px;background: url(../img/error.png) no-repeat;vertical-align: middle;margin-top: -2px;
}
.success {color: #40b83f;margin-left: 10px;
}
.success_icon {background-image: url(../img/success.png);
}
.safe {padding-left: 187px;color: #b2b2b2;
}
.safe em {padding: 0 12px;color: #fff;
}
.ruo {background-color: #de1111;
}.zhong {background-color: #40b83f;
}.qiang {background-color: #f79100;
}
.agree {padding-top: 20px;padding-left: 100px;
}
.agree  input {vertical-align: middle;margin-right: 5px;
}
.agree  a {color: #1ba1e6;
}
.over {width: 200px;height: 34px;background-color: #c81623;margin: 30px 0 0 130px;border: none;color: #fff;font-size: 14px;}
.footer {height: 120px;text-align: center;
}
.links {margin-top: 20px;height: 30px;
}
.copyright {line-height: 20px;
}

CSS综合案例-品优购电商04相关推荐

项目二《品优购电商网站》
项目二 <品优购电商项目开发> 文章目录项目二 <品优购电商项目开发> 前言一.网站 favicon 图标制作favicon图标二.TDK三大标签SEO优化 SEO T ...
基于HTML+CSS+JavaScript (品优购)电商购物项目的设计与实现（计算机毕业设计）
HTML5期末大作业:电商网站设计--仿品优购 (毕业设计含论文) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
基于HTML(品优购)电商项目项目的设计与实现（html前端源码和论文设计）
XXXX职业学院毕业论文题目: 基于HTML品优购项目的设计与实现所属系部: 信息工程学院专业班级: 学生姓名: 指导教师: 2020 年 11 月 29 日摘要品优购网上商城是 ...
【03】品优购电商项目：00-品优购项目代码规范
文章目录代码规范 1. 概述 HTML规范图片规范 CSS规范命名规范 2. HTML 规范 DOCTYPE 声明页面语言lang charset 字符集合书写风格 HTML代码大小写类型 ...
商品规格js_品优购电商系统开发第3章规格及模板管理
课程目标目标1:理解和运用angularJS的service 目标2:理解和运用控制器继承目标3:掌握代码生成器的使用目标4:实现规格管理目标5:实现模板管理 1.前端分层开发 1.1 需求分 ...
品优购电商系统开发第19章秒杀解决方案
课程目标目标1:能够说出秒杀实现思路目标2:实现秒杀频道首页功能目标3:实现秒杀商品详细页功能目标4:实现秒杀下单功能目标5:实现秒杀支付功能 1.秒杀业务分析 1.1需求分析所谓&quo ...
品优购电商系统部署----MyCat Nginx （2）
课程目标目标1:理解MyCat分片,能够配置MyCat分片目标2:掌握Nginx的安装与静态网站部署目标3:掌握Nginx的静态网站部署目标4:理解Nginx的反向代理与负载均衡,能够配置反向 ...
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例企业网站制作...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...
html静态网站基于品优购电商购物网站网页设计与实现共计3个页面 html+css+javascript网页设计实例企业网站制作
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游戏. 节日. ...

CSS综合案例-品优购电商04

1. 品优购项目(四)

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

2). 面包屑导航

3). 产品介绍模块

4). 预览区域制作

3.1 preview_list 制作

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

6). 产品细节模块 product_detail

6.1) aside 布局

6.2) detail 布局

7.详情页代码

8. 注册页面 register

8.1 registerarea布局

9.注册页代码

CSS综合案例-品优购电商04相关推荐

最新文章

热门文章

CSS综合案例-品优购电商04

1. 品优购项目(四)

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

2). 面包屑导航

3). 产品介绍 模块

4). 预览区域制作

3.1 preview_list 制作

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

6). 产品细节模块 product_detail

6.1) aside 布局

6.2) detail 布局

7.详情页代码

8. 注册页面 register

8.1 registerarea布局

9.注册页代码

CSS综合案例-品优购电商04相关推荐

最新文章

热门文章

3). 产品介绍模块