HTML作业-商城网页（HTML+CSS+JavaScript）共四个页面！
部分网页源码
<!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>
<ul class="two">
<li>
<img src="upload/aside_img.jpg">
<h5>华为全面屏徕卡华为全面屏徕卡华为全面屏徕卡华为全面屏徕卡</h5>
<div class="aside_price">&299</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
</ul>
<ul class="two">
<li>
<img src="upload/aside_img.jpg">
<h5>华为全面屏徕卡华为全面屏徕卡华为全面屏徕卡华为全面屏徕卡</h5>
<div class="aside_price">&299</div>
<a href="#" class="as_addcar">加入购物车</a>
</li>
</ul>
<ul class="two">
<li>
<img src="upload/aside_img.jpg">
<h5>华为全面屏徕卡华为全面屏徕卡华为全面屏徕卡华为全面屏徕卡</h5>
<div class="aside_price">&299</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>商品评价（5000）</li>
</ul>
</div>
<div class="detail_tab_con">
<div class="item">
<ul>
<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">查看更多参数<i class="arrow"></i></a>
</p>
<img src="upload/detail_img1.jpg" alt="">
<img src="upload/detail_img2.jpg" alt="">
<img src="upload/detail_img3.jpg" alt="">
</div>
</div>
</div>
</div>
</div>
<!--详情页内容部分-->
<!--footer开始-->
<div class="footer">
<div class="w">
<div class="mod_service">
<ul>
<li>
<i class="mod-service-icon mod_service_zheng"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod-service-icon mod_service_kuai"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod-service-icon mod_service_bao"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod-service-icon mod_service_kuai"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
<li>
<i class="mod-service-icon mod_service_kuai"></i>
<div class="mod_service_tit">
<h5>正品保障</h5>
<p>正品保障，提供发票</p>
</div>
</li>
</ul>
</div>
<div class="mod_help">
<dl class="mod_help_item">
<dt> 购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item">
<dt> 购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item">
<dt> 购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item">
<dt> 购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item">
<dt> 购物指南</dt>
<dd><a href="#">购物流程</a></dd>
<dd><a href="#">会员介绍</a></dd>
<dd><a href="#">生活旅行</a></dd>
<dd><a href="#">常见问题</a></dd>
<dd><a href="#">联系客服</a></dd>
</dl>
<dl class="mod_help_item mod_help_app">
<dt>帮助中心</dt>
<dd><img src="upload/erweima.png">
<p>品优购客户端</p></dd>
</dl>
</div>
<div class="mod_copyright">
<p class="mod_copyright_links">关于我们 | 联系我们 | 联系客服 | 商家入驻 | 营销中心 | 手机品优购 | 友情链接 | 销售联盟 | 品优购社区 | 品优购公益 | English Site | Contact U</p>
<p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn
<br>京ICP备08001421号京公网安备110108007702</p>
</div>
</div>
</div>
<!--footer结束-->
</body>
</html>部分网页截图
扫一扫
731
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
