常见网页设计作业题材有 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 等网页设计题目, ​​A+水平作业​​, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？ 网页要求的总数量太多？
2.没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~
3.原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

​​1.网页作品简介​​ ：HTML期末大学生网页设计作业 A+水平 ,喜欢的可以下载，文章页支持手机PC响应式布局。总共7个页面。

​​2.网页作品编辑​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件(例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++​​ 等任意HTML软件编辑修改网页)。

​​3.网页作品布局​​：网页布局整体为响应式布局、LOGO、导航、主体内容布局。子页面多种布局，兴趣爱好内容使用图片列表布局，成绩页面插入了表格，联系我们使用图片对齐方式设置了左对齐。

​​4.网页作品技术​​：使用DIV+CSS制作网页, 背景图、音乐、视频、flash、鼠标经过及选中导航变色效果、下划线 、等。 表单提交、评论留言，并使用JavaScript制作了表单判断(提交时表单不能为空)。

文章目录

1.首页

HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码_HTML期末大作业

2.品牌中心

HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码_HTML期末大作业_02

3.公主家

HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码_web实训作业_03

4.荣誉证书

HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码_化妆品网页设计html_04

5. 联系我们

HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码_HTML期末大作业_05

二、文件目录

HTML5期末大作业：化妆品网站设计——大气简洁的品牌化妆品网页(7页) HTML+CSS+JavaScript web前端课程设计源码_化妆品网页设计html_06

三、代码实现 

<title>公主家仟佰宠【官网】</title>
<!-- 关键词、描述 -->
<!doctype html>
<html>

<head>
<meta charset="utf-8">
<meta name="baidu-site-verification" content="e35nJw2b79">
<script src="static/js/prototype1.7.2.js" type="text/javascript"></script>
<script src="static/js/jquery-1.8.3.min.js" type="text/javascript"></script>

<link rel="stylesheet" href="static/css/css.css">
<link rel="stylesheet" href="static/css/contact.css">
<link rel="stylesheet" href="static/css/camera.css" type="text/css">
<link rel="stylesheet" href="static/css/selectordie.css">
<link rel="stylesheet" href="static/css/headerflip.css">

</head>

<body>
<div id="header">
<div class="container h100" style="height: 155px;">
<div class="logo" style="height: 69px;top: 8px;">
<a href=""><img src="static/picture/logo.png" title="公主家" alt="公主家"></a>
</div>
<div class="nav">
<ul>
<li>
<a href="index.html">首页</a>
</li>
<li>
<a href="about.html">品牌中心</a>
</li>
<li>
<a href="product.html">公主家</a>
</li>
<li>
<a href="qbc.html">仟佰宠</a>
</li>
<li>
<a href="ryzs.html">荣誉证书</a>
</li>
<li>
<a href="ppzx.html">品牌资讯</a>
</li>
<li>
<a href="message.html">联系我们</a>
</li>
</ul>
</div>
</div>
</div>
<!--导航-->
<!--banner-->
<div class="ty banner">
<div class="camera_wrap" id="camera_wrap_1">
<div data-src="static/image/5d5bc47621664.jpg"></div>
<div data-src="static/image/5dd1eeac277ba.jpg"></div>
<div data-src="static/image/5dd1eeb452745.jpg"></div>
<div data-src="static/image/5dd1f13dde579.jpg"></div>
</div>
</div>
<link rel="stylesheet" href="static/css/style.css">
<link rel="stylesheet" href="static/css/flip.css">
<script type="text/javascript" src="static/js/camera1.3.4.js"></script>
<script type="text/javascript" src="static/js/jquery.fullpage.min.js"></script>
<script type="text/javascript" src="static/js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(function() {
$("#camera_wrap_1").camera({
time: 3000,
pagination: true,
height: '35%',
      });
    });
</script>
<!--明星产品-->
<div class="ty" id="wpt01">
<div class="center">
<div class="in01 intitle">
<h2 class="css3 sm">明星代言</h2>
<span class="css3 xm">celebrity endorsement</span>
<h5 class="css3 left">公主家品牌形象代言人由人气偶像汪东城(Jiro Wang)担任。其高贵优雅的王子气质与”公主家“品牌高度契合。
<br>王子与公主的牵手将共同演绎出”外在生活轻松，内在心灵高贵“的护肤新理念。</h5></div>
<div class="zb01 css3 left">
<img class="css3" src="static/picture/in01.jpg"></div>
<div class="yb01 css3 right">
<div class="tu">
<img class="css3" src="static/picture/in02.jpg"></div>
</div>
</div>
</div>
<!--品牌理念-->
<div class="ty" id="wpt02">
<div class="center powz">
<div class="in02 intitle">
<h2>品牌理念</h2>
<span>Brand concept</span>
<h5>轻生活是一种全新的生活态度和方式，只有外在生活的轻松，才能唤醒内在心灵的高贵公主家护肤品能让你听从内心的声音，
<br>回归简单、自然的生活，追求心灵上的奢侈，成为美丽、智慧与坚定的现代都市女性。</h5>
<div class="bindbg">
<div class="bindimg css3 right">
<a href="about.html">
<img src="static/picture/in03.jpg" width="1130" height="398" alt=""></a>
</div>
</div>
</div>
</div>
</div>
<!--新闻-->
<div class="ty" id="wpt03">
<div class="center">
<div class="in03 intitle">
<h2>产品系列</h2>
<span>Product series</span>
<h5></h5>
</div>
<section class="procontainer" style="margin-top:-150px;margin-bottom:-350px;">
<section class="boxItem">
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<section class="itemContentBox">
<img src="static/picture/jinglu.jpg" alt="水润亮颜保湿晶露">
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水润亮颜保湿晶露</p>
<p style="letter-spacing:2px;margin-top:10px;">ACTIVE HYDRA-GEL</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水润亮颜保湿晶露</p>
<p style="letter-spacing:2px;margin-top:10px;">ACTIVE HYDRA-GEL</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水润亮颜保湿晶露</p>
<p style="letter-spacing:2px;margin-top:10px;">ACTIVE HYDRA-GEL</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水润亮颜保湿晶露</p>
<p style="letter-spacing:2px;margin-top:10px;">ACTIVE HYDRA-GEL</p>
</span>
</section>
</section>
</section>
<section class="boxItem">
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<section class="itemContentBox">
<img src="static/picture/jiemian.jpg" alt="舒颜净透洁面凝胶">
<section class="itemContent">

</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕采皙颜精华液</p>
<p style="letter-spacing:1px;margin-top:10px;">SHINING MOIDTURE ESSENCE</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕采皙颜精华液</p>
<p style="letter-spacing:1px;margin-top:10px;">SHINING MOIDTURE ESSENCE</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕采皙颜精华液</p>
<p style="letter-spacing:1px;margin-top:10px;">SHINING MOIDTURE ESSENCE</p>
</span>
</section>
</section>
</section>
<section class="hufu" style="top:-151px;right: 4px;">
<a href="240.html"></a>
<a href="240.html"></a>
<a href="240.html"></a>
<a href="240.html"></a>
<section class="jinghua" style="width:285px;height:586px;">
<img src="static/picture/penwu.jpg" alt="富勒烯修颜美肌喷雾">
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">富勒烯修颜美肌喷雾</p>
<p style="letter-spacing:1px;margin-top:10px;">FULLERENES REPAIR BEAUTY SPRAY</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">富勒烯修颜美肌喷雾</p>
<p style="letter-spacing:1px;margin-top:10px;">FULLERENES REPAIR BEAUTY SPRAY</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">富勒烯修颜美肌喷雾</p>
<p style="letter-spacing:1px;margin-top:10px;">FULLERENES REPAIR BEAUTY SPRAY</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:160px;letter-spacing:8px;">公主家</p><p style="font-size:20px;margin-top:30px;letter-spacing:8px;">富勒烯修颜美肌喷雾</p>
<p style="letter-spacing:1px;margin-top:10px;">FULLERENES REPAIR BEAUTY SPRAY</p>
</span>
</section>
</section>
</section>
<section class="logoimg" style="top: -302px;margin-left:-13px">
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<a href="javascript:void(0)"></a>
<section class="itemContentBox" style="width:585px;height:285px;">
<img src="static/picture/logo1.jpg" alt="">
<section class="itemContent">
<span><img src="static/picture/logo1.jpg" alt="" style="margin-top:-60px;"></span>
</section>
<section class="itemContent">
<span><img src="static/picture/logo1.jpg" alt="" style="margin-top:-60px;"></span>
</section>
<section class="itemContent">
<span><img src="static/picture/logo1.jpg" alt="" style="margin-top:-60px;"></span>
</section>
<section class="itemContent">
<span><img src="static/picture/logo1.jpg" alt="" style="margin-top:-60px;"></span>
</section>
</section>
</section>
<div>
<section class="itemContentBox" style="width:285px;height:285px;"></section>
</div>
<div>
<section class="itemContentBox" style="width:285px;height:285px;"></section>
</div>
<section class="boxItem" style="top: -452px;left:9px;">
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<section class="itemContentBox" style="width:285px;height:285px;">
<img src="static/picture/rishuang.jpg" alt="水凝皙颜滋养日霜">
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水凝皙颜滋养日霜</p>
<p style="letter-spacing:2px;margin-top:10px;line-height: 20px;">NUTRITROUS ACTIVE DAYS CREAM</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水凝皙颜滋养日霜</p>
<p style="letter-spacing:2px;margin-top:10px;line-height: 20px;">NUTRITROUS ACTIVE DAYS CREAM</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水凝皙颜滋养日霜</p>
<p style="letter-spacing:2px;margin-top:10px;line-height: 20px;">NUTRITROUS ACTIVE DAYS CREAM</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">水凝皙颜滋养日霜</p>
<p style="letter-spacing:2px;margin-top:10px;line-height: 20px;">NUTRITROUS ACTIVE DAYS CREAM</p>
</span>
</section>
</section>
</section>
<section class="boxItem" style="top: -452px;left:9px;">
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<section class="itemContentBox" style="width:285px;height:285px;margin-left:-3px;">
<img src="static/picture/ruye.jpg" alt="焕活生机修护乳液">
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕活生机修护乳液</p>
<p style="letter-spacing:2px;margin-top:10px;">REPAIR ACTIVE LOTION</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕活生机修护乳液</p>
<p style="letter-spacing:2px;margin-top:10px;">REPAIR ACTIVE LOTION</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕活生机修护乳液</p>
<p style="letter-spacing:2px;margin-top:10px;">REPAIR ACTIVE LOTION</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">焕活生机修护乳液</p>
<p style="letter-spacing:2px;margin-top:10px;">REPAIR ACTIVE LOTION</p>
</span>
</section>
</section>
</section>
<section class="boxItem" style="top: -452px;left:9px;">
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<a href="productdetail.html"></a>
<section class="itemContentBox" style="width:285px;height:285px;margin-left:-5px;">
<img src="static/picture/mianmo.jpg" alt="舒润皙颜弹润面膜">
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">舒润皙颜弹润面膜</p>
<p style="letter-spacing:2px;margin-top:10px;">NUTRITIVE FIRMING FACIAL MASK</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">舒润皙颜弹润面膜</p>
<p style="letter-spacing:2px;margin-top:10px;">NUTRITIVE FIRMING FACIAL MASK</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">舒润皙颜弹润面膜</p>
<p style="letter-spacing:2px;margin-top:10px;">NUTRITIVE FIRMING FACIAL MASK</p>
</span>
</section>
<section class="itemContent">
<span>
<p style="font-size:30px;margin-top:30px;letter-spacing:8px;">公主家</p>
<p style="font-size:20px;margin-top:30px;letter-spacing:8px;">舒润皙颜弹润面膜</p>
<p style="letter-spacing:2px;margin-top:10px;">NUTRITIVE FIRMING FACIAL MASK</p>
</span>
</section>
</section>
</section>
</section>
</div>
</div>
<div class="ty" id="wpt05">
<div id="fullpage" style="height:82% !important;">
<div class="section p6">
<div class="in_news intitle">
<h2>最新资讯</h2>
<span>LASTEST NEWS</span>
<h5></h5>
<ul>
<li>
<a href="4208.html">
<img alt="社交电商，让生活更精致 | 黄寿仙女士于《网易态度公开课》分享商业本质" src="static/picture/5d9004e4629e7.jpg" style="width:372px;height:223px;">
<big>社交电商，让生活更精致 | 黄寿仙女士于《网易态度公开课》分</big>
<font>time:2019-09-29</font>
<p>9月8日，公主家、公主购品牌创始人黄寿仙前往北京录制网易态度公开课，以《社交电商，让生活更精致，让创业更简单》为主题，结...</p>
</a>
</li>
<li>
<a href="4094.html">
<img alt="神首再度霸屏 | 公主家登陆杭州东站，实力刷屏再掀品牌效应" src="static/picture/5d25af9d0eda7.jpg" style="width:372px;height:223px;">
<big>神首再度霸屏 | 公主家登陆杭州东站，实力刷屏再掀品牌效应</big>
<font>time:2019-07-10</font>
<p>为加深公主家品牌的影响力，集团早已开始向全国各个城市的高铁站点陆续投放广告。广东9大高铁站齐屏联播堪称最拉风的品牌宣传，...</p>
</a>
</li>
<li>
<a href="4084.html">
<img alt="品牌影响力持续升级 | 盘点2019第2季度公主家新增广告投放形式" src="static/picture/5d15e09f30269.jpg" style="width:372px;height:223px;">
<big>品牌影响力持续升级 | 盘点2019第2季度公主家新增广告投</big>
<font>time:2019-06-28</font>
<p>2019年是品牌爆发年，集团早已在全国各地积极投放各类广告，不遗余力地扩大品牌知名度和影响力。...</p>
</a>
</li>
</ul>
<div class="in_more">
<a href="5.html" style="margin: 0 auto;">更多资讯</a>
</div>
</div>
</div>
</div>
</div>

