HTML5期末大作业：化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
常见网页设计作业题材
文章目录
HTML5期末大作业：化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品一、作品展示二、文件目录三、代码实现四、获取更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>亲亲网-精品团购</title><link href="css/boutiqueGroup.css" rel="stylesheet" type="text/css" /><link href="css/common.css" rel="stylesheet" type="text/css" /><link rel="shortcut icon" href="img/favicon.ico" /><script type="text/javascript" src="js/jquery-1.7.2.min.js"></script><script type="text/javascript" src="js/js.js"></script></head><body><!-- 窗口右边导航栏 --><div class="rightNav"><div class="rightNavIn"><div class="rnLoginIcon"><div class="userLogin"><img src="img/default_user_portrait.gif" width="30" height="30" /><p>未登录</p></div><div class="loginWindow">登录名<br /><input type="text" /><br /><br />登录密码 <a href="javascript:;">忘记登录密码？</a><br /><input type="text" /><br /><br /><br /><input class="ok" type="submit" value="确认" /><br /><a href="javascript:;" class="register">注册新用户</a><a href="javascript:;" class="x">X</a></div></div><ul><li><a href="javascript:;"></a><i>聊天</i></li><li><a href="javascript:;"></a><i>购物车</i></li><li><a href="javascript:;"></a><i>客服</i></li><li><a href="javascript:;"></a><i>顶部</i></li></ul><div class="closeX"></div></div> <div class="hideBar"><div class="hbBg"></div><a href="javascript:;" class="plus"></a></div></div><!-- 头部开始 --><div class="navImg"><img src="img/zcjs.png" width="143" height="378" /><button>关闭</button></div><div class="header"><div class="headerIn"><div class="hiLeft"><span>您好，欢迎来到</span> <a href="javascript:;">亲亲网</a> <a href="javascript:;">[登录]</a> <a href="javascript:;">[注册]</a></div><div class="hiRight"><ul class="demo"><li id="li01"><a href="#">我的订单</a><ul id="ul01"><li><a href="#">待付款订单</a></li><li><a href="#">待确认收货</a></li><li><a href="#">待评价交易</a></li></ul></li><li id="li02"><a href="#"> 我的收藏</a><ul id="ul02"><li><a href="#">品牌收藏</a></li><li><a href="#">店铺收藏</a></li></ul></li><li id="li03"><a href="#">客户服务</a><ul id="ul03"><li><a href="#">帮助中心</a></li><li><a href="#">售后服务</a></li><li><a href="#">客服中心</a></li></ul></li></ul></div></div></div><!-- logo开始 --><div class="logo"><div class="logoIn"><div class="logoLeft"><h1><a href="index.html" title="亲亲网"><img src="img/logo.png" width="186" height="60" />亲亲网</a></h1></div><div class="logoCenter"><div class="lcTop"><input type="text" placeholder="请输入您要搜索的关键字" /><a href="#">搜索</a></div><div class="lcBottom"><p>热门搜索：</p><ul><li><a href="javascript:;">保湿</a></li><li><a href="javascript:;">面膜</a></li><li><a href="javascript:;">洁面</a></li><li><a href="javascript:;">补水</a></li><li><a href="javascript:;">香水</a></li><li><a href="javascript:;">眼霜</a></li><li><a href="javascript:;">唇膏</a></li><li><a href="javascript:;">BB霜</a></li></ul></div></div><div class="logoRight"><ul><!-- 我的商城 --><li><a href="javasscript:;" class="myShangCheng"><span></span>我的商城<i></i></a><div class="scIn"><span><a href="javascript:;">我的用户中心></a></span><div class="ciLi"><ul><li><a href="javascript:;">站内消息(0)</a></li><li><a href="javascript:;">资讯回复(0)</a></li><li><a href="javascript:;">代金券(0)</a></li></ul><ul><li><a href="javascript:;">我的订单 >></a></li><li><a href="javascript:;">我的收藏 >></a></li><li><a href="javascript:;">我的积分 >></a></li></ul></div></div></li><li><!-- 购物车结算 --><a href="javasscript:;" class="myGouWuChe"><span></span>购物车结算<i></i></a><div class="gwcIn"><span>最新加入的商品</span><p>您的购物车中暂无商品，赶快选择心爱的商品吧！</p><div class="gwcGray"><div class="ggBtn"><a href="javascript:;">结算购物车中的商品</a></div></div></div></li></ul></div></div><!-- logo结束 --></div><!-- 导航开始 --> <div class="nav"><div class="navIn"><div class="niLeft"><h3>所有分类商品</h3><img src="img/arrow_down.png" /></div><div class="niCenter"><a href="index.html">首页</a><dt>售后服务</dt><dd><a href="#">退款与提现</a></dd><dd><a href="#">发票说明</a></dd><dd><a href="#">退换货政策</a></dd></dl><dl class="weixin"><dd><strong>手机亲亲</strong></dd><dd><a href="#"><img src="img/f2.gif" width="78" height="78" /></a></dd><dd><a href="#">下载移动客户端</a></dd></dl><dl class="weixinline"><dd><strong>亲亲微信</strong></dd><dd><a href="#"><img src="img/f1.gif" width="78" height="78" /></a></dd><dd><a href="#">亲亲官方微信</a></dd></dl></div></div><div class="fiBottom"><p><a href="javascript:;">首页</a>|<a href="javascript:;">关于我们</a>|<a href="javascript:;">联系我们</a>|<a href="javascript:;">帮助中心</a>|<a href="javascript:;">商务合作</a>|<a href="javascript:;">商家入驻</a></p><p>© - 亲亲网 版权所有， 客服热线：4000-500-775 (每天09:00-18:00) ICP备08031978号</p><span><a href="#"><img src="img/ticon_wxrz.gif" width="103" height="40" /></a><a href="#"><img src="img/ticon_kxwz.gif" width="119" height="40" /></a><a href="#"><img src="img/ticon_aqlm.gif" width="112" height="40" /></a><a href="#"><img src="img/ticon_alipay.gif" width="113" height="40" /></a><a href="#"><img src="img/ticon_tenpay.gif" width="109" height="40" /></a></span></div></div><!-- footer结束 --></body></html>
四、获取更多源码
~ 关注我，点赞博文~ 每天带你涨知识!
相关问题可以相互学习，可关注↓公Z号 获取更多源码
html大作业网页代码 化妆品购物商城网站设计——电商类化妆品购物商城(1页) HTML+CSS+JavaScript 关于电商类的HTML网页设计-----化妆品
