html5网页设计大作业-dw企业网页设计带图片轮播留言 hbuilder大学生网页设计作业成品模板|百岁山矿泉水网页设计

最新推荐文章于 2024-06-24 13:57:22 发布

猿猿网页设计(yywyss365)

最新推荐文章于 2024-06-24 13:57:22 发布

阅读量2.2k

点赞数 6

分类专栏：企业网页设计 #js 文章标签： html5 html css

本文链接：https://blog.csdn.net/u011955860/article/details/122317346

版权

企业网页设计同时被 2 个专栏收录

4 篇文章 4 订阅

订阅专栏

#js

4 篇文章 1 订阅

订阅专栏

html5静态网页设计要是用HTML DIV+CSS JS等来完成页面的排版设计,一般的网页作业需要融入以下知识点：div布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码可以去猿猿设计官网下载，制作水平和原创度都适合学习或交作业用，记得点赞；猿猿网页设计官网http://yuanyuankeji.net/html/

一般html5静态网页设计作业主题有个人网页设计、美食网页设计、家乡网页设计、企业网页设计、学校、旅游网页设计、电商购物网页设计、宠物网页设计、茶叶、家居、酒店、舞蹈、动漫网页设计、明星、服装网页设计、体育网页设计、化妆品网页设计、物流、书籍、婚纱、军事网页设计、游戏网页设计、节日网页设计、环保网页设计、电影、摄影、文化网页设计、鲜花网页设计、礼品、汽车网页设计、其他等网页设计, 成品网页设计可以达到90分左右水平, 可满足大学生网页大作业网页设计需求, 喜欢的可以联系，我们也可以根据要求进行个性化定制。

一、作品展示

二、文件目录

三、首页代码实现

这里展示首页的html代码和css代码，图片文件夹不展示。如需完整代码可以联系作者；

html代码如下：



<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>百岁山天然矿泉水</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/lunbo.js"></script>
<style type="text/css">
#baisuishan {/* 设置一个大的div ，控制页面全屏并居中显示 采用绝对定位 */
	position: absolute;
	width: 100%;
	height: 938px;
	z-index: 1;
	left: 0px;
	top: 0px;
}
#baisuishan #title {/* 标题栏高度设置为100 左右居中，插入背景图 */
	height: 100px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-image:url("‫images/logo.jpg");
}
#baisuishan #title #dhl_ {/* 设置导航栏总体宽度以及位置 */
	height: 25px;
	width: 500px;
	padding-top: 57px;
	padding-left: 30px;
}
#baisuishan #title #dhl_ #dhl01 { /* 导航栏中每个导航的属性设置 */
	height: 25px;
	width: 80px;
	border: 1px solid #e9211d;
	border-radius: 25px;
	margin-left: 15px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #e9211d;
	text-align: center;
	line-height: 25px;
	float: left;
}
#baisuishan #main {/* 轮播图宽度高度及位置定义 */
	height: 400px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #9c6427;
}
#baisuishan #miaoshu {/* 给正文部分设置div的大小与位置，设置其中文字的字号、颜色，设置div边框使文字框更加醒目 */
	height: 152px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	font-family: "微软雅黑";
	font-size: 11px;
	color: #444444;
	text-align: center;
	line-height: 22px;
	border: 1px solid #f5e5d7;
}
#baisuishan #footer {/* 底部版权信息栏大小及文字设置 */
	height: 60px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-color: #320760;
	font-family: "微软雅黑";
	font-size: 15px;
	color: #e9211d;
	text-align: center;
	line-height: 60px;
	margin-top: 50px;
}

a:link { /* 超链接颜色设置 */
	color: #e9211d;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #e9211d;
}
a:hover {
	text-decoration: none;
	color: #e8e8e6;
}
a:active {
	text-decoration: none;
}
</style>
</head>

<body>
<div id="baisuishan">
  <div id="title">
    <div id="dhl_">
      <div id="dhl01"><a href="index.html">官网首页</a></div>
      <div id="dhl01"><a href="jianjie.html">品牌简介</a></div>
      <div id="dhl01"><a href="rexiao.html">当季热销</a></div>
      <div id="dhl01"><a href="liuyan.html">给我留言</a></div>
    </div>
  </div>
  
  <div id="main"><div id="fade_focus">
