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 期末作业HTML代码 学生网页课程设计期末作业下载
- 作品介绍
- 一、作品演示
- 二、代码目录
- 三、代码实现
- 四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)
- 五、源码获取
- 六、更多HTML期末大作业(成品下载)
-
- >>>戳我>>>点击进入200例期末大作业作品
<!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>
343
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
