時(shí)間：2023-10-15 12:30:01 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-15 12:30:01 來(lái)源：網(wǎng)站運(yùn)營(yíng)
基于HTML美中華傳統(tǒng)文化題材網(wǎng)頁(yè)項(xiàng)目的設(shè)計(jì)與實(shí)現(xiàn) (純HTML+CSS制作中國(guó)茶文化網(wǎng)站)：精彩專(zhuān)欄推薦 文末獲取聯(lián)系 ?? 作者簡(jiǎn)介: 一個(gè)熱愛(ài)把邏輯思維轉(zhuǎn)變?yōu)榇a的技術(shù)博主 作者主頁(yè): 【主頁(yè)—— 獲取更多優(yōu)質(zhì)源碼】 web前端期末大作業(yè)： 【 畢設(shè)項(xiàng)目精品實(shí)戰(zhàn)案例 (1000套) 】 程序員有趣的告白方式：【 HTML七夕情人節(jié)表白網(wǎng)頁(yè)制作 (110套) 】 超炫酷的Echarts大屏可視化源碼：【 Echarts大屏展示大數(shù)據(jù)平臺(tái)可視化(150套) 】 HTML+CSS+JS實(shí)例代碼： 【 ?HTML+CSS+JS實(shí)例代碼 (炫酷代碼) 繼續(xù)更新中...】 免費(fèi)且實(shí)用的WEB前端學(xué)習(xí)指南： 【 web前端零基礎(chǔ)到高級(jí)學(xué)習(xí)視頻教程 120G干貨分享】關(guān)于作者: 歷任研發(fā)工程師，技術(shù)組長(zhǎng)，教學(xué)總監(jiān)；曾于2016年、2020年兩度榮獲CSDN年度十大博客之星。 十載寒冰，難涼熱血；多年過(guò)去，歷經(jīng)變遷，物是人非。 然而，對(duì)于技術(shù)的探索和追求從未停歇。 堅(jiān)持原創(chuàng)，熱衷分享，初心未改，繼往開(kāi)來(lái)！
在線(xiàn)咨詢(xún)
Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進(jìn)行運(yùn)行及修改編輯等操作）。 其中： （1） html文件包含：其中index.html是首頁(yè)、其他html為二級(jí)頁(yè)面； （2） css文件包含：css全部頁(yè)面樣式,文字滾動(dòng), 圖片放大等； （3） js文件包含：js實(shí)現(xiàn)動(dòng)態(tài)輪播特效, 表單提交, 點(diǎn)擊事件等等（個(gè)別網(wǎng)頁(yè)中運(yùn)用到j(luò)s代碼）。<!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"><!--導(dǎo)航開(kāi)始--> <ul id="nav"> <li><a href="index.html">網(wǎng)站首頁(yè)</a></li> <img src="img/2.png"> <li><a href="about.html">走進(jìn)茶文化城</a></li> <img src="img/2.png"> <li><a href="#">樓盤(pán)相冊(cè)</a></li> <img src="img/2.png"> <li><a href="news.html">活動(dòng)新聞</a></li> <img src="img/2.png"> <li><a href="news.html">政策法規(guī)</a></li> <img src="img/2.png"> <li><a href="news.html">健康養(yǎng)生</a></li> </ul> </div><!--導(dǎo)航結(jié)束--> <div><img src="img/banner.png" width="100%" /></div> <div class="index-box"><!--主要內(nèi)容開(kāi)始（幻燈片公司新聞主推戶(hù)型）--> <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="高房?jī)r(jià)下的10類(lèi)“中國(guó)式蝸居” ">高房?jī)r(jià)下的10類(lèi)“中國(guó)式蝸居” </a></li> <li><span>2014-06-01</span><a href="about.html" title="國(guó)土資源部：26宗閑置土地曝光 最長(zhǎng)達(dá)18年">國(guó)土資源部：26宗閑置土地曝光 最長(zhǎng)達(dá)18年 </a></li> <li><span>2014-05-30</span><a href="about.html" title="杭州囤地企業(yè)喊冤：閑置地塊已建樓盤(pán)">杭州囤地企業(yè)喊冤：閑置地塊已建樓盤(pán)</a></li> <li><span>2014-05-28</span><a href="about.html" title="發(fā)改委：首11月房地產(chǎn)開(kāi)發(fā)投資增長(zhǎng)36.5%">發(fā)改委：首11月房地產(chǎn)開(kāi)發(fā)投資增長(zhǎng)36.5% </a></li> <li><span>2014-05-30</span><a href="about.html" title="杭州傳房產(chǎn)稅即將出臺(tái) 二手房趕集過(guò)戶(hù)">杭州傳房產(chǎn)稅即將出臺(tái) 二手房趕集過(guò)戶(hù) </a></li> </ul> </div> </div> <div class="box-three"> <div class="box-twonav"> <p>主推戶(hù)型</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">項(xiàng)目總用地面積約16.8萬(wàn)平方米，地上建筑面積約13萬(wàn)平方米，地下建筑面積約0.55萬(wàn)平方米，功能組織分區(qū)為：傳統(tǒng)文化街區(qū)（A區(qū)）、青少年科技展示區(qū)（B區(qū)）、游客接待會(huì)議中心(C區(qū))三個(gè)區(qū)塊。</div> </div></a> </div> </div><!--主要內(nèi)容結(jié)束--> <div style=" clear:both;"></div> <div class="xian"></div> <div class="index-box"><!--主要內(nèi)容開(kāi)始（周邊配套活動(dòng)資訊預(yù)約看房）--> <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>水晶麗都海陽(yáng)市區(qū)房源</strong><br />位于海陽(yáng)市海政路西段，基地北臨海政路，西臨海文路，南側(cè)臨規(guī)劃路（現(xiàn)狀為廠房）。<a href="about.html"><span>詳細(xì)>></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>水晶麗都海陽(yáng)市區(qū)房源</strong><br />位于海陽(yáng)市海政路西段，基地北臨海政路，西臨海文路，南側(cè)臨規(guī)劃路（現(xiàn)狀為廠房）。<a href="about.html"><span>詳細(xì)>></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>水晶麗都海陽(yáng)市區(qū)房源</strong><br /> 位于海陽(yáng)市海政路西段，基地北臨海政路，西臨海文路，南側(cè)臨規(guī)劃路（現(xiàn)狀為廠房）。<a href="about.html"><span>詳細(xì)>></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>水晶麗都海陽(yáng)市區(qū)房源</strong><br />位于海陽(yáng)市海政路西段，基地北臨海政路，西臨海文路，南側(cè)臨規(guī)劃路（現(xiàn)狀為廠房）。<a href="about.html"><span>詳細(xì)>></span></a></div> </div> </div> </div> </div> <div class="box-five"> <div class="box-twonav"> <p>活動(dòng)資訊</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="高房?jī)r(jià)下的10類(lèi)“中國(guó)式蝸居” ">高房?jī)r(jià)下的10類(lèi)“中國(guó)式蝸居” </a></li> <li><span>2014-06-01</span><a href="about.html" title="國(guó)土資源部：26宗閑置土地曝光 最長(zhǎng)達(dá)18年">國(guó)土資源部：26宗閑置土地曝光 最長(zhǎng)達(dá)18年 </a></li> <li><span>2014-05-30</span><a href="about.html" title="杭州囤地企業(yè)喊冤：閑置地塊已建樓盤(pán)">杭州囤地企業(yè)喊冤：閑置地塊已建樓盤(pán)</a></li> <li><span>2014-05-28</span><a href="about.html" title="發(fā)改委：首11月房地產(chǎn)開(kāi)發(fā)投資增長(zhǎng)36.5%">發(fā)改委：首11月房地產(chǎn)開(kāi)發(fā)投資增長(zhǎng)36.5% </a></li> <li><span>2014-05-30</span><a href="about.html" title="杭州傳房產(chǎn)稅即將出臺(tái) 二手房趕集過(guò)戶(hù)">杭州傳房產(chǎn)稅即將出臺(tái) 二手房趕集過(guò)戶(hù) </a></li> </ul> </div> </div> <div class="box-six"> <div class="six-1">預(yù)約看房<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="預(yù)約看房" class="six-button"></div> <div class="six-4"><img src="img/dianhua.png" width="156"/></div></div> </div> </div><!--主要內(nèi)容結(jié)束--> <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">樓盤(pán)相冊(cè)</div> <div class="lan-3"><img src="img/lou.png" width="1019"/></div> </div> <div><!--樓盤(pán)相冊(cè)開(kāi)始--> <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><!--樓盤(pán)相冊(cè)結(jié)束--> <div class="foot"> <div class="ewm"><img src="img/ewm.jpg" width="70"/><br/>掃一掃,更多驚喜</div> <div class="foot-text"> <p>海陽(yáng)市恒能旅游資源開(kāi)發(fā)有限公司</p> <p>公司地址：浙江杭州海陽(yáng)鳳城旅游度假區(qū)海鑫中路海陽(yáng)茶文化城辦事處 公司電話(huà)：156 8863 3129 公司聯(lián)系人：王女士</p> <p>技術(shù)支持：杭州微信網(wǎng) 《中華人民共和國(guó)電信與信息服務(wù)業(yè)務(wù)經(jīng)營(yíng)許可證》編號(hào): 魯ICP備11028614號(hào)-1 海陽(yáng)市誠(chéng)龍房地產(chǎn)中介策劃有限公司</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;}請(qǐng) “ 點(diǎn)贊” “??評(píng)論” “ 收藏”一鍵三連哦！ 【 關(guān)注我| 獲取更多源碼 | 優(yōu)質(zhì)文章】帶您學(xué)習(xí)各種前端插件、3D炫酷效果、圖片展示、文字效果、以及整站模板 、大學(xué)生畢業(yè)HTML模板 、期末大作業(yè)模板 、等! 「在這里有好多 前端 開(kāi)發(fā)者，一起探討 前端 Node 知識(shí)，互相學(xué)習(xí)」！關(guān)鍵詞：文化,實(shí)現(xiàn),中國(guó),設(shè)計(jì),項(xiàng)目,中華,傳統(tǒng),題材
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
