前端基础：Day06

2023-12-31 09:35:34

文章目录


前端基础：Day06

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="&nbsp&nbsp&nbsp请输入关键字/办件编号" />
<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:;">首页&nbsp;></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


下一篇：JavaSE学习笔记——day06