web课程设计网页规划与设计:中国风茶文化网站设计(6个页面) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载

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

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

作品介绍

1.网页作品简介方面​ :HTML期末大学生网页设计作业 ,喜欢的可以下载,文章页支持手机PC响应式布局。

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

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

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


文章目录

一、作品演示

web课程设计网页规划与设计:中国风茶文化网站设计(6个页面) HTML+CSS+JavaScript_css

二、代码目录

web课程设计网页规划与设计:中国风茶文化网站设计(6个页面) HTML+CSS+JavaScript_文化网页设计源码HTML_02

三、代码实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>海洋茶文化城</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="wrap"><!--整体-->
<div><img src="img/nav.png" width="100%"/></div>
<div id="nav-nav"><!--导航开始-->
<ul id="nav">
<li><a href="index.html">网站首页</a></li>
<img src="img/2.png">
<li><a href="about.html">走进茶文化城</a></li>
<img src="img/2.png">
<li><a href="#">楼盘相册</a></li>
<img src="img/2.png">
<li><a href="news.html">活动新闻</a></li>
<img src="img/2.png">
<li><a href="news.html">政策法规</a></li>
<img src="img/2.png">
<li><a href="news.html">健康养生</a></li>
</ul>
</div><!--导航结束-->
<div><img src="img/banner.png" width="100%" /></div>

<div class="index-box"><!--主要内容开始(幻灯片公司新闻主推户型)-->
<div class="box-one">
<!-- 轮播广告 -->
<div id="banner_tabs" class="flexslider">
<ul class="slides">
<li>
<a title="" target="_blank" href="#">
<img width="100%" alt="幻灯片1" style="background: url(img/1.jpg) no-repeat center;" src="img/alpha.png">
</a>
</li>
<li>
<a title="" href="#">
<img width="100%" alt="幻灯片2" style="background: url(img/2.jpg) no-repeat center;" src="img/alpha.png">
</a>
</li>
<li>
<a title="" href="#">
<img width="100%" alt="幻灯片3" style="background: url(img/3.jpg) no-repeat center;" src="img/alpha.png">
</a>
</li>
</ul>
<ol id="bannerCtrl" class="flex-control-nav flex-control-paging">
<li><a><strong>1</strong></a></li>
<li><a><strong>2</strong></a></li>
<li><a><strong>3</strong></a></li>
</ol>
</div>
</div>

<div class="box-two">
<div class="box-twonav">
<p>公司新闻</p>
<div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div>
</div>
<div class="news_list">
<ul>
<li><span>2014-06-01</span> <a href="about.html" title="高房价下的10类“中国式蜗居” ">高房价下的10类“中国式蜗居” </a></li>
<li><span>2014-06-01</span><a href="about.html" title="国土资源部:26宗闲置土地曝光 最长达18年">国土资源部:26宗闲置土地曝光 最长达18年 </a></li>
<li><span>2014-05-30</span><a href="about.html" title="上海囤地企业喊冤:闲置地块已建楼盘">上海囤地企业喊冤:闲置地块已建楼盘</a></li>
<li><span>2014-05-28</span><a href="about.html" title="发改委:首11月房地产开发投资增长36.5%">发改委:首11月房地产开发投资增长36.5% </a></li>
<li><span>2014-05-30</span><a href="about.html" title="上海传房产税即将出台 二手房赶集过户">上海传房产税即将出台 二手房赶集过户 </a></li>
</ul>
</div>
</div>

<div class="box-three">
<div class="box-twonav">
<p>主推户型</p>
<div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div>
</div>
<a href="about.html"><div class="news_list">
<div class="news-pic"><img src="img/pic.png" width="193"/></div>
<div class="news-text">项目总用地面积约16.8万平方米,地上建筑面积约13万平方米,地下建筑面积约0.55万平方米,功能组织分区为:传统文化街区(A区)、青少年科技展示区(B区)、游客接待会议中心(C区)三个区块。</div>
</div></a>
</div>
</div><!--主要内容结束-->
<div style=" clear:both;"></div>
<div class="xian"></div>

<div class="index-box"><!--主要内容开始(周边配套活动资讯预约看房)-->
<div class="box-four">
<div class="box-fournav">
<p>周边配套</p>
<div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div>
</div>
<div class="one">
<div class="one-1">
<div class="one-0">
<div class="one-1-1"><img src="img/p1.png" width="100%"/></div>
<div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />
位于海阳市海政路西段,基地北临海政路,西临海文路,南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div>
</div>
<div style=" clear:both;"></div>
<div class="one-0">
<div class="one-1-1"><img src="img/p2.png" width="100%"/></div>
<div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />
位于海阳市海政路西段,基地北临海政路,西临海文路,南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div>
</div>
</div>
<div class="one-2">
<div class="one-0">
<div class="one-1-1"><img src="img/p3.png" width="100%"/></div>
<div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />
位于海阳市海政路西段,基地北临海政路,西临海文路,南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div>
</div>
<div style=" clear:both;"></div>
<div class="one-0">
<div class="one-1-1"><img src="img/p4.png" width="100%"/></div>
<div class="one-1-2"><strong>水晶丽都海阳市区房源</strong><br />
位于海阳市海政路西段,基地北临海政路,西临海文路,南侧临规划路(现状为厂房)。<a href="about.html"><span>详细>></span></a></div>
</div>
</div>
</div>
</div>

