html css样式设计

1.displayesblog.html

<html>
<head>
    <title>运维平台</title>
    <link rel="stylesheet" type="text/css" href="/static/Css/Monitor/displayesblog.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">
            <label class="condition">应用环境</label>
            <select name="env" class="monitor">
            <option value="esb">ESB系统</option>    
            </select>
            
            <label class="condition">日志选型IN/OUT日志</label>
            <select name="esbtag" class="monitor">
            <option value="in">IN端日志</option>
            <option value="out">OUT端日志</option>    
            </select>
            
            <label class="condition">工号</label><input type="text" name="mailuser" class="monitor">
            
            <!--<input type="submit" value="download" class="monitor_add">-->
            <input type="submit" value="download" class="monitor_add">
            <!--<input type="submit" value="get_mq_message" class="monitor_start">-->
            <input type="submit" value="sendmail" class="monitor_add">
            
        </div>
        <table class="gridtable fr">
                <tr><th>消息</th></tr>
        </table>
    </div>
</body>
<script type="text/javascript" src="/static/Js/jquery-2.2.2.min.js"></script>
<script type="text/javascript" src="/static/Js/Monitor/displayesblog.js"></script>
<!script type="text/javascript" src="/static/Js/Public/menu.js"><!/script>
<script type="text/javascript" src="/static/Js/Public/ajax.js"></script>
</html>


2.

20.5.101.31_/root>cat displayesblog.css
body,html{
    margin: 0;
    padding: 0;
    width: 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;
    width: 23px;
    height: 23px;
    display: block;
}
i.i_1{
    background: url("../../Images/1.png") no-repeat;
    width: 25px;
    height: 30px;
}
i.i_2{
    background: url("../../Images/2.png") no-repeat;
    width: 29px;
    height: 29px;
}
i.i_3{
    background: url("../../Images/3.png") no-repeat;    
    width: 27px;
    height: 23px;
}
i.i_4{
    background: url("../../Images/4.png") no-repeat;    
    width: 29px;
    height: 30px;
}
i.i_5{
    background: url("../../Images/5.png") no-repeat;    
    width: 24px;
    height: 28px;
}
i.i_6{
    background-position: 0 -35px;
    width: 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;
    width:86.8%;
    text-align:center;
}
.condition{
    font-size: 15px;
    font-family: "黑体";
    margin-left:10px;
}
.con #condition{
    width: 100%;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 10px;
    width: 1210px;
}
.con .monitor{
    margin-top: 10px;
    width: 100px;
    height: 25px;
}

.con select[name="monitor_ip"]{
    width: 120px;
    margin-left:10px;
    display: inline-block;
}

.con .monitor_add{
    width: 100px;
    height: 27px;
    margin-left:30px;
}

.content table {
    width: 100%;
}

table.gridtable {
    border:1px solid red;
    font-family: verdana,arial,sans-serif;
    font-size:10px;
    color:#4384ba;
    border-width: 1px;
    border-color: #4384ba;
    border-collapse: collapse;
}
table.gridtable th {
    border-width: 1px;
    padding: 10px 10px;
    border-style: solid;
    border-color: #eeeeee;
    background-color: #dedede;
}
table.gridtable td {
    border-width: 1px;
    padding: 10px 10px;
    border-style: solid;
    border-color: #eeeeee;
    background-color: #f7f9f9;
}
猜你喜欢
