| HTML5期末大作业：我的家乡网站设计与实现 | 您所在的位置：网站首页 › 如何制作介绍家乡美食的视频 › HTML5期末大作业：我的家乡网站设计与实现 |
HTML5期末大作业：我的家乡网站设计与实现
|
以“我的家乡”为主题的前端网页设计 废话不多说先上图： 用 :hover实现鼠标放到图片上实现放大效果 有轮播图 纯css 替换的话图片尺寸 1100px * 299px 有浮动广告 只展示了主页部分 新手小白 不喜勿喷 html部分代码 DOCTYPE html> 滨州主页 首页 家乡历史 家乡美景 家乡名人 家乡美食 家乡建筑 欢迎观看宣传片 你的浏览器不支持视频播放 请更换IE9 以上的浏览器 滨州简介 滨州市位于黄河下游、鲁北平原，地处黄河三角洲尾闾，北临渤海，东与东营市接壤，南和淄博市毗邻，西同德州市和济南市搭界，是山东的北大门。现辖滨城区、沾化区、惠民县、阳信县、无棣县、博兴县、邹平县五县二区和滨州经济开发区、滨州北海经济开发区以及滨州高新技术产业开发区，版图面积9453平方千米，人口379万。滨州交通便利。济青高速、滨博高速、京滨高速和205、220国道穿越境内，是连接苏、鲁、京、津的重要通道。滨州是中国最大的冬枣生产基地，渤海文蛤、梭子蟹等名优水产品名扬海内外。 滨州因居“渤海之滨·黄河之州”而得名。2000年，撤地设市，现辖七个县市区和三个市属开发区，是国家“黄蓝”两区战略的主战场，也是京津冀协同发展建设的重要组成部分。 人口数据 一、全市常住人口 滨州市住人口为374.85万人，同第五次全国人口普查2000年11月1日零时的356.41万人相比，十年共增加了18.44万人。增长5.17%，年平均增长0.51%， 二、家庭户人口 全市常任人口中共有家庭户13115.91万户， 家庭户人口为357.02万人，平均每个 家庭户的人口为3.08人,比200单五次人口普查的.26人减少70.18人。 三、性别构成 全市常住人口中，男性为188.40万人，占总人口的50.26%;女性为186.45万人， 占总人口的49.74%，总人口性别比(以女性为100,男性对女性的比例)由2000年 的100.90.上升为101.05。 政治文化 滨州市位于山东省的北部，黄河三角洲腹地。因公元951年(后周显德三年)置滨州而 得名。滨州历史悠久，源远流长，传承有序。从鲁北阳信小韩遗址出土的文物判断，早在七 千多年以前，这就有人类繁衍，是黄河文化和齐文化的发祥地之一。正如《易●系辞》所载: 包牺(伏羲)氏没，神农氏作。斫木为耜，揉木为耒，耒耨之利，以教天下。”商代为薄 姑氏领地，因“薄”与“蒲”、“博”“渤”“鹁”等字通假，才有了“蒲台”“博兴”“渤海 湾”“鹁鸪李”诸多地名的历史由来。秦朝开始建县,从西汉起至民国先后设有郡(国)、州、 府、道等地方行政建置，五代时期置滨州，以濒临渤海而得名。 经济概况 经济运行总体平稳。全年实现生产总值（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%。 物价指数平稳上涨。居民消费价格总水平上涨0.9%，其中，服务价格上涨3.1%，消费品价格下降0.5%。工业生产者出厂价格上涨7.9%，购进价格上涨14.8%。 友情链接 滨州市人民政府 滨州市教育局 滨州市公安局 滨州市民政局 滨州市司法局 滨州市财政局 滨州市统计局 滨城区人民政府 沾化区人民政府 惠民县人民政府 阳信县人民政府 无棣县人民政府 博兴县人民政府 邹平市人民政府 > Copyright © 2020 物联网应用技术二班周春磊作品 建议使用IE9以上的浏览器 var ad1 = new AdMove("gg1"); ad1.Run();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 pageHeight = yScroll; } if (xScroll 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() 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 dirx = -1; x = W; kx = Math.sin(rad); ky = Math.cos(rad); } y = y + step * ky * diry; if (y 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); } } }转载请说明出处
|
有视频
【本文地址】
公司简介
联系我们