如有运用不太恰当的地方,请大家批评指正!
下面展示一些 html代码如下 css另附
。
//
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="common.css">
<title>阳泉市人民政府门户网站</title>
<meta name="description" content="访谈嘉宾:山西正和天元科贸集团董事局主席魏艾玲,阳泉职业技术学院副教授马中霞。访谈摘要:日前,阳泉市精神文明建设指导委员会作出关于表彰第六届阳泉道德模范的决定。">
<meta name="keywords" content="阳泉,山西阳泉,李彦宏,刘慈欣,中共第一城">
</head>
<body>
<div class="shortcut">
<div class="w">
<div class="fl">
<ul>
<div class="weather">
<i class="rili fl"></i>
<li>今天是:2021年1月30日</li>
<li>星期六</li>
<li>腊月十八</li>
</div>
<li>
<a href="###">山西</a>
</li>
<li>
<a href="###" class="style-red m">6℃~12℃</a>
</li>
<div class="quality fl">
<li>
<p>空气质量</p>
<i class="icomoon"></i>
</li>
</div>
</ul>
</div>
<div class="fr">
<li>中国政府网</li>
<li>·</li>
<li>中国人民政府</li>
</div>
</div>
</div>
<div class="nav">
<div class="w nav_s">
<a href="http://www.yq.gov.cn/"><h1><div class="logo"></div>阳泉市人民政府门户网站</h1></a>
<div class="search">
<div class="search_top fr">
<ul>
<li><i class="icomoon"></i></li>
<li><i class="icomoon"></i></li>
<li><i class="icomoon"></i></li>
<li><i class="icomoon"></i></li>
<li>繁体中文</li>
<li class="m"></li>
<li>无障碍</li>
</ul>
</div>
<div class="search_bottom">
<input type="text" class="text" value="请输入关键字">
<button>搜索</button>
</div>
</div>
</div>
</div>
<div class="nav_f">
<div class="w">
<div class="footer_nav">
<ul>
<li><a href="http://www.yq.gov.cn/">首页</a></li>
<li><a href="http://www.yq.gov.cn/">政务信息公开</a></li>
<li><a href="http://www.yq.gov.cn/">办事服务</a></li>
<li><a href="http://www.yq.gov.cn/">政民互动</a></li>
<li><a href="http://www.yq.gov.cn/">山城风情</a></li>
<li><a href="http://www.yq.gov.cn/">数据阳泉</a></li>
</ul>
</div>
</div>
</div>
<div class="middle_1">
<div class="w">
<div class="middle-left">
<a href="###"><div class="tu"></div></a>
<!-- <img src="http://www.yq.gov.cn/ywdt/tpxw/202012/W020201215279345810482.jpg" alt=""> -->
<div class="left"><</div>
<div class="right">></div>
<div class="bottom">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
<div class="middle-right">
<div class="middle-right-top">
<h3>山西智创城7号正式揭牌启动</h3>
</div>
<div class="middle-right-nav">
<ul>
<li><a href="http://www.yq.gov.cn/">今日阳泉</a></li>
<li><a href="http://www.yq.gov.cn/">区县动态</a></li>
<li><a href="http://www.yq.gov.cn/">部门工作</a></li>
<li><a href="http://www.yq.gov.cn/">公示公告</a></li>
</ul>
</div>
<div class="middle-right-bottom">
<table>
<tr>
<td>山西智创城7号正式揭牌启动01-30</td>
</tr>
<tr>
<td>山西智创城7号正式揭牌启动01-30</td>
</tr>
<tr>
<td>山西智创城7号正式揭牌启动01-30</td>
</tr>
<tr>
<td>山西智创城7号正式揭牌启动01-30</td>
</tr>
<tr>
<td>山西智创城7号正式揭牌启动01-30</td>
</tr>
<tr>
<td>山西智创城7号正式揭牌启动01-30</td>
</tr>
<tr>
<td><div class="t">山西智创城7号正式揭牌启动01-30山西智创城7号正式揭牌启动01-30山西智创城7号正式揭牌启动01-30</div></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="middle2">
<div class="w">
<div class="middle-nav">
<ul>
<li><i class="icomoon1"></i><a href="http://www.yq.gov.cn/">今日阳泉</a></li>
<li><i class="icomoon1"></i><a href="http://www.yq.gov.cn/">区县动态</a></li>
<li><i class="icomoon1"></i><a href="http://www.yq.gov.cn/">部门工作</a></li>
<li><i class="icomoon1"></i><a href="http://www.yq.gov.cn/">公示公告</a></li>
</ul>
</div>
</div>
</div>
<div class="middle-3">
<div class="w">
<div class="middle-3-1">
<div class="middle3_1">
<div class="middle-3-1-left">
视频资讯
</div>
<div class="middle-3-1-right">
<ul>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
</ul>
</div>
</div>
<div class="middle3_2">
<div class="middle-3-2-left">
阳泉发布
</div>
<div class="middle-3-2-right">
<ul>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
</ul>
</div>
</div>
<div class="middle3_3">
<div class="middle-3-3-left">
民生咨询
</div>
<div class="middle-3-3-right">
<ul>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
<li><a href="http://www.yq.gov.cn/"><p>> 2021年1月29日阳泉新闻 01-29</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="divide-1">
<div class="w">
<div class="divide"></div>
</div>
</div>
<div class="foot-content">
<div class="w">
<div class="foot">
<div class="foot-1">
<ul>
<li>
<i class="icomoon2"></i>
<br/>
<a href="http://www.yq.gov.cn/">政务信息公开</a>
</li>
<li>
<i class="icomoon2"></i>
<br/>
<a href="http://www.yq.gov.cn/">办事服务</a>
</li>
<li>
<i class="icomoon2"></i>
<br/>
<a href="http://www.yq.gov.cn/">政民互动</a>
</li>
</ul>
</div>
<div class="foot-3">
<div class="foot-3-top">
<a href="http://www.yq.gov.cn/"></a>
</div>
<div class="foot-3-bottom">
<ul>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
<li><a href="http://www.yq.gov.cn/">政府公报</a></li>
</ul>
</div>
</div>
<div class="foot-4">
<div class="foot-img"><img src="http://www.yq.gov.cn/zmhd/zxft/202101/W020210129405001321272.jpg" alt=""></div>
<p>主题:人民调解为人民</p><br/>
<p>时间:2021-01-29 11:11:00</p><br/>
<p>访谈嘉宾:平定县司法局人民参与和促进法治科科长石成秀,荫营镇人民调解委员会委员侯立敏。</p>
</div>
</div>
</div>
</div>
<div class="foot-content-2">
<div class="w">
<div class="foot-2">
<select>
<option>--市委工作部门--</option>
<option>组织部</option>
<option>市委办公室</option>
<option>阳泉市统一战线工作室</option>
<option>市委老干部局</option>
<option>市委统战部</option>
<option>市直机关管理局</option>
</select>
<select>
<option>--政府工作部门--</option>
<option>市人社局</option>
<option>市水利局</option>
<option>市住建局</option>
<option>市统计局</option>
<option>市财政局</option>
<option>市能源局</option>
</select>
<select>
<option>--政府其他部门--</option>
<option>市税务局</option>
<option>市气象局</option>
<option>市总工会</option>
<option>市广播电视台</option>
<option>市妇联</option>
<option>市残联</option>
</select>
<div class="foot-2-right">
信息报送排行榜
</div>
</div>
</div>
</div>
<div class="footer">
<div class="w">
<div class="footer-1">
<div class="footer-left">
<img src="http://www.yq.gov.cn/images/yqdzjgred.png" alt="">
</div>
<div class="footer-right">
<p>网站声明 | 联系我们 | 网站地图 | 设为首页<br/>
中共阳泉市委、阳泉市人民政府主办 阳泉市信息化中心承办 网络技术维护值班电话:0353-2294111</p>
<p class="gray">使用大于1366*768分辨率/IE10.0或以上浏览器可以体验最佳浏览效果!</p>
<p>ICP备案编号:晋ICP备 05007173 号 网站标识码:1403000041 版权所有:阳泉市人民政府<br/>
晋公网安备 14030202000019 号</p>
</div>
</div>
</div>
</div>
<div class="extra">
<a href="http://www.yq.gov.cn/"><div class="fixed">
<h4>公告</h4>
<p>关于做好阳泉市2020年全面深化改革工作满意度网络问卷调查的通知。(点击查阅)</p>
</a>
</div>
</div>
</body>
</html>
// css
.fl {
float: left;
}
.fr {
float: right;
}
.body {
height: 2000px;
}
@font-face {
font-family: 'icomoon';
src: url('font/icomoon.eot?7kkyc2');
src:
url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.fr .icomoon {
font-family: 'icomoon';
font-size: 14px;
line-height: 26px;
}
.w {
width: 1200px;
margin: 0 auto;
}
.style-red {
color: #c81623;
}
.spacer {
width: 1px;
height: 12px;
background-color: #666;
margin: 9px 12px;
}
/* 顶部快捷导航栏start */
.shortcut {
height: 31px;
background-color: rgb(223,239,255);
line-height: 31px;
}
.shortcut li {
float: left;
margin: 0 5px;
}
.fr li {
float: left;
left: 1176px;
top: 0;
}
.weather {
float: left;
}
.weather .rili{
font-family: 'icomoon';
font-size: 16px;
}
.quality {
float: left;
}
.quality .icomoon {
font-family: 'icomoon';
font-size: 16px;
}
.m {
height: 1px ;
border-color: #666;
margin:0 5px;
}
/* 顶部快捷导航栏end */
.nav {
background-image:-webkit-linear-gradient(top,rgb(223,239,255),white);
}
.nav_s {
position: relative;
height: 181px;
}
.nav_s a {
font-size: 0;
}
.logo {
position: absolute;
top: 23px;
left: 0;
width: 450px;
height: 153px;
background: url(img/logo.png) no-repeat ;
}
.search {
position: absolute;
top: 55px;
right: 0px ;
}
.search .search_top {
margin-bottom: 10px;
height: 32px;
}
.search .search_top li {
float: left;
height: 25px;
font-size: 14px;
line-height: 25px;
text-align: center;
padding: 0 5px;
}
.search .search_top .m {
height: 25px ;
border-right: 1px solid #666;
line-height: 25px;
}
.icomoon{
font-family: 'icomoon';
font-size: 16px;
line-height: 25px ;
}
.search_bottom .text {
float: left;
width: 445px;
height: 32px;
border: 2px solid rgb(52, 114, 172);
color: #ccc;
padding-left: 10px;
border-radius: 16px 0 0 16px;
}
.search_bottom button {
float: left;
width: 82px;
height: 36px;
background-color: rgb(52, 114, 172);
border: 0;
margin-left: -2px;
font-size: 16px;
color: #f1f1f1;
border-radius: 0 16px 16px 0;
}
.footer_nav {
height: 57px;
}
.footer_nav li {
float: left;
width: 198px;
height: 57px;
border: 1px solid #f1f1f1;
background-color: rgb(1,82,147);
text-align: center;
}
.footer_nav li a {
color: #f1f1f1;
font-size: 22px;
line-height: 57px;
}
.footer_nav li:hover,
.footer_nav li a:hover {
background-color: #fff;
color: rgb(1,82,147);
}
/* middle 1 */
.middle-left {
float: left;
position: relative;
width: 735px;
height: 474px;
left: 0;
margin:5px 0;
/* background-color: pink; */
background: url(http://www.yq.gov.cn/ywdt/tpxw/202012/W020201215279345810482.jpg) no-repeat -140px -50px;
}
.middle-left .left {
/* 不占位置 随便移动位置 必须用绝对定位 */
position: absolute;
top: 50%;
margin-top: -43px;
left: 0%;
/* 绝对定位的盒子直接给宽高 */
width: 57px;
height: 87px;
font-size: 52px;
background-color: #ccc;
border-radius: 0 10px 10px 0;
text-align: center;
line-height: 87px;
color: #fff;
}
.middle-left .right {
position: absolute;
top: 50%;
margin-top: -43px;
right: 0;
width: 57px;
height: 87px;
font-size: 52px;
background-color: #ccc;
border-radius: 10px 0 0 10px;
text-align: center;
line-height: 87px;
color: #fff;
}
.middle-left .left:hover, .middle-left .right:hover {
background-color: rgba(0,0,0,0.5);
}
.middle-left .bottom {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
width: 715px;
height: 20px;
border-radius: 3px 3px 3px 3px;
background-color: rgba(0,0,0,0.3);
}
.middle-left .bottom li {
float: right;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 5px ;
cursor: pointer;
}
.middle-left .bottom li:hover{
background:url(img/yuan.png) no-repeat -150px -150px;
}
.middle-left .tu {
position: absolute;
display: none;
top: 0;
left: 0;
width: 500px;
height: 350px;
background:url(http://www.yq.gov.cn/ywdt/tpxw/202012/W020201215279345810482.jpg) no-repeat;
background-size: contain;
}
.middle-left:hover{
display: block;
}
.middle-right {
float: left;
position: relative;
right: 0;
margin:5px 0;
width: 456px;
height: 474px;
margin-left: 1px;
padding: 0 3px;
}
.middle-right-top {
width: 446px;
height: 107px;
line-height: 117px ;
text-align: center;
padding: 5px;
}
.middle-right-top h3 {
font-size: 33px;
font-weight: 700;
background-color: #fff;
}
.middle-right-nav li {
float: left;
width: 114px;
}
.middle-right-nav li a {
display: block;
width: 114px;
height: 46px;
border: 2px solid #ccc;
text-align: center;
line-height: 46px;
font-size: 20px;
color: black;
background-color: rgb(249,249,249);
margin-top: -2px;
}
.middle-right-bottom {
width: 456px;
height: 290px;
}
.middle-right-bottom tr {
height: 40px;
font-size: 18px;
}
.middle-right-bottom .t {
width: 456px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* middle-2 */
.middle-nav {
height: 50px;
background-color: rgb(230,228,229);
}
.middle-nav li {
float: left;
width: 273px;
text-align: center;
line-height:50px;
margin: 0 13px;
box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}
.middle-nav li a {
font-size: 20px;
}
.middle-nav .icomoon1 {
font-family: 'icomoon';
font-size: 25px;
margin-right: 3px;
}
/* middle3 */
.middle-3-1{
float: left;
position: relative;
width: 1200px;
height: 143px;
background-image:-webkit-linear-gradient(left,rgb(223,239,255),white,rgb(223,239,255));
margin: 16px 0;
}
.middle3_1 {
position: absolute;
width: 400px;
height: 143px;
}
.middle-3-1-left {
position: absolute;
top: 14px;
left: 25px;
width: 20px;
height: 118px;
background-color: rgb(3,81, 143);
border-radius: 10px;
font-size: 20px;
color: rgb(178, 220, 236);
margin: 0 20px;
box-shadow: 0 8px 5px black;
}
.middle-3-1-right {
position: absolute;
top: 14px;
left: 82px;
font-size: 13px;
color: black;
}
.middle-3-1-right em,p {
float: left;
}
.middle-3-1-right p {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
}
.middle3_2 {
position: absolute;
left: 400px;
width: 400px;
height: 143px;
}
.middle-3-2-left {
position: absolute;
top: 14px;
left: 25px;
width: 20px;
height: 118px;
background-color: rgb(3,81, 143);
border-radius: 10px;
font-size: 20px;
color: rgb(178, 220, 236);
margin: 0 20px;
box-shadow: 0 8px 5px black;
}
.middle-3-2-right {
position: absolute;
top: 14px;
left: 82px;
font-size: 13px;
color: black;
}
.middle-3-2-right em,p {
float: left;
}
.middle-3-2-right p {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
}
.middle3_3 {
float: left;
position: absolute;
left: 800px;
width: 400px;
height: 143px;
}
.middle-3-3-left {
position: absolute;
top: 14px;
left: 25px;
width: 20px;
height: 118px;
background-color: rgb(3,81, 143);
border-radius: 10px;
font-size: 20px;
color: rgb(178, 220, 236);
margin: 0 20px;
box-shadow: 0 8px 5px black;
}
.middle-3-3-right {
position: absolute;
top: 14px;
left: 82px;
font-size: 13px;
color: black;
}
.middle-3-3-right em,p {
float: left;
}
.middle-3-3-right p {
float: left;
height: 40px;
line-height: 40px;
text-align: center;
}
/* 分隔栏 */
.divide {
float: left;
position: relative;
width: 1200px;
height: 88px;
margin: 16px 0;
background:url(img/bj.png) ;
background-size: cover;
}
/* 倒数第二个内容框 */
.foot {
float: left;
position: relative;
width: 1200px;
height: 415px;
}
.foot-1 {
float: left;
}
.foot-1 li {
height: 107px;
width: 120px;
background-color: rgb(249, 249, 249);
padding: 15px 30px;
border: 1px solid #ccc;
}
.foot-1 li .icomoon2 {
font-family: 'icomoon';
font-size: 30px;
text-align: center;
}
.foot-1 li a {
font-size: 25px;
text-align: center;
}
.foot-3 {
float: right;
position: absolute;;
left: 910px;
}
.foot-3-top {
height: 104px;
width: 280px;
background: url(http://www.yq.gov.cn/images/gk-an1.png) no-repeat -28px;
background-size: cover;
border: 0 solid #666;
border-radius: 10px;
padding: 5px;
margin: 10px 0;
}
.foot-3-bottom li {
height: 36px;
width: 280px;
line-height: 36px;
text-align: center;
background-color: rgb(230, 245, 252);
border-radius: 20px;
margin-bottom: 5px;
}
.foot-3-bottom li a {
font-size: 20px;
color: rgb(103, 166, 207);
}
/* foot-2 */
.foot-2 {
float: left;
position: relative;
width: 1200px;
height: 40px;
border-bottom: 1px solid;
margin-top: 10px ;
}
.foot-2 select {
height: 35px;
margin: 0 15px;
}
.foot-2 select option {
font-size: 15px;
}
.foot-2-right {
float: right;
width: 310px;
height: 38px;
border-bottom: 1px solid teal;
text-align: center;
line-height: 38px;
background-color: rgb(243,256,251);
}
/* footer */
.footer {
position: relative;
top: 1260px;
height: 183px;
background-color: rgb(237,237,237);
}
.footer-1 {
width: 1200px;
position: relative;
height: 183px;
}
.footer-left {
position: absolute;
left: 178px;
top:50px;
width: 300px;
height: 124px;
border-right:1px solid #ccc ;
}
.footer-right {
position: absolute;
top: 30px;
left: 520px;
}
.footer-right p {
color: black;
font-size: 17px;
}
.footer-right .gray {
color: rgb(197, 198, 200);
}
.foot-4 {
position: absolute;
left:200px;
width: 700px;
height: 415px;
}
.foot-img {
height:350px;
width:530px;
}
.foot-img img {
margin:0 85px;
height: 100%;
width: 100%;
}
.foot-4 p {
width: 700px;
font-size: 15px;
text-align: center;
}
/* 最后一部分啦 */
.fixed {
position: fixed;
left: 50%;
margin-left: 670px;
width: 250px;
height: 280px;
background-color: rgb(79,122,175);
}
.fixed h4 {
font-size: 20px;
margin: 20px 100px;
color: rgb(230, 245, 252);
}
.fixed p {
height: 20px;
line-height: 20px;
font-size: 15px;
text-indent: 2em;
color: rgb(230, 245, 252);
}
成品如下: