我的家乡介绍网站设计与实现
生活随笔
收集整理的這篇文章主要介紹了
我的家乡介绍网站设计与实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以“我的家鄉”為主題的前端網頁設計
廢話不多說先上圖：
用 :hover實現鼠標放到圖片上實現放大效果
有視頻
有輪播圖 純css 替換的話圖片尺寸 1100px * 299px
有浮動廣告
只展示了主頁部分
新手小白 不喜勿噴
html部分代碼
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>濱州主頁</title><!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> --><!-- 引入初始化css --><link rel="stylesheet" href="css/base.css"><!-- 引入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">首頁</a></li><li><a href="jxls.html">家鄉歷史</a></li><li><a href="jxmj.html">家鄉美景</a></li><li><a href="jxmr.html">家鄉名人</a></li><li><a href="jxms.html">家鄉美食</a></li><li><a href="jxjz.html">家鄉建筑</a></li></ul></div><!-- 宣傳片部分 --><div class="xcp w"><h1>歡迎觀看宣傳片</h1><br><video src="mp4/binzhou.mp4" autoplay="autoplay" width="1200px" controls="controls"> 你的瀏覽器不支持視頻播放 請更換IE9 以上的瀏覽器</video></div><!-- 主體部分 --><div class="box-main w"><!-- 濱州簡介模塊 --><!-- 濱州簡介模塊 --><div class="box-main-mokuai"><h2>濱州簡介</h2><br><!-- 左側的圖片部分 --><div class="box-main-mokuai-1"><img src="images/濱州-1.jpg" alt=""></div><!-- 右側的文字介紹部分 --><div class="box-main-mokuai-2"><p> 濱州市位于黃河下游、魯北平原，地處黃河三角洲尾閭，北臨渤海，東與東營市接壤，南和淄博市毗鄰，西同德州市和濟南市搭界，是山東的北大門。現轄濱城區、沾化區、惠民縣、陽信縣、無棣縣、博興縣、鄒平縣五縣二區和濱州經濟開發區、濱州北海經濟開發區以及濱州高新技術產業開發區，版圖面積9453平方千米，人口379萬。濱州交通便利。濟青高速、濱博高速、京濱高速和205、220國道穿越境內，是連接蘇、魯、京、津的重要通道。濱州是中國最大的冬棗生產基地，渤海文蛤、梭子蟹等名優水產品名揚海內外。</p><p>濱州因居“渤海之濱·黃河之州”而得名。2000年，撤地設市，現轄七個縣市區和三個市屬開發區，是國家“黃藍”兩區戰略的主戰場，也是京津冀協同發展建設的重要組成部分。</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>一、全市常住人口</p><p> 濱州市住人口為374.85萬人，同第五次全國人口普查2000年11月1日零時的356.41萬人相比，十年共增加了18.44萬人。增長5.17%，年平均增長0.51%，</p><p>二、家庭戶人口</p><p>全市常任人口中共有家庭戶13115.91萬戶， 家庭戶人口為357.02萬人，平均每個 家庭戶的人口為3.08人,比200單五次人口普查的.26人減少70.18人。</p><p> 三、性別構成</p><p>全市常住人口中，男性為188.40萬人，占總人口的50.26%;女性為186.45萬人， 占總人口的49.74%，總人口性別比(以女性為100,男性對女性的比例)由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年(后周顯德三年)置濱州而 得名。濱州歷史悠久，源遠流長，傳承有序。從魯北陽信小韓遺址出土的文物判斷，早在七 千多年以前，這就有人類繁衍，是黃河文化和齊文化的發祥地之一。正如《易●系辭》所載: 包犧(伏羲)氏沒，神農氏作。斫木為耜，揉木為耒，耒耨之利，以教天下。”商代為薄 姑氏領地，因“薄”與“蒲”、“博”“渤”“鵓”等字通假，才有了“蒲臺”“博興”“渤海 灣”“鵓鴣李”諸多地名的歷史由來。秦朝開始建縣,從西漢起至民國先后設有郡(國)、州、府、道等地方行政建置，五代時期置濱州，以瀕臨渤海而得名。</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/經濟.jpg" alt=""></div><!-- 右側的文字介紹部分 --><div class="box-main-mokuai-2"><p>經濟運行總體平穩。全年實現生產總值（GDP）2612.92億元，按可比價格計算，增長6.2%。其中，第一產業增加值237.17億元，增長3.8%；第二產業增加值1222.30億元，增長5.8%；第三產業增加值1153.45億元，增長7.1%。三次產業結構由上年的9.2:47.1:43.7調整為9.1：46.8：44.1。人均生產總值達到66970元（按年均匯率折算為9919美元），增長5.4%。</p><p>物價指數平穩上漲。居民消費價格總水平上漲0.9%，其中，服務價格上漲3.1%，消費品價格下降0.5%。工業生產者出廠價格上漲7.9%，購進價格上漲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/">濱州市財政局</a></li><li><a href="http://tj.binzhou.gov.cn/">濱州市統計局</a></li></ul><br><ul><li><a href="http://www.bincheng.gov.cn/">濱城區人民政府</a></li><li><a href="http://www.zhanhua.gov.cn/">沾化區人民政府</a></li><li><a href="http://www.huimin.gov.cn/">惠民縣人民政府</a></li><li><a href="http://www.yangxin.gov.cn/">陽信縣人民政府</a></li><li><a href="http://www.wudi.gov.cn/">無棣縣人民政府</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 物聯網應用技術二班周春磊作品<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;}/* 頂部圖片的區域 *//* 頂部圖片的區域 *//* 頂部圖片的區域 *//* 頂部圖片的區域 *//* 頂部圖片的區域 *//* 頂部圖片的區域 */@keyframes qh {/*---每圖片切換有兩個階段：位移切換和靜置。中間的效果可以任意定制----*/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;}/* 導航欄部分開始了 *//* 導航欄部分開始了 *//* 導航欄部分開始了 */.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);}/* 主頁的主體部分 *//* 主頁的主體部分 *//* 主頁的主體部分 *//* 主頁的主體部分 *//* 主頁的主體部分 *//* 主頁的主體部分 */.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%;/* 添加動畫 */transition: all 0.6s;}/* 當鼠標經過時放大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;/* 設置主軸 */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;}/* 頁腳部分 *//* 頁腳部分 *//* 頁腳部分 */.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部分
function addEvent(obj, evtType, func, cap) {cap = cap || false;if (obj.addEventListener) {obj.addEventListener(evtType, func, cap);return true;} else if (obj.attachEvent) {if (cap) {obj.setCapture();return true;} else {return obj.attachEvent("on" + evtType, func);}} else {return false;} }function getPageScroll() {var xScroll, yScroll;if (self.pageXOffset) {xScroll = self.pageXOffset;} else if (document.documentElement && document.documentElement.scrollLeft) {xScroll = document.documentElement.scrollLeft;} else if (document.body) {xScroll = document.body.scrollLeft;}if (self.pageYOffset) {yScroll = self.pageYOffset;} else if (document.documentElement && document.documentElement.scrollTop) {yScroll = document.documentElement.scrollTop;} else if (document.body) {yScroll = document.body.scrollTop;}arrayPageScroll = new Array(xScroll, yScroll);return arrayPageScroll; }function GetPageSize() {var xScroll, yScroll;if (window.innerHeight && window.scrollMaxY) {xScroll = document.body.scrollWidth;yScroll = window.innerHeight + window.scrollMaxY;} else if (document.body.scrollHeight > document.body.offsetHeight) {xScroll = document.body.scrollWidth;yScroll = document.body.scrollHeight;} else {xScroll = document.body.offsetWidth;yScroll = document.body.offsetHeight;}var windowWidth, windowHeight;if (self.innerHeight) {windowWidth = self.innerWidth;windowHeight = self.innerHeight;} else if (document.documentElement && document.documentElement.clientHeight) {windowWidth = document.documentElement.clientWidth;windowHeight = document.documentElement.clientHeight;} else if (document.body) {windowWidth = document.body.clientWidth;windowHeight = document.body.clientHeight;}if (yScroll < windowHeight) {pageHeight = windowHeight;} else {pageHeight = yScroll;}if (xScroll < windowWidth) {pageWidth = windowWidth;} else {pageWidth = xScroll;}arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)return arrayPageSize; } var AdMoveConfig = new Object(); AdMoveConfig.IsInitialized = false; AdMoveConfig.ScrollX = 0; AdMoveConfig.ScrollY = 0; AdMoveConfig.MoveWidth = 0; AdMoveConfig.MoveHeight = 0; AdMoveConfig.Resize = function() {var winsize = GetPageSize();AdMoveConfig.MoveWidth = winsize[2];AdMoveConfig.MoveHeight = winsize[3];AdMoveConfig.Scroll(); } AdMoveConfig.Scroll = function() {var winscroll = getPageScroll();AdMoveConfig.ScrollX = winscroll[0];AdMoveConfig.ScrollY = winscroll[1]; } addEvent(window, "resize", AdMoveConfig.Resize); addEvent(window, "scroll", AdMoveConfig.Scroll);function AdMove(id) {if (!AdMoveConfig.IsInitialized) {AdMoveConfig.Resize();AdMoveConfig.IsInitialized = true;}var obj = document.getElementById(id);obj.style.position = "absolute";var W = AdMoveConfig.MoveWidth - obj.offsetWidth;var H = AdMoveConfig.MoveHeight - obj.offsetHeight;var x = W * Math.random(),y = H * Math.random();var rad = (Math.random() + 1) * Math.PI / 6;var kx = Math.sin(rad),ky = Math.cos(rad);var dirx = (Math.random() < 0.5 ? 1 : -1),diry = (Math.random() < 0.5 ? 1 : -1);var step = 1;var interval;this.SetLocation = function(vx, vy) {x = vx;y = vy;}this.SetDirection = function(vx, vy) {dirx = vx;diry = vy;}obj.CustomMethod = function() {obj.style.left = (x + AdMoveConfig.ScrollX) + "px";obj.style.top = (y + AdMoveConfig.ScrollY) + "px";rad = (Math.random() + 1) * Math.PI / 6;W = AdMoveConfig.MoveWidth - obj.offsetWidth;H = AdMoveConfig.MoveHeight - obj.offsetHeight;x = x + step * kx * dirx;if (x < 0) {dirx = 1;x = 0;kx = Math.sin(rad);ky = Math.cos(rad);}if (x > W) {dirx = -1;x = W;kx = Math.sin(rad);ky = Math.cos(rad);}y = y + step * ky * diry;if (y < 0) {diry = 1;y = 0;kx = Math.sin(rad);ky = Math.cos(rad);}if (y > H) {diry = -1;y = H;kx = Math.sin(rad);ky = Math.cos(rad);}}this.Run = function() {var delay = 10;interval = setInterval(obj.CustomMethod, delay);obj.οnmοuseοver = function() {clearInterval(interval);}obj.οnmοuseοut = function() {interval = setInterval(obj.CustomMethod, delay);}} }轉載請說明出處
總結
以上是生活随笔為你收集整理的我的家乡介绍网站设计与实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： dnf脚本是php,dnf自动搬砖脚本教
- 下一篇： 汉字编码查询网站