HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript

临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？HTML网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求~

原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的网页制作，画面精明，非常适合初学者学习使用。

作品介绍

​​1.网页作品简介方面​​ ：HTML期末大学生网页设计作业 ,喜欢的可以下载，文章页支持手机PC响应式布局。主要有：​​登录、注册、主页、列表页、详情页​​ 等总共 5 个页面html下载。

​​2.网页作品编辑方面​​：此作品为学生期末大作业网页设计题材，代码为简单学生水平 html+css 布局制作，作品下载后可使用任意HTML编辑软件（例如：​​DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm​​ 所有编辑器均可使用）

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

​​4.网页作品技术方面​​：使用CSS制作了网页背景图、鼠标经过及选中导航变色效果、下划线等。 首页制作了留言表单，同时简单使用JavaScript制作了表单判断（提交时表单不能为空）

 



文章目录


 

一、作品演示

HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript_化妆品网页设计HTML

二、代码目录

HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript_css_02

三、代码实现
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>化妆品首页</title>
<link href="css/index.css" type="text/css" rel="stylesheet" />
<link href="css/base.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <div class="banner">
        <!--头部-->
        <div class="top">
            <div class="logo"></div>
            <span></span>       
            <div class="txt01">
                <p>专注护肤行业<b>10年</b></p>
                <p>我们只生产最高品质的护肤产品</p>
            </div>
            <div class="tel">
                <p>全国服务咨询热线</p>
                <b>400-888-2837</b>
            </div>            
        </div> 
        <div class="nav">
            <div class="nav_bg">
                <ul>
                    <li class="ff"><a href="index.html">首页</a></li>
                    <li><span></span><a href="news.html">公司新闻</a></li>
                    <li><span></span><a href="product.html">产品中心</a></li>
                    <li><span></span><a href="companyIdea.html">公司理念</a></li>
                    <li><span></span><a href="contactUs.html">联系我们</a></li>
                </ul>
                <div class="search">
                    <div class="s01">产品搜索</div>
                    <input type="text" value="请输入关键字" class="s02" /><span></span>
                </div>
            </div>
        </div>
    </div>

    <div class="customer">
        <div class="news">
            <span><a href="javascript:">公司新闻</a></span>
            <span class="cur"><a href="javascript:">公司理念</a></span>            
            <ul>
                <li><a href="newsxq.html">2008年，化妆品国际化全新产品在国内上市</a></li>
                <li><a href="newsxq.html">2011年4月，化妆品国第1000家门店正式开幕</a></li>
                <li><a href="newsxq.html">2013年，化妆品新品太极丹新品亮相上海家化</a></li>
                <li><a href="newsxq.html">2014年6月，化妆品携中国文化入侵巴黎</a></li>
            </ul>
            <ul>
                <p><a href="companyIdea.html">2014年12月20日，现代中草药个人护理专家——化妆品首家体验型专卖店于上海正大广场全新揭幕。店内一系列特有的增值服务和贴心的体验环境，从空间打造到功能布局，完美诠释养美新体验。</a></p>
            </ul>
        </div>
        <div class="product">
            <ul>
                <li>
                    <a href="newsxq.html"><img src="images/004.png"></a>
                    
                    <big></big><p><a href="productxq.html">现代中草药中高档个人护理品01</a></p>
                </li>
                <li>
                    <a href="newsxq.html"><img src="images/005.png"></a>
                    
                    <big></big><p><a href="productxq.html">现代中草药中高档个人护理品02</a></p>
                </li>
                <li>
                    <a href="newsxq.html"><img src="images/008.png"></a>
                    
                    <big></big><p><a href="productxq.html">现代中草药中高档个人护理品03</a></p>
                </li>
            </ul>
            <a href="javascript:"><i><span class="curr"><b></b></span><span><b></b></span><span><b></b></span></i></a>
        </div>
        <div class="consult">
            <span>HOTLINE</span><p>全国免费专线</p><big>400-821-6188</big>
            <div class="web">
                <div class="qq">
                    <a href="#"><img src="images/01.png"></a>
                    <a href="#"><img src="images/02.png"></a>
                    <a href="#"><img src="images/03.png"></a>
                    <a href="#"><img src="images/04.png"></a>
                    <a href="#"><img src="images/05.png"></a>
                    <p><a href="#">售后服务</a><a href="#">售后服务</a></p>
                    <span><a href="#">在线咨询</a><a href="#">在线咨询</a></span>
                </div>
                <a href="#" class="two"><img src="images/07.png"></a>
            </div>
            <b><img src="images/MM.png"></b>
        </div>
    </div>

    <div class="main01">
        <h2>
            <span></span>
            <div class="right">
                <b class="curr01"></b><b></b><b></b>
                <a href="javascript:"><p><i></i></p><p><big></big></p></a>
            </div>
        </h2>
        
        <div class="goods">
            <ul>
                <li><a href="#"><img src="images/index01.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index02.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index01.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index02.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index01.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index02.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index01.png" /><p>太极系列</p></a></li>
            </ul>
            <ul>
                <li><a href="#"><img src="images/index04.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index06.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index04.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index06.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index04.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index06.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index04.png" /><p>太极系列</p></a></li>
            </ul>
            <ul>
                <li><a href="#"><img src="images/index07.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index07.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index07.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index05.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index03.png" /><p>太极系列</p></a></li>
                <li><a href="#"><img src="images/index01.png" /><p>太极系列</p></a></li>
            </ul>
        </div>
    </div>
    
    <div class="main02">
        <h2>
            <span></span>
            <!--<div class="right">
                <b></b><b></b><b class="curr01"></b>
                <p class="curr02"></p><p></p>
            </div>-->
        </h2>
        <div class="company01"><span>中国智慧，全球时尚</span><p>上海化妆品瓶有限公司，是上海家化联合股份有限公司
