zoukankan      html  css  js  c++  java
  • 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;
         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%;
        text-align:center;
    }
    .condition{
        font-size: 15px;
        font-family: "黑体";
        margin-left:10px;
    }
    .con #condition{
         100%;
        margin-top: 10px;
        text-align: center;
        margin-bottom: 10px;
         1210px;
    }
    .con .monitor{
        margin-top: 10px;
         100px;
        height: 25px;
    }
    
    .con select[name="monitor_ip"]{
         120px;
        margin-left:10px;
        display: inline-block;
    }
    
    .con .monitor_add{
         100px;
        height: 27px;
        margin-left:30px;
    }
    
    .content table {
         100%;
    }
    
    table.gridtable {
        border:1px solid red;
        font-family: verdana,arial,sans-serif;
        font-size:10px;
        color:#4384ba;
        border- 1px;
        border-color: #4384ba;
        border-collapse: collapse;
    }
    table.gridtable th {
        border- 1px;
        padding: 10px 10px;
        border-style: solid;
        border-color: #eeeeee;
        background-color: #dedede;
    }
    table.gridtable td {
        border- 1px;
        padding: 10px 10px;
        border-style: solid;
        border-color: #eeeeee;
        background-color: #f7f9f9;
    } 
  • 相关阅读:
    MySQL 初识别语句,数据库、表、行的增删改查
    mysql如何从全备文件中恢复单个库或者单个表
    Shell 同步时间脚本
    app手机端连接tomcat电脑端服务器
    大于号转义符&gt;---小于号转义符&lt;
    轻松实现页面提交中
    重复提交问题(一)
    json
    ExtJs 6.0+快速入门,ext-bootstrap.js文件的分析,各版本API下载(一)
    ExtJS 6 如何引入Dashboard模版
  • 原文地址:https://www.cnblogs.com/hzcya1995/p/13349097.html
Copyright © 2011-2022 走看看