當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

我的家乡介绍网站设计与实现

發(fā)布時(shí)間：2024/8/1 编程问答 28 豆豆

生活随笔收集整理的這篇文章主要介紹了我的家乡介绍网站设计与实现小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

以“我的家鄉(xiāng)”為主題的前端網(wǎng)頁(yè)設(shè)計(jì)
廢話不多說(shuō)先上圖：

用 :hover實(shí)現(xiàn)鼠標(biāo)放到圖片上實(shí)現(xiàn)放大效果

有視頻

有輪播圖純css 替換的話圖片尺寸 1100px * 299px

有浮動(dòng)廣告

只展示了主頁(yè)部分
新手小白不喜勿噴

html部分代碼

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>濱州主頁(yè)</title><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/index.css"><script src="js/index.js"></script> </head><body><div class="box-top w"><lu class="kuai"><li><img src="images/top-1.jpg" /></li><li><img src="images/top-2.jpg" /></li><li><img src="images/top-3.jpg" /></li><li><img src="images/top-4.jpg" /></li><li><img src="images/top-5.jpg" /></li></lu></div><div class="box-nav w"><ul><li class="xz"><a href="index.html">首頁(yè)</a></li><li><a href="jxls.html">家鄉(xiāng)歷史</a></li><li><a href="jxmj.html">家鄉(xiāng)美景</a></li><li><a href="jxmr.html">家鄉(xiāng)名人</a></li><li><a href="jxms.html">家鄉(xiāng)美食</a></li><li><a href="jxjz.html">家鄉(xiāng)建筑</a></li></ul></div><div class="xcp w"><h1>歡迎觀看宣傳片</h1><br><video src="mp4/binzhou.mp4" autoplay="autoplay" width="1200px" controls="controls"> 你的瀏覽器不支持視頻播放請(qǐng)更換IE9 以上的瀏覽器</video></div><div class="box-main w"><div class="box-main-mokuai"><h2>濱州簡(jiǎn)介</h2><br><div class="box-main-mokuai-1"><img src="images/濱州-1.jpg" alt=""></div><div class="box-main-mokuai-2"><p>　濱州市位于黃河下游、魯北平原，地處黃河三角洲尾閭，北臨渤海，東與東營(yíng)市接壤，南和淄博市毗鄰，西同德州市和濟(jì)南市搭界，是山東的北大門。現(xiàn)轄濱城區(qū)、沾化區(qū)、惠民縣、陽(yáng)信縣、無(wú)棣縣、博興縣、鄒平縣五縣二區(qū)和濱州經(jīng)濟(jì)開發(fā)區(qū)、濱州北海經(jīng)濟(jì)開發(fā)區(qū)以及濱州高新技術(shù)產(chǎn)業(yè)開發(fā)區(qū)，版圖面積9453平方千米，人口379萬(wàn)。濱州交通便利。濟(jì)青高速、濱博高速、京濱高速和205、220國(guó)道穿越境內(nèi)，是連接蘇、魯、京、津的重要通道。濱州是中國(guó)最大的冬棗生產(chǎn)基地，渤海文蛤、梭子蟹等名優(yōu)水產(chǎn)品名揚(yáng)海內(nèi)外。</p><p>濱州因居“渤海之濱·黃河之州”而得名。2000年，撤地設(shè)市，現(xiàn)轄七個(gè)縣市區(qū)和三個(gè)市屬開發(fā)區(qū)，是國(guó)家“黃藍(lán)”兩區(qū)戰(zhàn)略的主戰(zhàn)場(chǎng)，也是京津冀協(xié)同發(fā)展建設(shè)的重要組成部分。</p></div></div><div class="box-main-mokuai"><h2>人口數(shù)據(jù)</h2><br><div class="box-main-mokuai-1"><img class="box-main-mokuai-1-img" src="images/人口.png" alt=""></div><div class="box-main-mokuai-2"><p>一、全市常住人口</p><p> 濱州市住人口為374.85萬(wàn)人，同第五次全國(guó)人口普查2000年11月1日零時(shí)的356.41萬(wàn)人相比，十年共增加了18.44萬(wàn)人。增長(zhǎng)5.17%，年平均增長(zhǎng)0.51%，</p><p>二、家庭戶人口</p><p>全市常任人口中共有家庭戶13115.91萬(wàn)戶，家庭戶人口為357.02萬(wàn)人，平均每個(gè) 家庭戶的人口為3.08人,比200單五次人口普查的.26人減少70.18人。</p><p> 三、性別構(gòu)成</p><p>全市常住人口中，男性為188.40萬(wàn)人，占總?cè)丝诘?0.26%;女性為186.45萬(wàn)人，占總?cè)丝诘?9.74%，總?cè)丝谛詣e比(以女性為100,男性對(duì)女性的比例)由2000年的100.90.上升為101.05。</p></div></div><div class="box-main-mokuai"><h2>政治文化</h2><br><div class="box-main-mokuai-1"><img class="box-main-mokuai-1-img" src="images/政治文化.png" alt=""></div><div class="box-main-mokuai-2"><p>濱州市位于山東省的北部，黃河三角洲腹地。因公元951年(后周顯德三年)置濱州而得名。濱州歷史悠久，源遠(yuǎn)流長(zhǎng)，傳承有序。從魯北陽(yáng)信小韓遺址出土的文物判斷，早在七千多年以前，這就有人類繁衍，是黃河文化和齊文化的發(fā)祥地之一。正如《易●系辭》所載: 包犧(伏羲)氏沒(méi)，神農(nóng)氏作。斫木為耜，揉木為耒，耒耨之利，以教天下。”商代為薄姑氏領(lǐng)地，因“薄”與“蒲”、“博”“渤”“鵓”等字通假，才有了“蒲臺(tái)”“博興”“渤海灣”“鵓鴣李”諸多地名的歷史由來(lái)。秦朝開始建縣,從西漢起至民國(guó)先后設(shè)有郡(國(guó))、州、府、道等地方行政建置，五代時(shí)期置濱州，以瀕臨渤海而得名。</p></div></div><div class="box-main-mokuai"><h2>經(jīng)濟(jì)概況</h2><br><div class="box-main-mokuai-1"><img class="box-main-mokuai-1-img" src="images/經(jīng)濟(jì).jpg" alt=""></div><div class="box-main-mokuai-2"><p>經(jīng)濟(jì)運(yùn)行總體平穩(wěn)。全年實(shí)現(xiàn)生產(chǎn)總值（GDP）2612.92億元，按可比價(jià)格計(jì)算，增長(zhǎng)6.2%。其中，第一產(chǎn)業(yè)增加值237.17億元，增長(zhǎng)3.8%；第二產(chǎn)業(yè)增加值1222.30億元，增長(zhǎng)5.8%；第三產(chǎn)業(yè)增加值1153.45億元，增長(zhǎng)7.1%。三次產(chǎn)業(yè)結(jié)構(gòu)由上年的9.2:47.1:43.7調(diào)整為9.1：46.8：44.1。人均生產(chǎn)總值達(dá)到66970元（按年均匯率折算為9919美元），增長(zhǎng)5.4%。</p><p>物價(jià)指數(shù)平穩(wěn)上漲。居民消費(fèi)價(jià)格總水平上漲0.9%，其中，服務(wù)價(jià)格上漲3.1%，消費(fèi)品價(jià)格下降0.5%。工業(yè)生產(chǎn)者出廠價(jià)格上漲7.9%，購(gòu)進(jìn)價(jià)格上漲14.8%。</p></div></div><div style="clear: both;"></div></div><div class="wl w"><h1>友情鏈接</h1><br><ul><li><a href="http://www.binzhou.gov.cn/">濱州市人民政府</a></li><li><a href="http://jy.binzhou.gov.cn/">濱州市教育局</a></li><li><a href="http://ga.binzhou.gov.cn/">濱州市公安局</a></li><li><a href="http://mz.binzhou.gov.cn/">濱州市民政局</a></li><li><a href="http://sf.binzhou.gov.cn/">濱州市司法局</a></li><li><a href="http://cz.binzhou.gov.cn/">濱州市財(cái)政局</a></li><li><a href="http://tj.binzhou.gov.cn/">濱州市統(tǒng)計(jì)局</a></li></ul><br><ul><li><a href="http://www.bincheng.gov.cn/">濱城區(qū)人民政府</a></li><li><a href="http://www.zhanhua.gov.cn/">沾化區(qū)人民政府</a></li><li><a href="http://www.huimin.gov.cn/">惠民縣人民政府</a></li><li><a href="http://www.yangxin.gov.cn/">陽(yáng)信縣人民政府</a></li><li><a href="http://www.wudi.gov.cn/">無(wú)棣縣人民政府</a></li><li><a href="http://www.boxing.gov.cn/">博興縣人民政府</a></li><li><a href="http://www.zouping.gov.cn/">鄒平市人民政府</a></li></ul></div>><div class="footer"><p>Copyright ? 2020 物聯(lián)網(wǎng)應(yīng)用技術(shù)二班周春磊作品<br>建議使用IE9以上的瀏覽器</p></div><div class="ad" id="gg1"><a href="javascript:;"><img class="ad-img" src="images/ad.png" border="0" title="大美濱州歡迎你" alt="大美濱州歡迎你"></a></div><script type="text/javascript">var ad1 = new AdMove("gg1");ad1.Run();</script> </body></html>

