临近期末, 你还在为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期末大作业(成品下载)
<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: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>