HTML作业-商城网页
2024-04-10 08:12:54
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>部分网页截图
HTML作业-商城网页相关推荐
- HTML作业-花店网页商城
HTML期末大作业-花店网页商城,共5个页面(HTML+CSS+JavaScript) 部分网页源码 <html lang="en"> <!--<![end ...
- 期末作业代码网页设计代码——网站商城后台通用模板(30页) 大学生后台模板网页作品商城网页设计作业模板 学生网页制作源代码下载
HTML5期末大作业:商城后台网站设计--网站商城后台通用模板(30页) 大学生后台模板网页作品商城网页设计作业模板 学生网页制作源代码下载 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅 ...
- 网页成品——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- HTML5期末大作业：手表商城网站设计——手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品
HTML5期末大作业:手表商城网站设计--手表商城网站模板源码(17页) web期末作业设计网页_手表商城网页设计作业成品 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
- DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...
- HTML5期末大作业：化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...
- HTML5期末大作业：淘宝网站设计——仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计
HTML5期末大作业:淘宝网站设计--仿2021淘宝首页(1页) 大学生网页制作教程 表格布局网页模板 学生HTML静态水网页设计作业成品 简单网页制作代码 学生商城网页作品免费设计 常见网页设计作业 ...
- HTML+CSS+JS商城网站设计——蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作 简单静态HTML网页作品 商城网页作业成品 网购网站模板
HTML5期末大作业:蛋糕团购商城网站设计--蛋糕团购商城模板 (4页) 蛋糕团购网页设计制作 简单静态HTML网页作品 商城网页作业成品 一.作品展示 二.文件目录 三.代码实现 <!doct ...
- HTML5期末大作业：服装购物网站设计——粉色服装购物商城(4页) 服装购物商城网页设计作品 大学生购物专题网页设计作业模板 商店静态HTML网页模板下载
HTML5期末大作业:服装购物网站设计--粉色服装购物商城(4页) 服装购物商城网页设计作品 大学生购物专题网页设计作业模板 商店静态HTML网页模板下载 常见网页设计作业题材有 个人. 美食. 公司 ...
最新文章
- Mach-O 的动态链接（Lazy Bind 机制）
- 什么是量子计算-超级简单的给你个解释
- YunYang1994/tensorflow-yolov3 IndexError: list index out of range 解决办法
- 合并工具_分享一个SM to HISM合并工具
- 西欧八国调查：25%受访者宁要AI政府也不要民选政治家
- libcurl 多线程使用注意事项 - Balder~专栏 - 博客频道 - CSDN.NET
- MapXtreme2004 连接oracle spatial的问题
- Halcon：标准标定板的自制方法
- python和java哪个好学-到底学python好还是学java比较好 哪个容易学习点
- 解决vcard乱码批量导入outlook
- 三位物理学家与陶哲轩证明的惊天定理，原来早在教科书里吗？
- SqlServer 2008还原数据库步骤
- 【ps功能精通】6.钢笔工具
- B站大佬开发的这款无障碍看片神器火了，我有一个大胆的想法...
- 循迹小车智能搬运：调车篇
- KONICA MINOLTA 423SeriesPS-8打印机驱动
- SVN检出报错，SVN更新时忽略指定文件或文件夹
- Nginx配置及常用配置
- 荷露叮咚wp建站系列视频课程.3WordPress功能菜单介绍
- 【Dash搭建可视化网站】项目1：使用Dash创建简单网页