@[TOC](文章目录🌰)常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，画面精明，排版整洁，内容丰富，主题鲜明，非常适合初学者学习使用。
网页介绍📖
1网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。
2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++等任意html编辑软件进行运行及修改编辑等操作）。
3.知识应用：技术方面主要应用了网页知识中的: Div+CSS、鼠标滑过特效、Table、导航栏效果、Banner、表单、二级三级页面等，视频、 音频元素 、Flash，同时设计了Logo（源文件）所需的知识点。
网页效果🌌
# 代码展示😈## 1.HTML结构代码 🧱 代码如下（示例）：以下仅展示部分代码供参考~
<html 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.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></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="xxword" 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="#">xx我们</a></li><li><a href="#">网站地图</a></li><li><a href="#">友情链接</a></li><div class="clear"></div></ul></div></div><div id="footer_four"><p>北京锐化传媒有限公司保留一切权力。客服热线：068155</p><p>京公安网备案110105006780|京ICPZ证11103|营业执照</p></div></div></div></body></html>
更多干货🚀
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏”一键三连哦！
2.❤️【关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.以上内容技术相关问题😈欢迎一起交流学习🔥
如果觉得《web课程设计 简单的学生网页作业源码 基于html css javascript jquery女性化妆品商城》对你有帮助，请点赞、收藏，并留下你的观点哦！
