css调节样式

[root@yyjk templates]# cat displayOracleExport.html 


<html>
<head>
	<title>运维平台</title>
	<link rel="stylesheet" type="text/css" href="/static/Css/Monitor/displayOracleExport.css">
	<link rel="stylesheet" type="text/css" href="/static/Css/Public/header.css">
	<link rel="stylesheet" type="text/css" href="/static/Css/Public/menu.css">
</head>
<body>
	<include file="Public:header"/>
	<div class="content">
		<include file="Public:menu"/>
		<div class="con fl">
			<div id="condition">
				<label class="condition">数据库服务名</label><input type="text" name="dbservice" class="equipment_sz1">
				<label class="condition">数据库IP</label><input type="text" name="dbip" class="equipment_sz2">
				<label class="condition">数据库用户名</label><input type="text" name="dbuser" class="equipment_sz3">
				<label class="condition">数据库密码</label><input type="text" name="dbpass" class="equipment_sz4">
                                 <br />
                                 <br />
				<label class="condition">导出的表</label><input type="text" name="exportTable" class="equipment_sz5">
				<label class="condition">where条件</label><input type="text" name="tiaojian" class="equipment_sz6">
                                 <br />
                                 <br />
				<input type="submit" value="导出" class="equipment_search_btn es_1">
				<!--<input type="submit" value="组查找" class="equipment_search_btn es_2">-->
			</div>
			<table class="gridtable">
				<tr>
					<th>"导出成功后,请通过下面的url下载文件"</th>
				</tr>
			</table>
		</div>
	</div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/displayOracleExport.js"></script>
<script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
</html>


[root@yyjk Monitor]# cat displayOracleExport.css 
?body,html{
	margin: 0;
	padding: 0;
	 100%;
	height: 100%;
	/* overflow: hidden; */
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.clearfix{
	clear: both;
}
i{
}
i.icon-menu{
	background: url("../../Images/icon.png");
	display: inline-block;
}
i.i_0{
	background-position: 0 0;
	 23px;
	height: 23px;
	display: block;
}
i.i_1{
	background: url("../../Images/1.png") no-repeat;
	 25px;
	height: 30px;
}
i.i_2{
	background: url("../../Images/2.png") no-repeat;
	 29px;
	height: 29px;
}
i.i_3{
	background: url("../../Images/3.png") no-repeat;	
	 27px;
	height: 23px;
}
i.i_4{
	background: url("../../Images/4.png") no-repeat;	
	 29px;
	height: 30px;
}
i.i_5{
	background: url("../../Images/5.png") no-repeat;	
	 24px;
	height: 28px;
}
i.i_6{
	background-position: 0 -35px;
     14px;
    height: 10px;
    margin-right: 20px;
    margin-top: 10px;
}
i.i_6.hide{
	background-position: -15px -35px;
}



.content{
	height: 100%;
}

.con{
	border: 1px solid #eeeeee;
	display: inline-block;
	86.8%;
	height: 100%;
}
.condition{
	font-size: 15px;
	font-family: "黑体";
	margin-left:10px;
}
.con #condition{
	 100%;
	margin-top: 10px;
	text-align: center;
	margin-bottom: 10px;
	 1210px;
}
.con .equipment_sz{
	 300px;
	height: 25px;
}

.con .equipment_sz6{
         500px;
        height: 25px;
}
.con .equipment_sz5{
         300px;
        height: 25px;
}


.con .equipment_search_btn{
	 100px;
	height: 27px;
}
.con .es_1{
	margin-left: 30px;
}
.con .es_2{
	margin-left: 30px;
}

.con .es_6{
	 200px;
        margin-left: 30px;
}
.con table.gridtable {
	border:10px solid red;
	font-family: verdana,arial,sans-serif;
	font-size:20px;
	color:#4384ba;
	border- 2px;
	border-color: #4384ba;
	border-collapse: collapse;
}
.con table.gridtable th {
	border- 1px;
	padding: 10px auto;
	text-align: center;
	 3300px;
	border-style: solid;
	border-color: #eeeeee;
	background-color: #dedede;
}
.con table.gridtable td {
	border- 2px;
	padding: 10px auto;
	text-align: center;
	 500px;
	border-style: solid;
	border-color: #eeeeee;
	background-color: #f7f9f9;
}    
.con table.gridtable .gridth{
	border- 10px;
	padding: 10px auto;
	text-align: center;
	 500px;
	border-style: solid;
	border-color: #eeeeee;
	background-color: #dedede;
}      
.con table.gridtable .gridtd{
	border- 2px;
	padding: 10px auto;
	text-align: center;
	 500px;
	border-style: solid;
	border-color: #eeeeee;
	background-color: #f7f9f9;
}       

.con table.gridtable .btn {
	display: block;
	 300px;
	height: 20px;
	margin-left: 15px;
	background-color: #e7e3e3;
	cursor: pointer;
}
.con table.gridtable .btn:hover {
	box-shadow: 2px 2px 2px gray;
}
.con table.gridtable .btn:active {
	position: relative;
	top: 1px;
} 

原文地址:https://www.cnblogs.com/hzcya1995/p/13349326.html