css部分

/* 全局修改 */body {/* 推薦的漸變色*//* background: linear-gradient(0deg, #eebd89, #d13abd); *//* background: linear-gradient(0deg, #eae5c9, #6cc6cb); */background: linear-gradient(0deg, #ccfbff, #ead6ee);/*background:url(https://csdnimg.cn/release/phoenix/template/themes_skin/skin-whitemove/images/bg.gif) ;*/background-size: cover;background-position: auto auto;}/* 選中的 */.xz {background-color: rgb(83, 82, 82);color: red;}.xz a {color: red;}li {background-color: rgb(196, 192, 192);}/* 版心大小1300px */.w {margin: 0 auto;width: 1300px;}/* 頂部圖片的區(qū)域 *//* 頂部圖片的區(qū)域 *//* 頂部圖片的區(qū)域 *//* 頂部圖片的區(qū)域 *//* 頂部圖片的區(qū)域 *//* 頂部圖片的區(qū)域 */@keyframes qh {/*---每圖片切換有兩個(gè)階段：位移切換和靜置。中間的效果可以任意定制----*/0%,20% {margin-left: 0px;}25%,40% {margin-left: -1200px;}45%,60% {margin-left: -2400px;}65%,80% {margin-left: -3600px;}85%,100% {margin-left: -4800px;}}.box-top {border-radius: 20px;width: 1200px;height: 300px;overflow: hidden;}.box-top .kuai {display: block;background-color: pink;width: 6600px;height: 300px;animation: qh 8s linear infinite;}.box-top li {float: left;width: 1200px;height: 300px;}.box-top img {width: 1200px;height: 100%;}/* 宣傳片部分 */.xcp {margin-top: 10px;padding-top: 10px;border-radius: 10px;height: 740px;width: 1240px;background-color: white;text-align: center;}/* 導(dǎo)航欄部分開始了 *//* 導(dǎo)航欄部分開始了 *//* 導(dǎo)航欄部分開始了 */.box-nav ul {margin-top: 10px;text-align: center;line-height: 50px;font-size: 20px;color: black;font-weight: 700;}.box-nav ul li {display: inline-block;width: 16%;height: 50px;border-radius: 10px;/* background-color: #7CCD7C; */}.box-nav ul li:hover {background-color: rgb(120, 122, 120);}/* 主頁(yè)的主體部分 *//* 主頁(yè)的主體部分 *//* 主頁(yè)的主體部分 *//* 主頁(yè)的主體部分 *//* 主頁(yè)的主體部分 *//* 主頁(yè)的主體部分 */.box-main {padding-left: 12px;margin-top: 10px;text-align: center;}.box-main-mokuai {float: left;margin: 0 5px 10px 5px;width: 630px;height: 375px;background-color: #fff;border-radius: 20px;color: black;/* overflow: hidden; */}.box-main-mokuai div {float: left;}.box-main-mokuai {padding-top: 20px;}.box-main-mokuai .box-main-mokuai-1 {width: 260px;line-height: 260px;}.box-main-mokuai .box-main-mokuai-1 img {width: 90%;/* 添加動(dòng)畫 */transition: all 0.6s;}/* 當(dāng)鼠標(biāo)經(jīng)過(guò)時(shí)放大2倍 */.box-main-mokuai .box-main-mokuai-1 img:hover {transform: scale(2);}.box-main-mokuai .box-main-mokuai .box-main-mokuai-1-img {height: 80%;}.box-main-mokuai .box-main-mokuai-2 {/* flex布局 */display: flex;/* 設(shè)置主軸 */justify-content: center;flex-direction: column;align-items: left;padding-right: 5px;width: 360px;height: 88%;font-size: 15px;text-indent: 2em;text-align: left;}/* 外鏈部分 *//* 外鏈部分 *//* 外鏈部分 */.wl {height: 180px;margin-top: 10px;margin-bottom: 10px;padding-top: 25px;border-radius: 20px;background-color: white;text-align: center;font-weight: 700;}.wl ul li {display: inline;border-radius: 20px;background-color: transparent;font-size: 18px;margin: 0 10px;}/* 頁(yè)腳部分 *//* 頁(yè)腳部分 *//* 頁(yè)腳部分 */.footer {width: 100%;height: 70px;background-color: #A9A9A9;text-align: center;}.footer p {padding-top: 20px;}/* 漂浮的廣告 */.ad {width: 200px;height: 200px;position: absolute;top: 0;left: 0;}.ad-img {width: 100%;height: 100%;float: right;}

js部分

轉(zhuǎn)載請(qǐng)說(shuō)明出處

總結(jié)

以上是生活随笔為你收集整理的我的家乡介绍网站设计与实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： dnf脚本是php,dnf自动搬砖脚本教
下一篇：汉字编码查询网站