加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
detail.html 21.89 KB
一键复制 编辑 原始数据 按行查看 历史
Rofu 提交于 2016-11-23 11:08 . f
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>详情页</title>
<link rel="stylesheet" type="text/css" href="css/detail.css"/>
<link rel="stylesheet" type="text/css" href="libs/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/detail.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.imagezoom.min.js"></script>
<script src="libs/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
<script src="libs/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--头部-->
<div id="loadHeader">
</div>
<!--<script type="text/javascript">
$('#loadHeader').load('header.html')
</script>-->
<!--商品详情-->
<div id="detailContainer">
<!--路径-->
<div id="nav">
<ul>
<li>&lt;&lt;<a href="#">手机数码/电脑办公</a>&nbsp;<span>|</span>&nbsp;</li>
<li><a href="#">电脑整机</a>&nbsp;<span>|</span>&nbsp;</li>
<li><a href="#">笔记本电脑</a> 苹果</li>
</ul>
</div>
<!--banner 商品简介-->
<div id="detailBanner">
<div id="bannerNav-left">
<div class="box">
<div class="tb-booth tb-pic tb-s310">
<a href="images/01.jpg"><img src="img/pic-1.jpg" alt="" rel="img/pic-1.jpg" class="jqzoom" /></a>
</div>
<ul class="tb-thumb" id="thumblist">
<li class="tb-selected"><div class="tb-pic tb-s40"><a href="#"><img src="img/pic-1.jpg" mid="img/pic-1.jpg" big="img/pic-1.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="img/pic-2.jpg" mid="img/pic-2.jpg" big="img/pic-2.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="img/pic-3.jpg" mid="img/pic-3.jpg" big="img/pic-3.jpg"></a></div></li>
<li><div class="tb-pic tb-s40"><a href="#"><img src="img/pic-4.jpg" mid="img/pic-4.jpg" big="img/pic-4.jpg"></a></div></li>
</ul>
<div id="Num">
<li>商品编号:158562632636</li>
<li>收藏</li>
<li>分享&nbsp;<i></i></li>
</div>
</div>
<div id="text">
<div id="text-top">
<p>
<h3>苹果(Apple)MacBook Air MMGF2CH/A 13.3英寸宽屏笔记本电脑</h3>
<span>加量不加价,8GB 1600MHz LPDDR3内存,进一步提升性价比,然而价格不变!</span>
</p>
<dl>
<dt>闪购价<span>¥6199.00</span><i>¥6988.0</i></dt>
<dd>好评率<span>100</span>%(共<span>31</span>条评价)</dd>
</dl>
<p>&nbsp;&nbsp;&nbsp;由百联云商提供发货和售后服务</p>
<ul>
<li><a href="#">运费说明</a></li>
<li>不支持到店自提</li>
<li>不支持7天无理由退货</li>
<li>支付方式</li>
</ul>
</div>
<div id="text-bottom">
<li>
<span>购买数量</span>
<dl>
<dt><input type="text" id="count" value="1"/></dt>
<dd>+</dd>
<dd>-</dd>
</dl>
</li>
<li>
<button class="buy">立即购买</button>
<button class="add">加入购物车</button>
<i>手机掌上购买</i>
</li>
</div>
</div>
</div>
<div id="bannerRight">
<div id="brank-logo">
<a href="#"><img src="img/Apple.jpg"/></a>
苹果
</div>
<dl>
<dt>-----大家都在买-----</dt>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
</dl>
<li>换一换</li>
</div>
</div>
<div class="clear"></div>
<!--商品详细介绍-->
<div id="productIntroduce">
<!--左栏-->
<div id="PI-left">
<dl>
<dt>看了又看</dt>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
</dl>
<dl>
<dt>看了又买了</dt>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
<dd>
<a href="#">
<img src="img/pic-1.jpg"/>
<span>¥7488.0</span>
<a href="#">苹果(Apple)MacBook ...</a>
</a>
</dd>
</dl>
</div>
<!--右栏-->
<div id="PI-right">
<div id="PI-rightNav">
<ul class="nav nav-tabs">
<li class="active"><a href="#">商品介绍</a></li>
<li><a href="#">参数包装</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">评价详情</a></li>
</ul>
</div>
<div id="PI-rightNav-detail">
<div id="describe" class="boxShow">
<span>温馨提示:此商品介绍为MacBook Air系列的整体介绍,因具体型号不同,详细参数以“参数规格”页面为准。</span><br />
<span>此商品主要配置为CPU型号Intel Core i5、内存8G、闪存128G、13.3 英寸、OS X El Capitan操作系统、银色</span>
<br /><br />
<img src="img/mco-1.jpg"/>
<img src="img/mco-2.jpg"/>
</div>
<div id="argument" class="boxShow">
<div class="parameters">
<strong>包裹清单</strong>
</div>
<div class="detail-line clearfix">
<div class="detail-title">包裹清单</div>
<div class="detail">MacBook Air*1 电源适配器*1 交流电源插头*1 电源线*1</div>
</div>
<div class="parameters"><strong>主体</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">型号</div>
<div class="detail">MMGF2CH/A</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">电脑种类</div>
<div class="detail">家用</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">平台</div>
<div class="detail">Intel平台</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">预装系统</div>
<div class="detail">Mac OS X</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">定位</div>
<div class="detail">商务办公本</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">机身颜色</div>
<div class="detail">银色</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">外壳颜色</div>
<div class="detail">银色</div>
</div>
<div class="parameters"><strong>CPU</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">CPU型号</div>
<div class="detail"> Intel Core i5</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">CPU核心数</div>
<div class="detail">双核</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">CPU系列</div>
<div class="detail">酷睿i5</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">CPU速度</div>
<div class="detail">最高可达 2.7GHz</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">CPU类型</div>
<div class="detail">Intel Core i5 处理器</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">CPU三级缓存</div>
<div class="detail">3MB</div>
</div>
<div class="parameters"><strong>产地</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">产地</div>
<div class="detail">中国</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">进口/国产</div>
<div class="detail">国产</div>
</div>
<div class="parameters"><strong>光驱</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">光驱</div>
<div class="detail">无光驱</div>
</div>
<div class="parameters"><strong>其它设备</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">指纹识别</div>
<div class="detail">不支持指纹识别</div>
</div>
<div class="parameters"><strong>内存</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">内存容量</div>
<div class="detail">8GB</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">内存类型</div>
<div class="detail">DDR3</div>
</div>
<div class="parameters"><strong>售后服务</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">售后服务</div>
<div class="detail">全国联保</div>
</div>
<div class="parameters"><strong>多媒体设备</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">内置摄像头</div>
<div class="detail">有摄像头</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">内置麦克风</div>
<div class="detail">内置麦克风</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">扬声器</div>
<div class="detail">内置扬声器</div>
</div>
<div class="parameters"><strong>显卡</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">显卡芯片</div>
<div class="detail">Intel HD Graphics 6000 图形处理器</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">显卡类型</div>
<div class="detail">核芯显卡</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">显存容量</div>
<div class="detail">共享系统内存</div>
</div>
<div class="parameters"><strong>显示器</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">尺寸</div>
<div class="detail">13英寸</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">物理分辨率</div>
<div class="detail">1440 x 900</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">屏幕尺寸</div>
<div class="detail">13.3 英寸 </div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">屏幕比例</div>
<div class="detail">宽屏16:10</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">屏幕类型</div>
<div class="detail"> LED 背光光面宽显示屏</div>
</div>
<div class="parameters"><strong>显示屏</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">触摸屏</div>
<div class="detail">非触摸屏</div>
</div>
<div class="parameters"><strong>电池</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">电池</div>
<div class="detail">内置 54 瓦时锂聚合物电池</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">续航时间</div>
<div class="detail">12小时左右,视具体使用环境而定</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">电源适配器</div>
<div class="detail">45W MagSafe 2 电源适配器 (带线缆管理系统);MagSafe 2 电源适配器端口</div>
</div>
<div class="parameters"><strong>硬盘</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">硬盘容量</div>
<div class="detail">500GB及以下</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">硬盘类型</div>
<div class="detail">SSD固态硬盘</div>
</div>
<div class="parameters"><strong>端口</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">USB接口</div>
<div class="detail">两个 USB 3 端口</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">HDMI</div>
<div class="detail">有HDMI接口</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">音频端口</div>
<div class="detail">3.5 毫米耳机插孔</div>
</div>
<div class="parameters"><strong>规格</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">外观尺寸</div>
<div class="detail">227*325*17</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">笔记本重量</div>
<div class="detail">1350g</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">重量</div>
<div class="detail">1.5kg以下</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">包装尺寸</div>
<div class="detail">227*325*17</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">包装重量</div>
<div class="detail">1350</div>
</div>
<div class="parameters"><strong>输入设备</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">键盘背光</div>
<div class="detail">有背光灯</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">触摸板</div>
<div class="detail">有触摸板</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">键盘</div>
<div class="detail">全尺寸背光键盘</div>
</div>
<div class="parameters"><strong>通信</strong></div>
<div class="detail-line clearfix">
<div class="detail-title">无线网卡</div>
<div class="detail">有无线网卡</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">蓝牙</div>
<div class="detail">支持蓝牙</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">蓝牙版本</div>
<div class="detail">蓝牙4.0</div>
</div>
</div>
<div id="serve" class="boxShow">
<div class="parameters">
<strong>售后服务</strong>
</div>
<div class="detail-line clearfix">
<div class="detail-title">服务电话</div>
<div class="detail">4006668800</div>
</div>
<div class="detail-line clearfix">
<div class="detail-title">服务范围</div>
<div class="detail">7日内退货,15日内换货,15日以上在质保期内享受免费保修等三包服务</div>
</div>
</div>
<div id="evaluate" class="boxShow">
<div id="evaluate-data">
<dl>
<dt>商品好评率<br /><span>100%</span></dt>
<dd class="score">
<i>好评</i>
<span></span>
</dd>
<dd class="see">
优质评价攻略<br />
<button>我要评价</button><br />
<a href="#">前5条评论可获得双倍积分</a>[<a href="#">规则</a>]
</dd>
</dl>
</div>
<div id="evaluate-Nav">
<ul>
<li><a href="#" class="aclick">全部评论(<span>31</span></a></li>
<li><a href="#">好评(<span>31</span></a></li>
<li><a href="#">中评(<span>0</span></a></li>
<li><a href="#">差评(<span>0</span></a></li>
<li><a href="#">有晒单(<span>0</span></a></li>
<li><a href="#">追评(<span>0</span></a></li>
</ul>
</div>
<div id="evaluate-detail">
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
<dl>
<dt>
<img src="img/head.png"/><br />
<b>用户名</b><br />
<span>2016-10-01-0:00</span><br />
<span>购买</span>
</dt>
<dd class="star">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</dd>
<dd class="content">正品!!!!!!!!!!</dd>
<dd class="time">2016-09-24 19:17</dd>
</dl>
</div>
</div>
</div>
<div class="clear"></div>
<div id="page">
<dl>
<dt class="Up">上一页</dt>
<dd class="page-active">1</dd>
<dd>2</dd>
<dd>3</dd>
<dd>4</dd>
<dt class="Down">下一页</dt>
</dl>
</div>
</div>
</div>
</div>
<!--最近浏览及推荐-->
<!--最近浏览-->
<div id="history">
<h3>最近浏览</h3>
<ul>
<li>
<a href="#"><img src="img/goods-1.jpg"/></a>
<p><b>¥999</b></p>
</li>
<li>
<a href="#"><img src="img/goods-1.jpg"/></a>
<p><b>¥999</b></p>
</li>
</ul>
</div>
<!--footer-->
<div id="detailFooter">
</div>
<script type="text/javascript">
$('#detailFooter').load('footer.html')
</script>
<!--右侧悬浮窗-->
<div id="suspension">
</div>
<script type="text/javascript">
$('#suspension').load('right-nav.html')
</script>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化