的全资子公司，拥有近3000万的固定注册资产。1998年8月，
化妆品作为全新概念的现代中草药中高档个人护理品品牌被
推出市场，并以其独树一帜在定位，很快在国内化妆品市场
崛起，在消费者心中树立起自然、清新、健康良好的品牌形
象。</p><a href="#">了解更多>></a></div>
        <div class="company02">
            <img src="images/002.png">
            <p>公司大楼</p><span>公司座落于:上海市浦东新区陆家嘴西路168号正大广场1层</span>
        </div>
        <div class="company03">
            <img src="images/003.png">
            <p>首家海外店铺成立</p><span>化妆品家海外旗舰店于法国巴黎的歌剧院大道38号盛
大揭幕。旗舰店空间设计流露浓浓东方韵味,</span>
        </div>
    </div>
    
    <div class="bottom">
        <div class="bb">
                <ul>
                    <li><a href="index.html">首页</a></li>
                    <li><span></span><a href="news.html">公司新闻</a></li>
                    <li><span></span><a href="product.html">产品中心</a></li>
                    <li><span></span><a href="companyIdea.html">公司理念</a></li>
                    <li><span></span><a href="contactUs.html">联系我们</a></li>
                </ul>
        </div>
        <p>© 上海化妆品有限公司版权所有 沪ICP备11049051号</p>
    </div>
</body>
<script src="js/jquery.js"></script>
<script src="js/js.js"></script>
<script src="js/index.js"></script>
</html>



四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

​​web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)​​

适合入门到高级的童鞋们入手~​​送1000套HTML+CSS+JavaScript模板网站​​

HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript_html静态网页_03

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 ​​[点赞+好评+收藏] 三连​​ 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.​​关注我​​ ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可​​wx公Z号 ---> web前端小日记​​ 获取更多源码 !

HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript_css_04

六、更多HTML期末大作业(成品下载)

200多例 ​​HTML5期末考核大作业源码​​ 包含 ​​个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他​​ 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!

HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript_html_05

HTML5期末大作业：化妆品网站设计——绿色的化妆品静态页面 HTML+CSS+JavaScript_css_06