标签：前端 基础 Day06 height width 文物保护 margin top left
文章目录
Html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" type="text/css" href="js/pagination/mricode.pagination.css" />
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.11.0.min.js"></script>
<title>南京市政务服务首页</title>
</head>
<body>
<div class="header">
<div class="container clearfix">
<div class="head-left clearfix">
<span>南京市</span>
<span>多云</span>
<span><img src="./images/Partly-Cloudy-Large.png" alt=""/></span>
<span>4-18℃</span>
<span>PM2.5:125</span>
</div>
<div class="head-right clearfix">
<ul class="nav-list clearfix">
<li>
<a href="javascript:;">首页</a>
</li>
<li>
<a href="javascript:;">政务公开</a>
</li>
<li class="current">
<a href="javascript:;">审批业务</a>
</li>
<li>
<a href="javascript:;">公共资源交易</a>
</li>
<li>
<a href="javascript:;">12345热线</a>
</li>
</ul>
<div class="user-info clearfix">
<span class="user-name">谭清喜</span>
<a class="quit" href="javascript:;"></a>
</div>
</div>
</div>
</div>
<div class="main">
<div class="container clearfix">
<!--logo-->
<div class="banner clearfix">
<div class="logo clearfix">
<a class="logo-img" href="javascript:;"></a>
</div>
<div class="search-wrap clearfix">
<input type="text" placeholder="   请输入关键字/办件编号" />
<a class="sear" href="javascript:;"></a>
<a class="ques" href="javascript:;">提 问</a>
<div class="hot-search clearfix">
<span class="hot-title">热搜:</span>
<ul class="fl-li clearfix">
<li>
<a href="javascript:;">职业资格</a>
</li>
<li>
<a href="javascript:;">就业</a>
</li>
<li>
<a href="javascript:;">退休</a>
</li>
<li>
<a href="javascript:;">纳税</a>
</li>
</ul>
</div>
</div>
</div>
<!--首页元素-->
<div class="position clearfix">
<a href="javascript:;">首页 ></a>
<span>审批服务</span>
</div>
<div class="matter-left">
<h3 class="matter-title">事项选择</h3>
<ul class="matter-type">
<li class="active">
<a href="#person">个人办事</a>
</li>
<li>
<a href="#bussiness">企业办事</a>
</li>
<li>
<a href="#depart">部门办事</a>
</li>
<li>
<a href="#area">按区域服务</a>
</li>
</ul>
</div>
<div class="matter-right">
<div id="person" class="tab-content">
<div class="clearfix">
<div class="search-container">
<input type="text" />
<a href=""></a>
</div>
</div>
<ul class="matter-list">
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon01.png" alt="" />
</div>
<p class="matter-name">司法公正</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon02.png" alt="" />
</div>
<p class="matter-name">执业资格</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon03.png" alt="" />
</div>
<p class="matter-name">教育</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon04.png" alt="" />
</div>
<p class="matter-name">交通</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon05.png" alt="" />
</div>
<p class="matter-name">医疗</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon06.png" alt="" />
</div>
<p class="matter-name">就业</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon07.png" alt="" />
</div>
<p class="matter-name">文化体育</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon08.png" alt="" />
</div>
<p class="matter-name">设立变更</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon09.png" alt="" />
</div>
<p class="matter-name">名族宗教</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon10.png" alt="" />
</div>
<p class="matter-name">退休养老</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon11.png" alt="" />
</div>
<p class="matter-name">住房</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon12.png" alt="" />
</div>
<p class="matter-name">纳税</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon13.png" alt="" />
</div>
<p class="matter-name">登记开办</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon14.png" alt="" />
</div>
<p class="matter-name">慈善</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/p-icon15.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
</ul>
</div>
<div id="bussiness" class="tab-content hidden">
<div class="clearfix">
<div class="search-container">
<input type="text" />
<a href=""></a>
</div>
</div>
<ul class="matter-list clearfix">
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon01.png" alt="" />
</div>
<p class="matter-name">司法公正</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon02.png" alt="" />
</div>
<p class="matter-name">执业资格</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon03.png" alt="" />
</div>
<p class="matter-name">教育</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon04.png" alt="" />
</div>
<p class="matter-name">交通</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon05.png" alt="" />
</div>
<p class="matter-name">医疗</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon06.png" alt="" />
</div>
<p class="matter-name">就业</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon07.png" alt="" />
</div>
<p class="matter-name">文化体育</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon08.png" alt="" />
</div>
<p class="matter-name">设立变更</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon09.png" alt="" />
</div>
<p class="matter-name">名族宗教</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon10.png" alt="" />
</div>
<p class="matter-name">退休养老</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon11.png" alt="" />
</div>
<p class="matter-name">住房</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon12.png" alt="" />
</div>
<p class="matter-name">纳税</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon13.png" alt="" />
</div>
<p class="matter-name">土地房产</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon14.png" alt="" />
</div>
<p class="matter-name">慈善</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon15.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon16.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon17.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon18.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon19.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon20.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
<li>
<a href="javascript:;">
<div class="matter-icon">
<img src="images/c-icon21.png" alt="" />
</div>
<p class="matter-name">文物保护</p>
</a>
</li>
</ul>
</div>
<div id="depart" class="tab-content hidden">
<div class="clearfix">
<div class="search-container">
<input type="text" />
<a href=""></a>
</div>
</div>
<div class="content">
<ul class="matter-list">
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
</ul>
</div>
</div>
<div id="area" class="tab-content hidden">
<div class="clearfix">
<div class="search-container">
<input type="text" />
<a href=""></a>
</div>
</div>
<div class="content">
<ul class="matter-list">
<div class="divisions">
企业注册大厅
</div>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<div class="divisions">
投资建设大厅
</div>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
<li>
<a href="javascript:;">
文物保护
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="counts clearfix">
<!--左侧公告表单-->
<div class="content-left clearfix">
<div class="advert">
<a href="javascript:;"></a>
<p class="advert-name">办件公示</p>
</div>
<div class="tableshow">
<table border="1" class="mytab">
<thead>
<tr>
<td>办公编号</td>
<td>申请人/申请单位</td>
<td>办理部门</td>
<td>申请事项</td>
<td>收件时间</td>
<td>办件状态</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="pager" class="m-pagination"></div>
<!--右侧图片链接-->
</div>
<div class="links clearfix">
<a class="green-channel" href="javascript:;">绿 色 通 道</a>
<a class="bingliancx" href="javascript:;">并联审批查询</a>
<div class="advert advert-top clearfix">
<a href="javascript:;"></a>
<p class="advert-name">办件查询</p>
<div class="search-id">
<p class="office-id">办件编号:</p>
<input type="text" />
<a href="javascript:;">查询</a>
</div>
</div>
<div class="advert advert-top2 clearfix">
<a href="javascript:;"></a>
<p class="advert-name">办件统计
<a class="advert-all" href="javascript:;">全部</a>
<a class="advert-all" href="javascript:;">本月</a>
<a class="advert-all active" href="javascript:;">今天</a>
</p>
<a class="tongji" href="javascript:;"></a>
<a class="xiaonengtj" href="javascript:;">效 能 统 计</a>
</div>
</div>
</div>
</div>
</div>
<div class="foot">
<div class="container">
<div class="left-img">
<img src="images/province.png" alt=""/>
</div>
<div class="right-img">
<img src="images/red.png" alt=""/>
</div>
<div class="foot-text">
<span>南京市政务服务管理办公室</span>
<span>版权所有：南京市信息中心</span>
<span>苏ICP备11074598-1</span>
</div>
</div>
</div>
<script type="text/x-template" id="table-tpl">
{{#data}}
<tr id="{{id}}">
<td>{{number}}</td>
<td>{{applyer}}</td>
<td>{{department}}</td>
<td>{{project}}</td>
<td>{{date}}</td>
<td>{{state}}</td>
</tr>
{{/data}}
</script>
<script>
var getDataUrl = 'getData'
</script>
<script src="_test/mock.js"></script>
<script src="_test/test_index.js"></script>
<script src="js/mustache.js"></script>
<script src="js/pagination/mricode.pagination.js"></script>
<script src="js/index.js"></script>
</body>
</html>
JS
1.index.js
/*!
* XXXҳ����
* author: xx
*/
// siblings()方法返回被选元素的所有同级元素
(function(win, $) {
$(".matter-type").on("click","a",function(e){
e.preventDefault();
var $this = $(this);
$li =$this.parent();
var id = $this.attr("href");
if(!$this.hasClass("active")){
$li.addClass("active").siblings(".active").removeClass("active");
$(id).removeClass("hidden").siblings().addClass("hidden");
}
});
var $pager =$("#pager");
// 渲染分页条
function renderPagination(total, pageIndex){
if($pager.pagination()){
$pager.pagination("destory");
}
$pager.pagination({
total: total,
pageSize: 7,
pageIndex: pageIndex
});
$pager.on("pageClicked",function(event,data){
getData(data.pageIndex);
}).on('jumpClicked',function(event,data){
getData(data.pageIndex);
});
}
// 默认调用一次
getData(0);
// 获取数据
function getData(pageIndex){
$.ajax({
url:getDataUrl,
data:{
pageIndex:pageIndex,
pageSize:7
},
success:function(data){
data = JSON.parse(data);
console.log(data+"ssss");
var tableTpl = $("#table-tpl").html();
$(".tableshow tbody").html(Mustache.render(tableTpl,data));
renderPagination(data.total,pageIndex);
}
});
}
}(this, jQuery));
Mock.mock(/getData/, {
'total': 1000,
'data|7': [{
'id|+1': 1,
"number": '@integer(1000000000,9999999999)',
"applyer": '@cword(1,10)',
"department": "民政厅",
"project": "全市性社会团体成立登记",
"date": '@date(yyyy-MM-dd)',
"state": /[已未]登记/
}]
});
css
/**!
*
* author: 李毅;
* date: 20210426
*/
/*头部*/
.header {
height: 38px;
background: #fbfbfb;
line-height: 38px;
border-bottom: 1px solid #f3f3f3;
}
.container {
width: 998px;
margin: 0 auto;
}
.head-left {
float: left;
}
.head-left span {
margin-left: 10px;
}
.head-left img {
vertical-align: middle;
}
.head-right {
float: right;
}
.nav-list {
float: left;
}
.nav-list li {
float: left;
padding: 0 4px;
}
.nav-list li a {
color: #4b8fe1;
padding: 4px 16px;
}
.nav-list li.current a,
.nav-list li a:hover {
color: #fff;
background: #4b8fe1 10px 0;
border-radius: 12px;
}
.user-info {
float: right;
}
.quit {
display: inline-block;
vertical-align: middle;
margin-top: -2px;
margin-left: 13px;
width: 21px;
height: 17px;
background: url(../images/quit.png) no-repeat 0 0;
}
.quit:hover {
background-position: -30px 0;
}
/*主体显示界面*/
.main {
height: 880px;
border-bottom: 1px solid #f3f3f3;
}
/*logo图标*/
.logo {
float: left;
display: inline-block;
vertical-align: middle;
margin-top: 32px;
width: 480px;
height: 106px;
background: url(../images/logo.png) no-repeat 0 0;
}
.search-wrap {
float: right;
}
.search-wrap input {
margin-top: 40px;
margin-left: -40px;
width: 310px;
height: 40px;
font-size: 13px;
}
.search-wrap .sear {
display: inline-block;
vertical-align: middle;
padding: 0 -5px 0 0;
text-align: center;
cursor: pointer;
position: relative;
right: 7px;
top: -2px;
width: 90px;
height: 44px;
background: url(../images/search-icon.png) no-repeat center center;
background-color: #247ae2;
}
.search-wrap .ques {
display: inline-block;
padding: 0 12px;
font-size: 16px;
text-align: center;
cursor: pointer;
position: relative;
top: -2px;
right: 3px;
height: 44px;
width: 75px;
line-height: 40px;
color: #FFFFFF;
background-color: #5ac592;
font-weight: bold
}
.hot-search span {
float: left;
margin-left: -40px;
color: #247ae2;
font-size: 13px;
}
.hot-search li a {
float: left;
padding: 0 5px 0 0;
color: #999;
font-size: 13px;
}
/* position页面导航 */
.position {
height: 32px;
line-height: 32px;
background: #f3f3f3 url(../images/position.png) no-repeat 18px center;
padding-left: 48px;
}
.position a {
color: #333;
}
.position span {
color: #3e7cbe;
}
/*matter*/
.matter-left {
float: left;
width: 188px;
border: 1px solid #ececec;
box-sizing: border-box;
text-align: center;
line-height: 80px;
}
.matter-title {
background: #59a0f8;
color: #fff;
line-height: 40px;
font-size: 16px;
border-bottom: 1px solid #ececec;
}
.matter-type li {
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.matter-type a {
color: #333;
}
.matter-type li.active {
position: relative;
}
.matter-type li.active::before {
content: "";
position: absolute;
top: 50%;
right: -2px;
width: 9px;
height: 13px;
margin-top: -7px;
background: url(../images/right-arrow.png);
z-index: 10;
}
.matter-type li.active a {
color: #247ae2;
font-weight: bold;
}
/*matter 右侧显示图片栏*/
.matter {
margin-top: 20px;
}
.matter-right {
float: left;
width: 810px;
height: 362px;
border: 1px solid #ececec;
position: relative;
box-sizing: border-box;
padding: 10px;
margin-left: -2px;
}
/*搜索框*/
.search-container {
float: right;
width: 203px;
height: 30px;
padding-left: 15px;
background: url(../images/search-block.png) no-repeat;
box-sizing: border-box;
}
.search-container input {
width: 150px;
height: 20px;
border: none;
vertical-align: top;
margin-top: 4px;
outline: 0;
}
.search-container a {
display: inline-block;
width: 21px;
height: 30px;
background: url(../images/search-icon2.png) no-repeat center center;
}
.matter-list {
/*父级 弹性布局*/
display: flex;
height: 300px;
margin: 20px 30px;
overflow: auto;
flex-wrap: wrap;
}
.matter-list>li {
width: 140px;
text-align: center;
margin-bottom: 12px;
}
.matter-list a {
display: block;
color: #333;
}
.matter_list .matter-icon {
height: 30px;
}
/*部门列表*/
.content ul li {
float: left;
width: 100px;
height: 40px;
line-height: 40px;
background: #e6f0fb;
text-align: center;
margin-left: 33px;
margin-bottom: 15px;
margin-top: 10px;
}
.content a {
color: #333;
}
/*企业*/
.divisions {
position: relative;
float: left;
margin-right: 500px;
margin-left: 20px;
padding-left: 10px;
background: url(../images/dot.png) no-repeat left center;
margin-bottom: 10px;
font-weight: bold;
}
/*下面图表统计部分*/
.counts {
margin-top: 370px;
}
.content-left {
float: left;
margin-top: 10px;
width: 660px;
}
.advert {
height: 34px;
line-height: 34px;
background: #ecf6fe url(../images/advert.png) no-repeat 18px center;
padding-left: 48px;
}
.advert p {
position: relative;
right: 10px;
font-size: 14px;
font-weight: bold;
color: #247ae3;
}
/*图表界面*/
table{
table-layout:fixed;
}
table tr td
table tr th {
width: 120px;
}
.mytab {
width: 100%;
height: 100%;
}
.tableshow table {
margin-top: 10px;
border: 1px solid #f3f3f3;
width: 100%;
text-align: center;
}
.tableshow thead {
background: #f3f3f3;
font-weight: bold;
}
.tableshow tr {
width: 110px;
height: 45px;
font-size: 14px;
}
/*分页插件*/
#pager{
margin:60px 0 0 90px;
}
/*右侧图片链接CSS*/
.links {
float: right;
margin-top: 10px;
width: 330px;
}
/*绿色通道图标*/
.green-channel {
display: inline-block;
vertical-align: middle;
height: 60px;
width: 330px;
line-height: 60px;
background-image: url(../images/green-channel.jpg);
text-align: center;
font-size: 24px;
color: #fff;
font-weight: bold;
font-family: "微软雅黑";
}
/*并联审批查询*/
.bingliancx {
margin-top: 10px;
display: inline-block;
vertical-align: middle;
height: 60px;
width: 328px;
line-height: 60px;
background-image: url(../images/bingliancx.jpg);
text-align: center;
font-size: 24px;
color: #fff;
font-weight: bold;
font-family: "微软雅黑";
}
/*办件查询*/
.advert-top {
margin-top: 10px;
}
.search-id {
margin-top: 5px;
float: left;
}
.search-id p {
float: left;
color: black;
margin-left: -35px;
}
.search-id input {
float: left;
height: 24px;
width: 172px;
}
.search-id a {
display: inline-block;
font-size: 14px;
text-align: center;
cursor: pointer;
position: relative;
top: -2px;
right: -10px;
height: 28px;
width: 62px;
line-height: 28px;
color: #fff;
background-color: #247ae2;
font-weight: bold;
border-radius: 5px;
}
/*办件统计*/
.advert-top2 {
margin-top: 45px;
}
.advert-all {
float: right;
padding: 0 5px;
}
.advert-name a {
color: black;
}
.advert a.active {
color: #247ae2;
border-top: -4px;
border-bottom: 4px solid #247ae2;
}
.tongji {
float: left;
display: inline-block;
vertical-align: middle;
position: relative;
left: -40px;
margin-top: 10px;
width: 330px;
height: 160px;
background: url(../images/tongji.jpg) no-repeat 0 0;
}
.xiaonengtj {
margin-top: 20px;
display: inline-block;
vertical-align: middle;
position: relative;
left: -40px;
height: 60px;
width: 320px;
line-height: 60px;
background-image: url(../images/xiaonengtj.jpg);
text-align: center;
font-size: 24px;
color: #fff;
font-weight: bold;
font-family: "微软雅黑";
}
/*footer*/
.foot{
margin-top: 180px;
height: 102px;
background: #f5f5f5;
border-top: 1px solid #ecebeb;
line-height: 102px;
}
.left-img{
float: left;
margin-left: 60px;
margin-top: 20px;
}
.right-img{
float:right;
margin-right: 60px;
margin-top: 20px;
}
.footer-text{
margin: 0 100px;
text-align: center;
padding-left: 20px;
}
.foot-text span{
margin: 0 25px;
position: relative;
right: -80px;
}
标签：前端,基础,Day06,height,width,文物保护,margin,top,left 来源： https://blog.csdn.net/qq_41680667/article/details/116198825
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。