<div class="box-five">
<div class="box-twonav">
<p>活动资讯</p>
<div class="box-b"><a href="news.html"><img src="img/more.png" width="81"/></a></div>
</div>
<div class="news_list">
<ul>
<li><span>2014-06-01</span> <a href="about.html" title="高房价下的10类“中国式蜗居” ">高房价下的10类“中国式蜗居” </a></li>
<li><span>2014-06-01</span><a href="about.html" title="国土资源部:26宗闲置土地曝光 最长达18年">国土资源部:26宗闲置土地曝光 最长达18年 </a></li>
<li><span>2014-05-30</span><a href="about.html" title="上海囤地企业喊冤:闲置地块已建楼盘">上海囤地企业喊冤:闲置地块已建楼盘</a></li>
<li><span>2014-05-28</span><a href="about.html" title="发改委:首11月房地产开发投资增长36.5%">发改委:首11月房地产开发投资增长36.5% </a></li>
<li><span>2014-05-30</span><a href="about.html" title="上海传房产税即将出台 二手房赶集过户">上海传房产税即将出台 二手房赶集过户 </a></li>
</ul>
</div>
</div>

<div class="box-six">
<div class="six-1">预约看房<br/><span>Booking house</span></div>
<div class="six-2"><img src="img/yuyue.png" width="142"/></div>
<div class="six-3"><input type="button" value="预约看房" class="six-button"></div>
<div class="six-4"><img src="img/dianhua.png" width="156"/></div></div>
</div>

</div><!--主要内容结束-->
<div style="clear:both;"></div>
<div class="xian"></div>

<div class="lan">
<div class="lan-1"><img src="img/icon1.png" width="16"/></div>
<div class="lan-2">楼盘相册</div>
<div class="lan-3"><img src="img/lou.png" width="1019"/></div>
</div>
<div><!--楼盘相册开始-->
<center>
<div class="blk_18"> <a class="LeftBotton" onmousedown="ISL_GoUp_1()" onmouseup="ISL_StopUp_1()" onmouseout="ISL_StopUp_1()" href="javascript:void(0);" target="_self"></a>
<div class="pcont" id="ISL_Cont_1">
<div class="ScrCont">
<div id="List1_1">
<!-- piclist begin -->
<a class="pl" href="picpic.html"><img src="img/1.jpg" alt="图片" width="100%"/>图片一</a>
<a class="pl" href="picpic.html"><img src="img/2.jpg" alt="图片" width="100%"/>图片二</a>
<a class="pl" href="picpic.html"><img src="img/3.jpg" alt="图片" width="100%"/>图片三</a>
<a class="pl" href="picpic.html"><img src="img/4.jpg" alt="图片" width="100%"/>图片四</a>
<a class="pl" href="picpic.html"><img src="img/1.jpg" alt="图片" width="100%"/>图片五</a>
<a class="pl" href="picpic.html"><img src="img/2.jpg" alt="图片" width="100%"/>图片六</a>
<a class="pl" href="picpic.html"><img src="img/3.jpg" alt="图片" width="100%"/>图片七</a>
<a class="pl" href="picpic.html"><img src="img/4.jpg" alt="图片" width="100%"/>图片八</a>
<a class="pl" href="picpic.html"><img src="img/1.jpg" alt="图片" width="100%"/>图片九</a>
<!-- piclist end -->
</div>
<div id="List2_1"></div>
</div>
</div>
<a class="RightBotton" onmousedown="ISL_GoDown_1()" onmouseup="ISL_StopDown_1()" onmouseout="ISL_StopDown_1()" href="javascript:void(0);" target="_self"></a> </div>
<div class="c"></div>
<script type="text/javascript">
<!--
picrun_ini()
//-->
</script>
</center>
</div><!--楼盘相册结束-->

<div class="foot">
<div class="ewm"><img src="img/ewm.jpg" width="70"/><br/>扫一扫,更多惊喜</div>
<div class="foot-text">
<p>海阳市恒能旅游资源开发有限公司</p>
<p>公司地址:山东烟台海阳凤城旅游度假区海鑫中路海阳茶文化城办事处 公司电话:156 8863 3129 公司联系人:王女士</p>
<p>技术支持:青岛微信网 《中华人民共和国电信与信息服务业务经营许可证》编号: 鲁ICP备11028614号-1 海阳市诚龙房地产中介策划有限公司</p>
</div>
<div class="footpic"><img src="img/footpic.png" width="170" /></div>
</div>

</div>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/slider.js"></script>
<script type="text/javascript">
$(function() {
var bannerSlider = new Slider($('#banner_tabs'), {
time: 5000,
delay: 400,
event: 'hover',
auto: true,
mode: 'fade',
controller: $('#bannerCtrl'),
activeControllerCls: 'active'
});
$('#banner_tabs .flex-prev').click(function() {
bannerSlider.prev()
});
$('#banner_tabs .flex-next').click(function() {
bannerSlider.next()
});
})
</script>
</body>
</html>