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

HTML期末大作业 同时被 3 个专栏收录
281 篇文章 86 订阅
11 篇文章 0 订阅
189 篇文章 23 订阅

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

临近期末, 你还在为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制作了表单判断(提交时表单不能为空)

一、作品演示

在这里插入图片描述

二、代码目录

在这里插入图片描述

三、代码实现

<!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>



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

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
在这里插入图片描述


五、源码获取

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

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

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

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

在这里插入图片描述

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

>>>戳我>>>点击进入200例期末大作业作品

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

  • 0
    点赞
  • 0
    评论
  • 9
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

参与评论 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:Age of Ai 设计师:meimeiellie 返回首页

打赏作者

@码出未来-web网页设计

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值