<!--底部-->
<div class="footer">
<div class="center clear">
<div class="footzb" style="width: 50%;margin-top:160px;margin-left:-130px;">
<div class="footbt">陕西优逸克电子科技有限公司</div>
<div class="footbt">TEL：18161910796</div>
<div class="footnav">
<a href="javascript:;">授权查询</a>&nbsp;|&nbsp;
<a href="javascript:;">防伪查询</a>&nbsp;|&nbsp;
<a href="#">官方公众号</a>&nbsp;|&nbsp;
<a href="#">宣传公告</a>&nbsp;|&nbsp;
<a href="#">仟佰宠</a>&nbsp;|&nbsp;
<a href="#" style="opacity: 0;">公主购</a>

</div>
<div class="footwb">
<p>©陕西优逸克电子科技有限公司所有 &nbsp; 技术支持：陕西优逸克电子科技有限公司</p> 
</div>
</div>
<div class="footyb">
<div class="footbox1" style="width:1348px;margin-top:-237px;">
<div class="footgz clear" style="disply:inline;">
<a class="fxwb cs3" href="javascript:void(0);">
<img src="static/picture/5a74166e11474.jpg" rel="nofollow"> </a>
<div style="float:left;margin-left:-180px;margin-top:30px;">优逸克官方微博</div>
<a class="fxwx cs3" href="javascript:void(0);">
<img src="static/picture/5ce24d67849f8.png" rel="nofollow"> </a>
<div style="float:left;margin-left:-180px;margin-top:30px;">优逸克官方微博</div>
<a class="fxwd cs3" href="javascript:void(0);">
<img src="static/picture/5cf4a87986611.jpg" rel="nofollow"> </a>
<div style="float:left;margin-left:-180px;margin-top:30px;">优逸克官方微博</div>
</div>
</div>
<style>
.footbox {
margin-left: 25px;
padding-left: 14px;
          }

.qbca: {
color: #f6f6f6;
          }

.qbca:hover {
color: #a44e58 !important;
          }

.closeimg {
top: -20px;
right: -12px;
position: absolute;
z-index: 9;
cursor: pointer;
          }

.footgz a img {
width: 152px;
margin-left: -58px;
bottom: 83px;
          }
</style>
</div>

<style>
#cnzz_stat_icon_1272896540 a img {
margin: 0 auto;
    }
</style>

<!--返回顶部-->
<div class="fixtop" onclick="goTop()">
    返回顶部
</div>
</body>

</html>
<!--返回顶部-->
<div class="fixtop" onclick="goTop()">返回顶部</div>