样图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#head
{
margin: 0;
height: 170px;
padding: 0 0 0 250px;
background: url(img/top_bg2.jpg) ; //定义背景图
}
#pho2{
padding: 20px 0 0 110px; //设置填充
}
#adress ul{
height: 40px;
padding: 15px 0 0 0;
margin: 0;
background-color: darkblue;
text-align: center;
}
.adress_span {
font-family: "微软雅黑";
font-size: 20px;
}
#adress ul li{
list-style: none;
margin: 0;
padding: 0;
display: inline-block; //横向显示
width: 170px;
}
.adress_a a{ //导航页面设置
margin: 0;
width: 130px;
padding: 15px;
color: white;
font: 20px "microsoft yahei";
text-decoration: none;
}
.adress_a a:hover{
color: darkblue;
background-color: #d1f1ff;
}
#txt{
margin: 0;
padding: 0 250px;
}
#txt h2{
font-size: 30px;
text-align: center;
}
#txt img{
float: right;
}
p{
font-family: "微软雅黑";
font-size: 21px;
white-space: pre-wrap;
}
#pho4{
padding: 0 300px 0 0;
}
#pho5{
height: 130px;
width: 300px;
}
#down{
height: 160px;
border: 1px solid;
background-color: darkblue;
text-align: center;
padding: 100px 0 0 400px;
margin: 0;
}
#down span{
color: white;
white-space: pre-wrap;
font-size: 16px;
padding: 20px 25px 0 0 ;
margin: 0;
}
.down_con{
float: left;
}
#pho_down{
margin: 0;
padding: 5px 0 0 0;
}
#pho7{
margin: 0;
padding: 0 10px;
}
</style>
</head>
<body>
<div id="main"> //定义主内容
<div id="head"> //标题logo
<img src="img/logo1.png" id="pho1"/>
<img src="img/load1.png" id="pho2"/>
</div>
<div id="adress"> //导航页
<ul>
<li class="adress_a"><a href="#"><span class="adress_span">首页</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">新闻</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">办事大厅</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">执法公开</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">政府信息公开</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">互动警戒警示</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">互动</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">警戒</span></a></li>
<li class="adress_a"><a href="#"><span class="adress_span">警示</span></a></li>
</ul>
</div>
<div id="txt"> //定义文本
<h2 style="white-space: pre-wrap;">弘扬“红船”精神 把公安工作做到百姓心坎上</h2>
<p> 11月8日下午，省公安厅召开党委会议，传达学习***总书记带领***中央政治局常委瞻仰***一大会址、南湖红船时的重要讲话精神。副省长、省公安厅党委书记、厅长舒庆主持会议讲话。<img src="img/gongan2.jpg" width="300px" id="pho3";/>舒庆指出，党的十九大胜利闭幕仅一周，***总书记带领新一届中央政治局常委，专程瞻仰上海***一大会址和浙江嘉兴南湖红船,回顾建党历史,重温入党誓词，并发表重要讲话,充分宣示了新一届***集体的坚定政治信念,也展示了新一届***集体不忘初心、牢记使命、永远奋斗的坚定决心,彰显了新一届***集体为实现党的十九大提出的目标任务而不懈奋斗的政治责任感和历史使命感,给全党上了一堂生动的党课、树立了光辉的典范。</p>
<p> 舒庆指出, 11月5日一早，<img src="img/gongan3.jpg" width="300px"; id="pho4"/>省委书记谢伏瞻带领省委常委,从郑州驱车赶赴兰考县，瞻仰“焦桐”、凝望“习桐” ,共同追思焦裕禄精神，集体重温入党誓词。</p><br /><br /><br />
<p>舒庆强调,全省各级公安机关要认真学习贯彻***总书记带领***中央政治局常委<img src="img/gongan4.jpg" id="pho5"/>瞻仰***一大会址、南湖红船时的重要讲话精神,按照中央和省委的部署要求，旗帜鲜明讲政治,坚决向以***同志为核心的党中央看齐,以***新时代中国特色社会主义思想为指导，锐意进取 ,扎实工作,确保党的十九大确定的目标任务在全省公安机关得到全面准确贯彻落实,奋力开创河南公安事业发展新境界。</p>
</div>
<div id="down"> //底部logo
<span class="down_con">Copyright @ 2014-2018 版权所有：人民公安 备案序号：1234567890号</span>
<div id="pho_down" class="down_con">
<img src="img/coin10.gif" id="pho6"/>
<img src="img/coin11.gif" id="pho7"/>
<img src="img/coin12.gif" id="pho8"/>
</div>
</div>
</div>
</body>
</html>
运行结果：
京公网安备 11010502036488号