<div class="loading">Loading...<br /></div>
<ul>
<li><img src="‫images/gg1.jpg" width="960px" height="400px"/></li>
<li><img src="‫images/gg2.jpg" width="960px" height="400px"/></li>
<li><img src="‫images/gg3.jpg" width="960px" height="400px"/></li>
<li><img src="‫images/gg4.jpg" width="960px" height="400px"/></li>
</ul></div>
</div>
  <div id="miaoshu"><br />
    励精图治二十余载，景田集团(百岁山天然矿泉水)已发展成为中国包装饮用水行业的知名企业，<br>
    产品涉及矿泉水、纯净水、苏打水等多个系列，为消费者引领了独特的科学健康饮水生活方式。景田集团正逐步完善全国的生产与市场的战略布局，<br>
    销售网络已覆盖中国大陆，还远销海外，在海内外市场取得了不菲的成绩和良好声誉。在产品畅销全国的同时，<br>
    景田集团亦潜心开发国际市场，在意大利投资设厂，迈出了中国水企投资海外市场坚实的一步。<br>
    经过近26年的苦心经营、不断创新、培育品牌，景田集团以专业、真诚、高效的企业精神备受客户肯定、业界推崇以及消费者好评。
    <br />
  </div>
  <div id="miaoshu"><img src="‫images/gg5.jpg" width="960" height="152">
  </div>
<div id="footer">© 百岁山天然矿泉水<br />
</div>
</div>
</body>
</html>

css代码如下：

<style type="text/css">
#baisuishan {/* 设置一个大的div ，控制页面全屏并居中显示 采用绝对定位 */
	position: absolute;
	width: 100%;
	height: 938px;
	z-index: 1;
	left: 0px;
	top: 0px;
}
#baisuishan #title {/* 标题栏高度设置为100 左右居中，插入背景图 */
	height: 100px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-image:url("‫images/logo.jpg");
}
#baisuishan #title #dhl_ {/* 设置导航栏总体宽度以及位置 */
	height: 25px;
	width: 500px;
	padding-top: 57px;
	padding-left: 30px;
}
#baisuishan #title #dhl_ #dhl01 { /* 导航栏中每个导航的属性设置 */
	height: 25px;
	width: 80px;
	border: 1px solid #e9211d;
	border-radius: 25px;
	margin-left: 15px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #e9211d;
	text-align: center;
	line-height: 25px;
	float: left;
}
#baisuishan #main {/* 轮播图宽度高度及位置定义 */
	height: 400px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 25px;
	font-family: "微软雅黑";
	font-size: 14px;
	color: #9c6427;
}
#baisuishan #miaoshu {/* 给正文部分设置div的大小与位置，设置其中文字的字号、颜色，设置div边框使文字框更加醒目 */
	height: 152px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
	font-family: "微软雅黑";
	font-size: 11px;
	color: #444444;
	text-align: center;
	line-height: 22px;
	border: 1px solid #f5e5d7;
}
#baisuishan #footer {/* 底部版权信息栏大小及文字设置 */
	height: 60px;
	width: 960px;
	margin-right: auto;
	margin-left: auto;
	background-color: #320760;
	font-family: "微软雅黑";
	font-size: 15px;
	color: #e9211d;
	text-align: center;
	line-height: 60px;
	margin-top: 50px;
}

a:link { /* 超链接颜色设置 */
	color: #e9211d;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #e9211d;
}
a:hover {
	text-decoration: none;
	color: #e8e8e6;
}
a:active {
	text-decoration: none;
}
</style>

猿猿网页设计(yywyss365)

关注

6
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
2
评论
html5网页设计大作业-dw企业网页设计带图片轮播留言 hbuilder大学生网页设计作业成品模板|百岁山矿泉水网页设计

一般html5静态网页设计作业主题有个人网页设计、美食网页设计、家乡网页设计、企业网页设计、学校、旅游网页设计、电商购物网页设计、宠物网页设计、茶叶、家居、酒店、舞蹈、动漫网页设计、明星、服装网页设计、体育网页设计、化妆品网页设计、物流、书籍、婚纱、军事网页设计、游戏网页设计、节日网页设计、环保网页设计、电影、摄影、文化网页设计、鲜花网页设计、礼品、汽车网页设计、其他等网页设计, 成品网页设计可以达到90分左右水平, 可满足大学生网页设计
复制链接

扫一扫