时间：2023-10-15 12:30:01 | 来源：网站运营
时间：2023-10-15 12:30:01 来源：网站运营
基于HTML美中华传统文化题材网页项目的设计与实现 (纯HTML+CSS制作中国茶文化网站)：精彩专栏推荐 文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 作者主页: 【主页—— 获取更多优质源码】 web前端期末大作业： 【 毕设项目精品实战案例 (1000套) 】 程序员有趣的告白方式：【 HTML七夕情人节表白网页制作 (110套) 】 超炫酷的Echarts大屏可视化源码：【 Echarts大屏展示大数据平台可视化(150套) 】 HTML+CSS+JS实例代码： 【 ️HTML+CSS+JS实例代码 (炫酷代码) 继续更新中...】 免费且实用的WEB前端学习指南： 【 web前端零基础到高级学习视频教程 120G干货分享】关于作者: 历任研发工程师，技术组长，教学总监；曾于2016年、2020年两度荣获CSDN年度十大博客之星。 十载寒冰，难凉热血；多年过去，历经变迁，物是人非。 然而，对于技术的探索和追求从未停歇。 坚持原创，热衷分享，初心未改，继往开来！
在线咨询
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 其中： （1） html文件包含：其中index.html是首页、其他html为二级页面； （2） css文件包含：css全部页面样式,文字滚动, 图片放大等； （3） js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。<!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></body></html>/* CSS Document */*{margin:0; padding:0; font-size:14px; color:#323232; list-style:none; font-family:"/5FAE/8F6F/96C5/9ED1";}body{ background:url(../img/bj.png); width:100%;}#wrap{width:1400px; margin:0 auto;}a{text-decoration:none} a:hover{color:#BA2636;text-decoration:none;}ul#nav{ width:100%; height:50px; margin:0 auto; text-align:center; line-height:50px; background-image:url(../img/1.png);}ul#nav li{display:inline;}ul#nav li a{display:inline-block; padding:0 50px; color:#FFF; font-size:20px; }ul#nav li a:hover{background:#905400;}ul#nav li a span{ background:#f76647; padding-top:10px; padding-bottom:10px; padding-left:20px; padding-right:20px;}#nav-nav{width:100%; height:50px; overflow:hidden; }.index-box{ width:100%; height:250px; margin-top:20px;}.box-one{ float:left; width:32%; border:#999 1px solid; margin:0px auto; height:250px;}.box-two{ float:left; width:32%; margin:0px auto; margin-left:25px; height:250px;}.box-three{ float:right; width:32%; margin:0px auto; height:250px;}.box-twonav{ background-image:url(../img/nav2.png); width:438px; height:48px; float:right;}.box-twonav p{ color:#fff; line-height:48px; margin-left:50px; font-size:16px; float:left;}.box-b{ float:right; margin-right:20px; margin-top:10px;}.news_list {background:#fff; border:#ccc 1px solid; width:430px; height:190px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; float:right; margin-right:3px;}.news_list li {list-style-type:none; padding-left:10px; margin:8px; border-bottom:1px dotted #CCC; height:25px; line-height:25px;}.news_list span {float:right; color:#999; font-size:12px; padding-right:10px;}.news_list a:link, .news_list a:visited {text-decoration: none; color: #000;}.news-pic{ float:left; width:40%; margin:10px;}.news-text{ float:right; width:47%; font-size:14px; text-align:left; margin:10px; text-indent:2em; margin-left:10px;}.xian{ width:1400px; height:1px; background:#ae7000; margin:10px auto;}.box-four{ width:50%; float:left; }.box-five{ width:29%; float:left; margin-left:40px;}.box-six{ width:15%; float:right; border:#ccc 1px dashed; height:235px; background:#fff;}.box-fournav{ background-image:url(../img/nav3.png); width:672px; height:45px; float:left;}.box-fournav p{color:#fff; line-height:48px; margin-left:50px; font-size:16px; float:left;}.one{ width:95.5%; background:#fff; border-bottom-right-radius:3px; border-bottom-left-radius:3px; border:#ccc 1px solid; height:195px; margin-top:46px;}.one-1{ float:left; width:48%; height:200px; }.one-2{ float:right; width:48%; height:200px; }.one-0{width:95%; }.one-1-1{ width:45%; float:left; margin:5px; margin-top:10px;}.one-1-2{ width:48%; float:right; color:#999; font-size:12px; margin-left:10px; margin-top:10px;}.one-1-2 span{ color:#f20c00; font-size:12px;}.six-1{ font-size:18px; color:#d90011; margin-left:10px; margin-top:10px;}.six-1 span{ color:#333; font-size:12px;}.six-2{ text-align:center; margin-top:10px;}.six-3{ width:80%; height:40px; text-align:center; margin:0px auto;}.six-4{ text-align:center;}.six-button{ width:100%; height:40px; background:#f38417; border:#eb6100 2px solid; color:#fff; text-align:center; border-radius:5px;}.lan{ width:1400px; height:30px; margin:0px auto; margin-top:20px;}.lan-1{ float:left; margin-top:5px;}.lan-2{ float:left; font-size:18px; color:#6a3906; line-height:25px; margin-left:20px;}.lan-3{ float:right;}.foot{ width:1400px; height:100px; background:#794d1f; margin-bottom:30px; margin:40px auto;}.ewm{float:left; margin:10px; color:#fff; font-size:12px; text-align:center; width:150px;}.foot-text{padding-top:10px; width:70%; float:left;}.foot-text p{ color:#fff; font-size:12px; line-height:25px;}.footpic{ float:right; margin-top:22px; margin-right:20px;}请 “ 点赞” “✍️评论” “ 收藏”一键三连哦！ 【 关注我| 获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！关键词：文化,实现,中国,设计,项目,中华,传统,题材
