时间：2023-10-07 16:06:01 | 来源：网站运营
时间：2023-10-07 16:06:01 来源：网站运营
web课程设计 基于html+css+javascript+jquery女性化妆品商城：常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。
在线咨询
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" id="html"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>雅妆化妆品</title><link type="text/css" rel="stylesheet" href="css/public.css" /><link type="text/css" rel="stylesheet" href="css/index.css" /><link type="text/css" rel="stylesheet" href="css/nivo-slider.css" /><script src="js/jquery-1.7.1.js" type="text/javascript"></script><script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script><script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript"></script><script src="js/public.js" type="text/javascript"></script><script src="js/index.js" type="text/javascript"></script><!--[if IE 6]><script src="js/DD_belatedPNG_0.0.8a.js" type="text/javascript" ></script><script type="text/javascript">DD_belatedPNG.fix('.theme-default a, .theme-default .nivo-controlNav a');</script> <![endif]--></head><body id="body"><div id="div1"></div><div id="div2"> <div id="div3"><a onclick="closeShow()">关闭</a></div> <form action="#" method="post"> <p class="shuru name"><input type="text" name="uname" id="name" onfocus="name_onfocus()" onblur="name_onblur()" onmouseover="over(this.id)" onmouseout="out(this.id)"/> <span id="mz">用户名</span> </p> <p class="shuru"><input type="password" name="pws" id="pws" onfocus="pws_onfocus()" onblur="pws_onblur()" onmouseover="over(this.id)" onmouseout="out(this.id)"/> <span id="mm">密码</span> </p> <div class="auto"> <p> <input type="checkbox" id="jizhu" checked="checked" /> <label for="jizhu">下次自动登录</label> </p> <a>忘记密码？</a> <div class="clear"></div> </div> <p><input type="submit" value="登录" id="anniu"/></p> <p class="zhuce"><span>还没有雅妆账号？</span><a>立即注册</a></p> </form> <div id="div4"> <p>还可以使用以下方式登录</p> <ul> <li><img src="images/qq-logo.jpg" alt="qq登录" /></li> <li><img src="images/sina-logo.jpg" alt="sina登录" /></li> <div class="clear"></div> </ul> </div></div><div id="wrap"> <div id="top"> <div class="top_inner"> <p>Hi,欢迎来到雅妆！</p> <ul> <li><a onclick="show()">登陆</a></li> <li><a href="#">注册</a></li> <li><a href="#">订单查询</a></li> <li><a href="#" class="my_zhuang">我的雅妆</a></li> <li><a href="#" class="help">帮助中心</a></li> <li><a href="#">收藏雅妆</a></li> <li><a href="#" class="guanzhu">关注雅妆</a></li> </ul> <div class="clear"></div> </div> </div> <div id="header"> <div class="logo"> <a href="index.html" title="欢迎来到雅妆"><img src="images/header_img_03.jpg" alt="欢迎来到雅妆" /></a> </div> <form class="search"> <input type="text" value="面膜"/> <button type="button"></button> <label>MM在搜索：保湿水 美白面霜 护手霜 补水眼精华</label> </form> <img src="images/header_img_08.jpg" class="accounts" /> <div class="clear"></div> </div> <div id="nav"> <div class="nav_inner"> <ul class="nav"> <li><a href="#">首页</a></li> <li class="mall"><a href="#">美妆商城</a> <div class="mei_hover"> <div class="neirong"> <div class="hover"> <h2>护肤</h2> <ul> <li><a href="product.html">洁面</a></li> <li><a href="product.html">化妆水</a></li> <li><a href="product.html">面贴面膜</a></li> <li><a href="product.html">免洗面膜</a></li> <li><a href="product.html">精华</a></li> <li><a href="product.html">乳液</a></li> <li><a href="product.html">晚霜</a></li> <li><a href="product.html">眼部护理</a></li> <li><a href="product.html">T区护理</a></li> <div class="clear"></div> </ul> </div> <div class="hover"> <h2>香水</h2> <ul> <li><a href="#">菲拉格慕</a></li> <li><a href="#">Burberry</a></li> <li><a href="#">Dior</a></li> <li><a href="#">伊莎雅顿</a></li> <li><a href="#">范思哲</a></li> <li><a href="#">CK</a></li> <li><a href="#">安娜苏</a></li> <li><a href="#">大卫杜夫</a></li> <li><a href="#">LANVIN</a></li> </ul> </div> <div class="hover"> <h2>男士</h2> <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> <li><a href="#">唇彩</a></li> <li><a href="#">沐浴</a></li> </ul> </div> <div class="hover"> <h2>彩妆</h2> <ul> <li><a href="#">隔离/妆前</a></li> <li><a href="#">BB霜</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> <li><a href="#">腮红</a></li> <li><a href="#">眉笔</a></li> <li><a href="#">底妆</a></li> <li><a href="#">卸妆</a></li> </ul> </div> <div class="hover"> <h2>护发专区</h2> <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 class="hover"> <h2>个人护理</h2> <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> <li><a href="#">脱毛</a></li> </ul> </div> </div> <img src="images/mei_hover_03.jpg" class="yifu"/> </div> </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> <li><a href="#">在线客服</a></li> </ul> </div> </div> <div class="banner slide-box"> <div class="slider"> <div class="theme-default"> <div id="slider" class="nivoSlider"> <a href="#" title="户外专题"><img src="images/banner_img1.jpg" data-thumb="images/banner_img1.jpg" alt="" /></a> <a href="#/" title="运动夹克秋季新品"><img src="images/banner_img5.jpg" data-thumb="images/banner_img5.jpg" alt="" /></a> <a href="#/" title="时尚泳衣"><img src="images/banner_img2.jpg" data-thumb="images/banner_img2.jpg" alt="" /></a> <a href="#"><img src="images/banner_img3.jpg" data-thumb="images/banner_img3.jpg" alt="" /></a> <a href="#" title="篮球鞋专题"><img src="images/banner_img6.jpg" data-thumb="images/banner_img6.jpg" alt="" /></a> <a href="#" title="羽毛球装备"><img src="images/banner_img4.jpg" data-thumb="images/banner_img4.jpg" alt="" /></a> </div> </div> </div> <div class="clear"></div></div> <div id="content"> <div class="main"> <div class="remen"> <h1 class="title">热门品牌</h1> <ul> <li title="images/caidan_hover_12.jpg"><a href="#"><img src="images/remen_18.jpg" title="images/remen_18.jpg"/></a></li> <li title="images/caidan_hover_14.jpg"><a href="#"><img src="images/remen_20.jpg" title="images/remen_20.jpg"/></a></li> <li title="images/caidan_hover_16.jpg"><a href="#"><img src="images/remen_22.jpg" title="images/remen_22.jpg"/></a></li> <li title="images/caidan_hover_18.jpg"><a href="#"><img src="images/remen_24.jpg" title="images/remen_24.jpg"/></a></li> <li title="images/caidan_hover_20.jpg"><a href="#"><img src="images/remen_26.jpg" title="images/remen_26.jpg"/></a></li> <li title="images/caidan_hover_22.jpg"><a href="#"><img src="images/remen_28.jpg" title="images/remen_28.jpg"/></a></li> <li title="images/caidan_hover_24.jpg"><a href="#"><img src="images/remen_30.jpg" title="images/remen_30.jpg"/></a></li> <li class="wei" title="images/caidan_hover_26.jpg"><a href="#"><img src="images/remen_32.jpg" title="images/remen_32.jpg"/></a></li> <li title="images/caidan_hover_36.jpg"><a href="#"><img src="images/remen_42.jpg" title="images/remen_42.jpg"/></a></li> <li title="images/caidan_hover_37.jpg"><a href="#"><img src="images/remen_43.jpg" title="images/remen_43.jpg"/></a></li> <li title="images/caidan_hover_38.jpg"><a href="#"><img src="images/remen_44.jpg" title="images/remen_44.jpg"/></a></li> <li title="images/caidan_hover_39.jpg"><a href="#"><img src="images/remen_45.jpg" title="images/remen_45.jpg"/></a></li> <li title="images/caidan_hover_40.jpg"><a href="#"><img src="images/remen_46.jpg" title="images/remen_46.jpg"/></a></li> <li title="images/caidan_hover_41.jpg"><a href="#"><img src="images/remen_47.jpg" title="images/remen_47.jpg"/></a></li> <li title="images/caidan_hover_42.jpg"><a href="#"><img src="images/remen_48.jpg" title="images/remen_48.jpg"/></a></li> <li class="wei" title="images/caidan_hover_43.jpg"><a href="#"><img src="images/remen_49.jpg" title="images/remen_49.jpg" /></a></li> <div class="clear"></div> </ul> </div> <div class="c_nav"> <div class="ci_nav"> <h2>护肤专区</h2> <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> <li><a href="#">面霜</a></li> <li><a href="#">身体护理</a></li> <div class="clear"></div> </ul> <div class="clear"></div> </div> <div class="ci_nav"> <h2>彩妆专区</h2> <ul> <li><a href="#">隔离/妆前</a></li> <li><a href="#">BB霜</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> <li><a href="#">美甲</a></li> <li><a href="#">眉笔</a></li> <li><a href="#">底妆</a></li> <div class="clear"></div> </ul> <div class="clear"></div> </div> <div class="ci_nav"> <h2>热门功效</h2> <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> <li><a href="#">去角质</a></li> <li><a href="#">收毛孔</a></li> <div class="clear"></div> </ul> <div class="clear"></div> </div> <ul class="img_nav"> <li> <a href="#"><img src="images/img_nav_03.jpg" /></a> <h3 class="perfume">Perfume Area</h3> </li> <li> <a href="#"><img src="images/img_nav_05.jpg" /></a> <h3>Hair Area</h3> </li> <li class="man"> <a href="#"><img src="images/img_nav_07.jpg" /></a> <h3>Man Area</h3> </li> <div class="clear"></div> </ul> </div> <div class="preferential"> <h1 class="title qu">特惠专区<a href="#">更多</a></h1> <ul> <li class="fangchengshi"><a href="#"><img src="images/tehui_img_07.jpg" /></a></li> <li> <a href="#"><img src="images/index_09.jpg" /></a> <div> <h4>SK-II青春焕彩修复眼霜</h4> <p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p> </div> </li> <li> <a href="#"><img src="images/index_12.jpg" /></a> <div> <h4>SK-II青春焕彩修复眼霜</h4> <p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p> </div> </li> <li class="teshu"> <a href="#"><img src="images/tehui_img_15.jpg" /></a> <div> <h4>SK-II青春焕彩修复眼霜</h4> <p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p> </div> </li> <li class="teshu"> <a href="#"><img src="images/tehui_img_19.jpg" /></a> <div> <h4>SK-II青春焕彩修复眼霜</h4> <p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p> </div> </li> <li class="teshu"> <a href="#"><img src="images/tehui_img_20.jpg" /></a> <div> <h4>SK-II青春焕彩修复眼霜</h4> <p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p> </div> </li> <li class="ie6"> <a href="#"><img src="images/tehui_img_17.jpg" /></a> <div> <h4>SK-II青春焕彩修复眼霜</h4> <p>￥<span>423</span><span class="guoqu_price">￥324</span><a href="#">去看看</a></p> </div> </li> <div class="clear"></div> </ul> </div> <div class="new"> <h1 class="title qu">特惠专区<a href="#">更多</a></h1> <ul> <li><a href="#"><img src="images/xinpi_img_59.jpg" /></a></li> <li><a href="#"><img src="images/xinpi_img_62.jpg" /></a></li> <li><a href="#"><img src="images/xinpi_img_65.jpg" /></a></li> <li class="n_four"><a href="#"><img src="images/xinpi_img_68.jpg" /></a></li> <div class="clear"></div> </ul> </div> </div> </div> <div id="footer"> <div id="footer_one"> <div class="one"> <h1>雅妆</h1> <dl> <dt>7天无理由退货</dt> <dd>购物无忧</dd> </dl> <dl> <dt>美妆电商的领跑者</dt> <dd>购物无忧</dd> </dl> <dl> <dt>周二周五定时发货</dt> <dd>顾客放心</dd> </dl> <div class="clear"></div> </div> </div> <div id="footer_two"> <div class="two"> <ul class="shopping"> <li class="title">购物指南</li> <li><a href="#">用户注册</a></li> <li><a href="#">服务协议</a></li> <li><a href="#">优惠券使用详细</a></li> </ul> <ul class="pay"> <li class="title">购物/付款</li> <li><a href="#">购物流程</a></li> <li><a href="#">付款流程</a></li> <li><a href="#">付款方式</a></li> </ul> <ul class="way"> <li class="title">配送方式</li> <li><a href="#">配送范围及时间</a></li> <li><a href="#">配送说明</a></li> </ul> <ul class="questions"> <li class="title">常见问题</li> <li><a href="#">积分使用规则</a></li> <li><a href="#">订单查询</a></li> <li><a href="#">找回密码</a></li> </ul> <ul class="service"> <li class="title">售后服务</li> <li><a href="#">商务合作</a></li> <li><a href="#">退款说明</a></li> <li><a href="#">售后售前服务</a></li> </ul> <div class="clear"></div> </div> </div> <div id="footer_three"> <div class="three"> <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> <div class="clear"></div> </ul> </div> </div> <div id="footer_four"> <p>2013年杭州锐化传媒有限公司jumei.com保留一切权力。客服热线：068155</p> <p>京公安网备案110105006780|京ICPZ证11103|营业执照</p> </div> </div></div></body></html>@charset "utf-8";/* CSS Document */html, body{height:100%;}#div1 {width:100%;height:100%;position:fixed;_position:absolute;top:0;left:0;display:none;background:#333;z-index:5;opacity:0.5;filter:alpha(opacity=50);}#div2 {width:400px;/*显示宽度*/height:420px;/*显示高度*/position:absolute;/*绝对定位*/z-index:6;/*优先级*/display: none;/*是否显示*/background-color:#F7F7F7;top:50%;left:50%;margin:-210px 0 0 -200px;}#div2 form {width:380px;margin:0 auto;clear:both;}#div2 form input {border:1px #ccc solid;}#div2 form p.shuru {position:relative;}#div2 form p.shuru span {position:absolute;top:33px;left:10px;color:#CCC;}#div2 form p.name span {top:53px;}#div2 form input#name,#div2 form input#pws {width:380px;height:40px;margin-top:40px;}#div2 form input#pws {margin-top:20px;}#div2 form p.zhuce {height:40px;line-height:40px;cursor:pointer;}#div2 form div.auto {padding:20px 0;}#div2 form div.auto p {float:left;}#div2 form div.auto input,#div2 form div.auto label {vertical-align:middle;}#div2 form div.auto a,#div2 form p.zhuce {float:right;}#div2 form div.auto a,#div2 form p.zhuce a {color:#69F;cursor:pointer;}#div2 form div.auto a:hover,#div2 form p.zhuce a:hover { text-decoration:underline;}#div2 form input#anniu {border:none;background:#f0145c;width:380px;height:40px;margin-top:0px;color:#fff;font-weight:bold;font-size:18px;cursor:pointer;}#div3 {height:50px;background:#F4EAD4;line-height:50px;padding:0 10px;}#div3 a {display:block;float:right;color:#000;font-weight:bold;font-size:18px;cursor:pointer;}#div3 a:hover {color:#f0145c;}#div4 {clear:both;padding:0 10px;border-top:1px #ccc solid;}#div4 p {line-height:40px;}#div4 ul li {float:left;width:30px;cursor:pointer;}#content { background:#f4ead4;}#content .main {clear:both;width:960px; margin:0 auto; background:#FFF; padding:0 15px;}#content .main .remen {clear:both; padding-top:30px;}#content .main h1.title { background:url(../images/remen_img_11.jpg) no-repeat center; font-family:"黑体"; font-size:24px; color:#000; text-align:center;}#content .main .remen ul {clear:both; margin-top:20px;}#content .main .remen ul li {float:left;width:116px;padding-right:4px;padding-bottom:7px;}#content .main .remen ul li.wei {padding-right:0;}#content .main .remen ul li a img {float:left;}#content .main .c_nav {clear:both; padding-top:53px; *padding-top:26px;padding-bottom:30px;}#content .main .ci_nav {clear:both;padding-bottom:10px;}#content .main .ci_nav h2 {float:left;width:119px;height:43px;line-height:43px;padding-left:26px;border:1px #f0145c solid; background:url(../images/ci_nav_67.jpg) no-repeat 116px center;font-family:"宋体"; font-size:20px;font-weight:bold;color:#000;}#content .main .ci_nav ul {float:left;width:763px;margin-left:26px;border-bottom:1px #cccccc solid;}#content .main .ci_nav ul li {float:left;padding-right:30px;line-height:43px;}#content .main .ci_nav ul li a { font-family:"宋体";font-size:14px;}#content .main .ci_nav ul li a:hover {color:#f0145c;text-decoration:underline;}#content .main .c_nav ul.img_nav {padding-top:30px;}#content .main .c_nav ul.img_nav li {float:left; width:311px;padding-right:13px;}#content .main .c_nav ul.img_nav li.man {padding:0;}#content .main .c_nav ul.img_nav li h3 {line-height:42px; font-size:14px; padding-left:100px; background:url(../images/img_nav_sanjiao_24.jpg) no-repeat 188px center;}#content .main .c_nav ul.img_nav li h3.perfume {padding-left:78px;}#content .main .c_nav ul.img_nav li.man h3 {padding-left:107px;}#content .main .c_nav ul.img_nav li h3.h_hover { background:#debac9;padding:0; text-align:center;}#content .main .preferential {clear:both; padding-top:40px; *padding-top:20px;}#content .main h1.qu {padding-left:37px; *padding-left:0px;}#content .main h1.qu a {float:right;display:block;*margin-top:-28px;line-height:14px; width:37px; font-size:12px; color:#FFF; font-weight:normal; background:#2b2220;}#content .main h1.qu a:hover { background:#f0145c;}#content .main .preferential ul {margin-top:20px;}#content .main .preferential ul li {float:left; width:222px;height:281px;}#content .main .preferential ul li.teshu {padding-right:24px;}#content .main .preferential ul li img {float:left;}#content .main .preferential ul li.fangchengshi {width:714px;height:540px;padding-right:24px;}#content .main .preferential ul li div {clear:both;padding:8px 0 10px 10px;background:#e3e0e0; *padding-top:4px;}#content .main .preferential ul li.ie6 div {*padding:4px 0 3px 10px; *overfloaw:hidden;}#content .main .preferential ul li div h4 {font-weight:normal; font-size:14px; color:#1c1c1c;}#content .main .preferential ul li div p {color:#f0145c;}#content .main .preferential ul li div p span {padding-right:10px; font-size:18px; font-weight:bold;}#content .main .preferential ul li div p span.guoqu_price {padding-right:78px;color:#9a9797; font-size:12px; text-decoration:line-through;}#content .main .preferential ul li div p a {padding:5px 6px; background:#f0145c; color:#FFF;}#content .main .preferential ul li div p a:hover {color:#000;}#content .main .new {clear:both;padding-top:40px; padding-bottom:20px;*padding-top:20px;}#content .main .new ul {padding-top:15px;}#content .main .new ul li {float:left; width:189px;padding-right:68px;padding-top:5px;}#content .main .new ul li.n_four {padding-right:0;}#content .main .new ul li.l_hover { background:url(../images/xinpin_img_03.jpg) no-repeat left top;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：女性,化妆品,商城,课程,设计
