<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>手机详情页</title>
<meta name="description" content="品优购JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,品优购" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
<!--引入css初始化\公共\首页的css文件-->
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/common.css">
<link rel="stylesheet" type="text/css" href="css/detail.css">
</head>
<body>
<!--顶部块级导航start-->
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！</li>
<li>
<a href="#">请登录</a>
<a href="#" class="style-red">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li class="spacer"></li>
<li>
<a href="#">我的品优购</a>
<i class="icomoon"></i>
</li>
<li class="spacer"></li>
<li><a href="#">品优购会员</a></li>
<li class="spacer"></li>
<li><a href="#">企业采购</a></li>
<li class="spacer"></li>
<li><a href="#">关注品优购</a>
<i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">客户服务</a>
<i class="icomoon"></i></li>
<li class="spacer"></li>
<li><a href="#">网站导航</a>
<i class="icomoon"></i></li>
</ul>
</div>
</div>
</div>
<!--顶部块级导航end-->
<!--header制作-->
<div class="header w">
<!--logo-->
<div class="logo">
<h1>
<a href="index.html" title="品优购">品优购</a>
</h1>
</div>
<!--search-->
<div class="search">
<input type="text" class="text" value="请输入搜索内容">
<button class="btn">搜索</button>
</div>
<!--hotwords-->
<div class="hotwords">
<a href="#" class="style-red">优惠购首发</a>
<a href="#">亿元优惠</a>
<a href="#">9.9元团购</a>
<a href="#">美满99减30</a>
<a href="#">办公用品</a>
<a href="#">电脑</a>
<a href="#">通信</a>
</div>
<div class="shopcar"><i class="car"></i> 我的购物车<i class="arrow"></i><i class="count">8000</i></div>
</div>
<!--header结束-->
<!--nav开始-->
<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="#">家居、家具、家装、厨具</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>
</ul>
</div>
</div>
</div>
<!--nav结束-->
<!--详情页内容部分-->
<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">
</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"></li>
<li class="current"><img src="upload/pre.jpg"></li>
<li><img src="upload/pre.jpg"></li>
<li><img src="upload/pre.jpg"></li>
<li><img src="upload/pre.jpg"></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="mark">累计评价61218</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:;">移动5g</a>
</dd>
</dl>
<dl class="choose_type">
<dt>购买方式</dt>
<dd>
<a href="javascript:;" class="current">官方标配</a>
<a href="javascript:;">移动优惠购</a>
</dd>
</dl>
<div class="choose_btns">
<div class="choose_amount">
<input type="text" value="10">
<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">
<div class="aside fl">
<div class="tab_list">
<ul>
<li class="first_tab current">相关分类</li>
<li class="second_tab">推荐品牌</li>
</ul>
</div>
<div class="tab_con">
<ul class="one">
<li><a href="#">手机</a></li>
<li><a href="#">手机</a></li>
<li><a href="#">手机壳</a></li>
<li><a href="#">手机壳</a></li>
</ul>
html+css-实战电商网页制作_源码.zip （45个子文件） 
html+css-实战电商网页制作_源码 电商网页制作_源码 css 
index.css 4KB detail.css 5KB list.css 2KB register.css 2KB common.css 4KB base.css 1KB
01-字体图标测试.html 742B list.html 11KB fonts icomoon.woff 4KB icomoon.eot 4KB
icomoon.svg 8KB icomoon.ttf 4KB upload 
bg_03.png 93KB floor-1-6.png 12KB sk.png 2KB floor-1-2.png 11KB
detail_img3.jpg 30KB aside_img.jpg 5KB s3.png 81KB floor-1-3.png 13KB focus.jpg 106KB mobile.jpg 12KB floor-1-4.png 18KB detail_img1.jpg 59KB bargain.jpg 11KB floor-1-5.png 10KB pre.jpg 2KB detail_img2.jpg 41KB pic1.jpg 18KB pic.png 8KB floor-1-1.png 16KB erweima.png 12KB detail.html 13KB img clock.png 4KB logo.png 4KB error.png 2KB success.png 2KB jian.jpg 1KB icons.png 37KB arrow-prev.png 1KB arrow-next.png 1KB register.html 2KB index.html 13KB favicon.ico 4KB 品优购项目-htm+css.xmind 14.23MB资源评论
泡泡SOHO2023-07-29的样式设计简洁大方，符合现代网页的审美。
宏馨2023-07-29页制作源码提供了很多实用的功能和特效，值得推荐。
禁忌的爱2023-07-29发现这个网页制作源码的结构清晰，代码整洁规范。
滚菩提哦呢2023-07-29究这个源码，我学到了很多有关网页制作的技巧和经验。
点墨楼2023-07-29件的源码非常全面，很适合学习和实践。
小小勤~
- 粉丝: 106
- 资源: 15
最新资源
- 35 财务汇报部门历年薪酬统计图表.xlsx
- 39 财务工资发放表.xlsx
- 37 财务工资支出上半年年中总结报告.xlsx
- 38 财务分析工资年度开支表.xlsx
- 41 财务公司部门工资开支分析表.xlsx
- 40 财务分析部门工资支出图表.xlsx
- 42 部门员工工资统计表.xlsx
- 45 年度薪酬费用统计表.xlsx
- 44 人事薪酬管理台账.xlsx
- 48 工资对比分析报表模板.xls
- 47 可视化工资表自动统计1.xlsx
- 46 企业员工工资支出预算表.xlsx
- 43 工资收入对比分析表.xlsx
- 50 薪资分析图表.xlsx
- 49 薪酬数据统计分析报表excel模板.xlsx
- 年度公司薪酬调查分析方案(完整版).docx
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
