以“我的家乡”为主题的前端网页设计
废话不多说先上图：
用 :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);
}
}
}
转载请说明出处
扫一扫
1619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
