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

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

作品介绍

​​1.网页作品简介方面​​ ：一款大气的化妆品生物科技公司，化妆品面膜生产销售公司网站模板html下载。包含：​​关于我们、产品中心、信息查询、招生加盟、联x我们​​ 总共9个页面。

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

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

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

文章目录

  • web前端期末大作业 html+css+javascript 化妆品网页设计实例 企业网站制作
  • 作品介绍
  • 一、作品演示
  • 二、代码目录
  • 三、代码实现
  • 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
  • 五、源码获取
  • 六、更多HTML期末大作业(成品下载)

web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作_html期末大作业

二、代码目录

web前端期末大作业 html+css+javascript化妆品网页设计实例 企业网站制作_css_02

三、代码实现 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <meta http-equiv="refresh" content="1">无限刷新-->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/swiper.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/style.css">
    <title>一池云锦</title>
</head>
<body>
        <div class="container">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                        <a class="navbar-brand text-center hidden-xs" href="#"><img src="images/logo.png" alt="" class="img-responsive"></a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="index.html">首页</a>
                            </li>
                            <li>
                                <a href="AboutUs.html">关于我们</a>
                            </li>
                            <li>
                                <a href="product.html">产品中心</a>
                            </li>
                
                            <li class="dropdown">
                                <a href="query.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">信息查询 <span class="caret"></span></a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <a href="query.html">信息查询</a>
                                    </li>
                                    <li>
                                        <a href="Backstage_Land.html">经销商后台</a>
                                    </li>
                                </ul>
                            </li>
                            <li>
                                <a href="Join.html">招生加盟</a>
                            </li>
                            <li>
                                <a href="contactus.html">联系我们</a>
                            </li>
                        </ul>
                    </div>
                    <!-- /.navbar-collapse -->
                </div>
                <!-- /.container-fluid -->
            </nav>
        </div>
        <!--nav end-->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="images/banner1.jpg" alt="" class="img-responsive"></div>
        <div class="swiper-slide"><img src="images/banner1.jpg" alt="" class="img-responsive"></div>
        <div class="swiper-slide"><img src="images/banner1.jpg" alt="" class="img-responsive"></div>
        <div class="swiper-slide"><img src="images/banner1.jpg" alt="" class="img-responsive"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>
<!--Carousel end-->
<div class="cont">
    <div class="container title">
        <div class="row">
            <div class="col-sm-12"><h3>产品展示</h3><p>Product display</p></div>
        </div>
    </div>
    <!--title end-->
    <div class="container ">
        <div class="row i_pic">
            <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护面膜</h4><p>洁白之中略显薄粉色彩、温润触感略带淡淡乳光，让您爱上这份独特享受</p></a></div>
            <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护面膜</h4><p>洁白之中略显薄粉色彩、温润触感略带淡淡乳光，让您爱上这份独特享受</p></a></div>
            <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护面膜</h4><p>洁白之中略显薄粉色彩、温润触感略带淡淡乳光，让您爱上这份独特享受</p></a></div>
            <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护面膜</h4><p>洁白之中略显薄粉色彩、温润触感略带淡淡乳光，让您爱上这份独特享受</p></a></div>
        </div>
    </div>
    <!--pic end-->
</div>
<div class="container">
    <div class="row text_cent">
        <div class="col-sm-12"><h4>关于我们</h4><p>ABOUT US</p></div>
    </div>
</div>
<!--text_cent end-->
<div class="container ">
    <div class="row i_about_us">
        <div class="col-sm-10 col-sm-offset-1 text-center">浙江百慕生物科技有限公司隶属浙江丽珀集团，成立于2011年3月，注册资本1000万元，是一家从事海洋生物开发销售的公司，主要从事保健品(海参)产品的销售。旗下的优参堂海参品牌源自于卢炜翎先生创立的优参号参堂，经过一百多年的发展，现已成为最具规模化，现代化，专业化的海参加工生产企业之一。</div>
    </div>
</div>
<!--i_about_us end-->
<div class="container">
    <div class="row prize">
        <div class="col-sm-4"><img src="images/prize1.jpg" alt="" class="img-responsive"><h4>荣誉资质</h4><p>荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质</p></div>
        <div class="col-sm-4"><img src="images/prize2.jpg" alt="" class="img-responsive"><h4>荣誉资质</h4><p>荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质</p></div>
        <div class="col-sm-4"><img src="images/prize3.jpg" alt="" class="img-responsive"><h4>荣誉资质</h4><p>荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质</p></div>
    </div>
</div>
<!--prize end-->
<div class="container">
    <div class="row text_cent">
        <div class="col-sm-12"><h4>联系我们</h4><p>CONTACT US</p></div>
    </div>
</div>
<!--text_cent end-->
<div class="container">
    <div class="row contact_ico">
        <div class="col-sm-4"><img src="images/contact_ico.png" alt=""class="img-responsive text-center"><p class="text-center">微信号：1234569</p></div>
        <div class="col-sm-4"><img src="images/contact_ico1.png" alt=""class="img-responsive text-center"><p class="text-center">陕西省西安市碑林区盛世太白四单元1201</p></div>
        <div class="col-sm-4"><img src="images/contact_ico2.png" alt=""class="img-responsive text-center"><p class="text-center">15245678900</p></div>
    </div>
</div>
<!--contact_ico end-->
<div class="container">
    <div class="row map">
        <div class="col-sm-12">
                <!--引用百度地图API-->
                <style type="text/css">
                    html,body{margin:0;padding:0;}
                    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
                    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
                </style>
                <script type="text/javascript" src="https://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
            <!--百度地图容器-->
            <div style="width:100%;height:400px;border:#ccc solid 1px;" id="dituContent"></div>
            <script type="text/javascript">
                //创建和初始化地图函数：
                function initMap(){
                    createMap();//创建地图
                    setMapEvent();//设置地图事件
                    addMapControl();//向地图添加控件
                }

                //创建地图函数：
                function createMap(){
                    var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
                    var point = new BMap.Point(116.395645,39.929986);//定义一个中心点坐标
                    map.centerAndZoom(point,12);//设定地图的中心点和坐标并将地图显示在地图容器中
                    window.map = map;//将map变量存储在全局
                }

                //地图事件设置函数：
                function setMapEvent(){
                    map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
                    map.enableScrollWheelZoom();//启用地图滚轮放大缩小
                    map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
                    map.enableKeyboard();//启用键盘上下左右键移动地图
                }

                //地图控件添加函数：
                function addMapControl(){
                    //向地图中添加缩放控件
                    var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
                    map.addControl(ctrl_nav);
                    //向地图中添加缩略图控件
                    var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
                    map.addControl(ctrl_ove);
                    //向地图中添加比例尺控件
                    var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
                    map.addControl(ctrl_sca);
                }


                initMap();//创建和初始化地图
            </script>

        </div>
    </div>
</div>
<!--map end-->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-sm-2 col-xs-4"><a href="">网站首页</a></div>
            <div class="col-sm-2 col-xs-4"><a href="">关于我们</a></div>
            <div class="col-sm-2 col-xs-4"><a href="">产品中心</a></div>
            <div class="col-sm-2 col-xs-4"><a href="">信息查询</a></div>
            <div class="col-sm-2 col-xs-4"><a href="">招商加盟</a></div>
            <div class="col-sm-2 col-xs-4"><a href="">联系我们</a></div>
            <div class="col-sm-12"><img src="images/logo.png" alt=""></div>
            <div class="col-sm-12"> © 2014 - Wooster All Right Reserved</div>
        </div>
    </div>
</div>
<script type="text/javascript"src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript"src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/swiper.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>