有视频
有轮播图 纯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>
<!-- 顶部轮播图的盒⼦ -->html主页
<div class="box-top w">
<lu class="kuai">
<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">
<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.1 8⼈。
</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 ></div>
</div>
<!-- 外链部分 -->
<div class="wl w">
<h1>友情链接</h1>
<br>
<ul>
<li>
<a href="v/">滨州市⼈民政府</a>
<a href="v/">滨州市⼈民政府</a>
</li>
<li>
<a href="v/">滨州市教育局</a>
</li>
<li>
<a href="v/">滨州市公安局</a>
</li>
<li>
<a href="v/">滨州市民政局</a>
</li>
<li>
<a href="v/">滨州市司法局</a>
</li>
<li>
<a href="v/">滨州市财政局</a>
</li>
<li>
<a href="v/">滨州市统计局</a>
</li>
</ul>
<br>
<ul>
<li>
<a href="v/">滨城区⼈民政府</a>
</li>
<li>
<a href="v/">沾化区⼈民政府</a>
</li>
<li>
<a href="v/">惠民县⼈民政府</a>
</li>
<li>
<a href="v/">阳信县⼈民政府</a>
</li>
<li>
<a href="v/">⽆棣县⼈民政府</a>
</li>
<li>
<a href="v/">博兴县⼈民政府</a>
</li>
<li>
<a href="v/">邹平市⼈民政府</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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。