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

以“我的家乡”为主题的前端网页设计
废话不多说先上图：

用 :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="data:images/top-1.jpg" /></li><li><img src="data:images/top-2.jpg" /></li><li><img src="data:images/top-3.jpg" /></li><li><img src="data:images/top-4.jpg" /></li><li><img src="data: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="data: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="data: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="data: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="data: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="data: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);}}
}

转载请说明出处

我的家乡介绍网站设计与实现相关推荐

HTML5期末大作业：我的家乡介绍网页设计——莆仙(6页) 代码质量好 HTML+CSS+JavaScript
HTML5期末大作业:我的家乡网页设计--莆仙(6页) 代码质量好 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品 1.临近期末, ...
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你还 ...
html大作业网页代码景点介绍网站设计——汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行游玩主题住宿网页
HTML5期末大作业:景点介绍网站设计--汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行游玩主题住宿网页常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...
HTML5期末大作业：动漫人物介绍网站设计——柯南(5页) 含报告 HTML+CSS+JavaScript dw网页设计 web网页设计与开发
HTML5期末大作业:动漫人物介绍网站设计--柯南(5页) 含报告 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计 ...
HTML5期末大作业：动漫人物介绍网站设计——哆啦A梦(5页) HTML+CSS+JavaScript 学生动漫网页设计模板下载哆啦A大学生HTML网页制作作品简单漫画网页设计成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
HTML5期末大作业：动漫人物介绍网站设计——柯南(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品学生动漫网页设计模板下载
HTML5期末大作业:动漫人物介绍网站设计--柯南(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材 ...
港珠澳大桥介绍网站设计【期末大作业】源码
文章目录前言一.网站设计要求二.信息等相关素材收集三.个人网站的总体规划和步骤 1.设计的目的 2.设计布局 3.网站具体设计过程总结前言网页预览一.网站设计要求 1️⃣站点题目:自定 ...
HTML5期末大作业：明星个人介绍网站设计——杨洋(10页) HTML+CSS+JavaScript 个人网页制作学生个人网页Dreamweaver设计作业学生HTML个人网页作业作品下载
HTML5期末大作业:明星个人介绍网站设计--杨洋(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题 ...
HTML5期末大作业：电影介绍网站设计——电影从你的全世界路过(4页)带音乐特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计
HTML5期末大作业:电影介绍网站设计--电影从你的全世界路过(4页)带音乐特效 HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业 ...
HTML5期末大作业：景点介绍网站设计——汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行游玩主题住宿网页
HTML5期末大作业:景点介绍网站设计--汉中印象景点介绍 (19页) HTML+CSS+JavaScript 学生旅行游玩主题住宿网页常见网页设计作业题材有个人. 美食. 公司. 学校. 旅 ...

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

我的家乡介绍网站设计与实现相关推荐

最新文章

热门文章