web前端期末⼤作业html+css+javascript化妆品⽹页设计实例
企业⽹站制作
临近期末, 你还在为HTML⽹页设计结课作业,⽼师的作业要求感到头⼤？HTML⽹页作业⽆从下⼿？⽹页要求的总数量太多？没有合适的模板？等等⼀系列问题。你想要解决的问题，在这篇博⽂中基本都能满⾜你的需求~
原始HTML+CSS+JS页⾯设计, web⼤学⽣⽹页设计作业源码，这是⼀个不错的⽹页制作，画⾯精明，⾮常适合初学者学习使⽤。
作品介绍
1.⽹页作品简介⽅⾯：⼀款⼤⽓的化妆品⽣物科技公司，化妆品⾯膜⽣产销售公司⽹站模板html下载。包含：关于我们、产品中⼼、信息查询、招⽣加盟、联x我们总共9个页⾯。
2.⽹页作品编辑⽅⾯：此作品为学⽣期末⼤作业⽹页设计题材，代码为简单学⽣⽔平 html+css 布局制作，作品下载后可使⽤任意HTML编辑软件(例如：D W、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm所有编辑器均可使⽤)
3.⽹页作品布局⽅⾯：⽹页布局整体为LOGO、导航、主体内容布局。⼦页⾯多种布局，兴趣爱好内容使⽤图⽚列表布局，成绩页⾯插⼊了表格，使⽤图⽚对齐⽅式设置了左对齐。
4.⽹页作品技术⽅⾯：使⽤CSS制作了⽹页背景图、⿏标经过及选中导航变⾊效果、下划线等。 ⾸页制作了留⾔表单，同时简单使⽤JavaScript制作了表单判断(提交时表单不能为空)
⽂章⽬录
web前端期末⼤作业 html+css+javascript 化妆品⽹页设计实例 企业⽹站制作
作品介绍
⼀、作品演⽰
⼆、代码⽬录
三、代码实现
四、web前端⼊门到⾼级(视频+源码+资料+⾯试)⼀整套 (教程)
五、源码获取
六、更多HTML期末⼤作业(成品下载)
⼆、代码⽬录
<!DOCTYPE html>
indirect函数的意思<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
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded
<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>
sql server删除不干净<li class="dropdown">
<a href="query.html" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">信息查询
<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>洁⽩之中略显薄粉⾊彩、温润触 <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护⾯膜</h4><p>洁⽩之中略显薄粉⾊彩、温润触
<div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护⾯膜</h4><p>洁⽩之中略显薄粉⾊彩、温润触 <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护⾯膜</h4><p>洁⽩之中略显薄粉⾊彩、温润触 <div class="col-sm-3"><a href=""><img src="images/pic1.jpg" alt="" class="img-responsive"><h4>胶原舒润修护⾯膜</h4><p>洁⽩之中略显薄粉⾊彩、温润触 </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>
<!--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>荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质荣誉资 <div class="col-sm-4"><img src="images/prize2.jpg" alt="" class="img-responsive"><h4>荣誉资质</h4><p>荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质荣誉资 <div class="col-sm-4"><img src="images/prize3.jpg" alt="" class="img-responsive"><h4>荣誉资质</h4><p>荣誉资质荣誉资质荣誉资质荣誉资质荣誉资质荣誉资 </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">陕西省西安市碑林区盛世太⽩四单 <div class="col-sm-4"><img src="images/contact_ico2.png" alt=""class="img-responsive text-center"><p class="text-center">152********</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="api.map.baidu/api?key=&v=1.1&services=true"></script>
<!--百度地图容器-->
<div id="dituContent"></div>
<script type="text/javascript">
//创建和初始化地图函数：
function initMap(){
createMap();//创建地图
setMapEvent();//设置地图事件
android bluedroid是什么设备addMapControl();//向地图添加控件
}
//创建地图函数：
function createMap(){
var map = new BMap.Map("dituContent");//在百度地图容器中创建⼀个地图
var point = new BMap.Point(116.395645,39.929986);//定义⼀个中⼼点坐标
window.map = map;//将map变量存储在全局
}
//地图事件设置函数：
function setMapEvent(){
html个人网页完整代码div+css
}
//地图控件添加函数：
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>
git工具小乌龟<!--map end-->
<div class="footer">
<div class="container">
<div class="row">
什么水果补ve<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>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论