zoukankan      html  css  js  c++  java
  • 自适应布局all样式

    /*css document*/
    @charset "utf-8"
    *{-webkit-tap-highlight-color:rgba(0,0,0,0); padding:0; margin:0;}
    body{ font-size:100px; background-color:#f5f5f5; overflow-x:hidden; font-family:'microsoft yahei',Verdana,Arial,Helvetica,sans-serif;}/*font-family:'microsoft yahei',Verdana,Arial,Helvetica,sans-serif; color:#797979;*/
    body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,select,table,td,textarea,th {margin:0; padding:0;}
    img,input,button,select,textarea{ margin:0px; padding:0px; resize:none; font-weight: normal; border:none; outline:none; color:#999;}
    input,select,textarea,button{border-radius: 4px !important;}
    input,select,th{outline:none;}
    input:focus,button:focus,input[type="button"]{outline:none;}
    input, select, textarea:focus{color:#797979;}
    fieldset,img {border:0;}
    ul,li {list-style:none; padding:0; margin:0;}
    h1,h2,h3,h4,h5,h6,p,em{ font-size:100%; word-wrap:break-word; font-weight: normal; font-style: normal; }
    address {font-style:normal;}
    i{ margin:0 3%; font-style: normal; }
    a {color:#428bca;text-decoration:none; outline:none}
    button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; }
    table { border-collapse:collapse}
    .clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
    input[type="button"], input[type="submit"], input[type="reset"] {
    -webkit-appearance: none;
    }


    /* Hides from IE-mac */
    * html .clearfix { height: 1%; }
    /* End hide from IE-mac */

    .hide{display:none;}
    .cen_mar{ margin:0 auto; }

    /*0内边距外边距*/
    .eropad{ padding: 0; }
    .eromar{ margin: 0; }

    /*文字大小*/
    h3{ font-size:0.8em; border-bottom: 1px #dcdcdc solid; padding-bottom: 1em; color: #333;}


    /*字体颜色定义*/
    .colwrite{color: #fff;}
    .colg6{ color:#666; }
    .colg9{ color: #999; }
    .colblu{ color: #02aceb; }
    .colora_num{ color: #fc6705;}
    .colred{ color: #fe0908; }

    /*浮动*/
    .f_rig{ float:right;}
    .f_lef{ float:left;}
    .c_cle{ clear:both; }

    /*文字位置*/
    .t_lef{ text-align:left;}
    .t_cen{ text-align:center;}
    .t_rig{ text-align:right;}

    /*背景色*/
    .i_boxbg{ background:#fff;}
    .tabbg{ background: #f0faff; }
    .orgbgbtn{ background: #fc6705; }

    /*按钮*/
    .i_subbtn{ 70px; height: 40px; border-radius: 6px; background: #02aceb; text-align: center; line-height: 30px;}
    .i_btn{ height: 60px; border-radius: 8px;}
    .bigok_b{ background:#02acea;}
    .bigdis_b{ background:#e6e6e6; }
    .middis_b{ background: #bebebe; }
    .orgbtnbg{ background: #fc6705;}


    .button[type="submit"]:hover,.button[type="submit"]:active,.button[type="submit"]:focus{ background:#0399d0; color:#fff;}

    .btnbgred:hover,.btnbgred:active,.btnbgred:focus{ background:#d2223d; border:1px #ac2925 solid; color:#fff;}

    /*flexbox*/
    .flexbox{display: -webkit-box; display: -moz-box; display: box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; -webkit-box-pack: end; -moz-box-pack: end; box-pack: end; }
    .flexbox-1{ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;}

    /*控件定义*/
    input,select{ 405px; height: 38px; padding-left: 1%; border:1px #dcdcdc solid; background: #fff; color: #999; font-size: 0.14em; line-height: 40px; }
    .location_cls{36px;height:36px;border:1px solid #dcdcdc;display: table-cell;background: url(../img/location.png) no-repeat center;line-height: 30px;float:left;cursor:pointer;}
    input[type="radio"]{ 16px; height: 16px; line-height: 40px; margin-left: 5px; margin-right: 1%; margin-top: 12px; }
    input[type="date"]{ 180px; height: 38px; border:1px #dcdcdc solid; }
    /*表单提交按钮 310px*/
    /*button[type="submit"]{ 310px; height: 45px; background: #02aceb; border-radius: 4px; font-size:16px; color: #fff; }*/
    /*button[type="submit"]:hover{ 310px; height: 45px; background: #0399d0; border-radius: 4px; font-size:16px; color: #fff; }*/
    .n_msubbtn{ 310px; height: 45px; background: #02aceb; border-radius: 4px; font-size:16px; color: #fff; font-weight: 400;}
    .n_msubbtn:hover, .n_msubbtn:focus, .n_msubbtn:active{ background:#0399d0; }
    /*不可用*/
    .dn_msubbtn{ 310px; height: 45px; background: #02aceb; border-radius: 4px; font-size:16px; color: #b2eafe;font-weight: 400;}
    /*返回及上一步按钮*/
    .n_mbakbtn{ 310px; height: 45px; background: #bebebe; border-radius: 4px; font-size:16px; color: #fff;font-weight: 400;}
    .n_mbakbtn:hover, .n_mbakbtn:focus, .n_mbakbtn:active{ background: #d2d2d2; }
    /*不可用*/
    .dn_mbakbtn{ 310px; height: 45px; background: #e6e6e6; border-radius: 4px; font-size:16px; color: #999;}

    input[type="checkbox"]{ 18px; height: 18px; }
    .n_inpfile{ 70px; height: 30px; }

    /*wrap*/
    /*.wrap{ min-320px; max-640px; margin:0px auto; overflow:hidden;}*/

    /*header部分*/
    .n_iheabg{ 100%; font-size:0.12em; margin-bottom: 1.6667em; border-bottom: 1px #dcdcdc solid;}
    .n_iheabox{ 1200px; font-size: 16px; height: 4.25em; margin:0 auto; position: relative;}
    .n_iheabox .n_ilogo{ 14%; height: 4.25em; line-height: 4.25em; display: table;}
    .n_iheabox .n_ilogo a{ display: table-cell; vertical-align: middle; background: url(../img/nlogo.png) no-repeat 10px center;}
    .n_iheabox ul li{ float: left; padding:0 1.8%; height: 4.25em; line-height: 4.25em;}
    .n_iheabox ul li a{ display: inline-block; height: 4.25em; line-height: 4.25em; color: #333; text-decoration: none;}
    .n_iheabox .n_ihnav ul li a:hover{color:#02aceb; border-bottom: 2px #02aceb solid;}
    .n_iheabox .mar_l{ margin-left: 40%; }

    .n_iheaid{ 200px; height: 4em; position: absolute; top: 0; right: 0; }
    .n_iheaid>ul>li{ font-size: 0.75em; color: #666; line-height: 5em; height: 5em;}
    .n_iheaic{ display: inline-block; 30px; height: 11px; background: url(../img/slidic.png) no-repeat center;}
    .n_iheaid>ul>li:first-child{ 20px; height: 5em; background: url("../img/heanotice.png") no-repeat center; }


    .n_imsgdot{ display: none; 10px; height: 10px; background: #dc5f0d; border-radius: 5px; }
    .n_iheaid dl dt{position: absolute; 50%; height:2em; left:25%; top:5.7em; background: #fff; line-height: 2em; text-align: center; font-size: 0.7em; color: #666; border:1px #dcdcdc solid; }
    .n_iheaid dl dt a{color: #666;}
    .n_ihnav ul,ol{margin: 0px;}
    #ad_div {display:block;}
    #mobile_ad_div {display:none;}

    /*footer部分*/
    .n_ifoot{ 100%; background: #e6e6e6;}
    .n_ifbox{ 1200px; margin:0 auto; padding-top:20px;}
    .n_ifbox ul li{ float: left; font-size:14px; text-align: left;}
    .n_ifbox ul li:first-child{ 40%;}
    .n_ifbox ul li:nth-child(2){ 20%; }
    .n_ifbox ul li:nth-child(3){ 40%; }
    .n_ifbox ul li:nth-child(3) h3 {text-align: right;}
    .n_ifbox ul li:nth-child(3) div {text-align: right;}
    .n_ifbox ul li:nth-child(3) div img{vertical-align: middle;}
    .n_ifbox .n_icpic{ display: inline-block; 20%; height: 2.8em; background: #ccc; float: left; background: url(../img/phoneic.png) no-repeat center;}
    .n_ifot{font-size:22px; text-decoration: none; color: #666; font-weight: normal; margin:0; border:none;}
    .n_ibq{font-size: 14px; padding:1em 0; border-top: 1px #fff solid;}

    /*适配部分*/
    @media screen and (max-1200px){
    .n_iheabox{ 100%; }
    .n_ifbox{ 100%; }
    .n_ihnav{ position: absolute; z-index: 99; left:10px; top:4.25em; 30%; border:1px #dcdcdc solid; }
    .n_iheabox .n_ilogo a{ background:url(); }
    .n_imeanic{ position: absolute; left: 10px; top:0.8em; background:#fcfcfc url(../img/navic.png) no-repeat center; display: block; 50px; height: 2.6em; border:1px #dcdcdc solid; border-radius: 4px;}
    .n_ihnav ul li{ float: none; 100%; height: 3em; line-height: 3em; padding: 0; margin: 0; text-align: center; background: #f5f5f5; border-bottom: 1px #dcdcdc solid; }
    .n_ihnav ul li a{ height:3em; line-height:3em; }

    input,select{ 405px; height: 38px; line-height: 40px; border:1px #dcdcdc solid; background: #fff; font-size: 0.14em; color: #999;}
    input[type="radio"]{ 18px; height: 18px; line-height: 40px; margin-left: 5px; margin-right: 1%; margin-top: 12px; }
    }
    @media screen and (max-992px){
    .n_iheabox{ 100%; }
    .n_ifbox{ 100%; }
    .n_ifbox ul li{ 100%;}

    .n_ihnav{ position: absolute; left:10px; top:4.25em; 30%; border:1px #dcdcdc solid; display: none;}
    .n_iheabox .n_ilogo a{ background:url(); }
    .n_imeanic{ position: absolute; left: 10px; top:0.8em; background:#fcfcfc url(../img/navic.png) no-repeat center; display: block; 50px; height: 2.6em; border:1px #dcdcdc solid; border-radius: 4px;}

    .n_ihnav ul li{ float: none; 100%; height: 3em; line-height: 3em; padding: 0; margin: 0; text-align: center; background: #f5f5f5; border-bottom: 1px #dcdcdc solid; }
    .n_ihnav ul li a{ height:3em; line-height:3em; }

    .n_ifbox h3{ text-align: center; }
    .n_ifbox ul li{ float:none; 100%; }
    .n_ifbox ul li:first-child{ 100%; text-align: center;}
    .n_ifbox ul li:nth-child(2){ 100%; }
    .n_ifbox ul li:nth-child(3){ 100%;}
    .n_ifbox ul li:nth-child(3) h3{text-align: center}
    .n_ifbox ul li:nth-child(3) div{text-align: center}
    .n_ifbox .n_icpic{ background-size: 30%; }

    input,select{ 100%; height: 38px; line-height: 40px; border:1px #dcdcdc solid; background: #fff; font-size: 0.14em; color: #999;}
    input[type="radio"]{ 18px; height: 18px; line-height: 40px; margin-left: 5px; margin-right: 1%; margin-top: 12px; }
    .n_mbakbtn{ 100%;}
    .n_msubbtn{ 100%; }
    .location_cls{float: none;}
    }
    @media screen and (max-768px){
    .n_iheabox{ 100%; }
    .n_ifbox{ 100%; }
    .n_ifbox ul li{ 100%;}

    .n_ifbox ul li{ float:none; 100%; }

    .n_ihnav{ position: absolute; left:10px; top:4.25em; 30%; border:1px #dcdcdc solid; display: none; }
    .n_iheabox .n_ilogo a{ background:url(); }
    .n_imeanic{ position: absolute; left: 10px; top:0.8em; background:#fcfcfc url(../img/navic.png) no-repeat center; display: block; 50px; height: 2.6em; border:1px #dcdcdc solid; border-radius: 4px;}
    .n_ihnav ul li{ float: none; 100%; height: 3em; line-height: 3em; padding: 0; margin: 0; text-align: center; background: #f5f5f5; border-bottom: 1px #dcdcdc solid; }
    .n_ihnav ul li a{ height:3em; line-height:3em; }

    .n_ifbox h3{ text-align: center; }
    .n_ifbox ul li{ float:none; 100%; }
    .n_ifbox ul li{ float:none; 100%; }
    .n_ifbox ul li:first-child{ 100%; text-align: center; }
    .n_ifbox ul li:nth-child(2){ 100%; }
    .n_ifbox ul li:nth-child(3){ 100%;}
    .n_ifbox ul li:nth-child(3) img {35px;}
    .n_ifbox .n_icpic{ background-size: 30%; }

    input,select{ 100%; height: 38px; line-height: 40px; border:1px #dcdcdc solid; background: #fff; font-size: 0.14em; color: #999;}
    input[type="radio"]{ 18px; height: 18px; line-height: 40px; margin-left: 5px; margin-right: 1%; margin-top: 12px; }
    .n_mbakbtn{ 100%;}
    .n_msubbtn{ 100%; }
    #ad_div {display:none;}
    #mobile_ad_div {display:block;}
    }
    @media screen and (max-640px){
    /*body,button,input,select,table,textarea{font-size:0.14em;}*/

    .n_iheaid{ 190px; }
    .n_ifbox h3{ text-align: center; }
    .n_ifbox ul li{ float:none; 100%; }
    .n_ifbox .n_icpic{ background-size: 30%; }

    .n_mbakbtn{ 100%; margin-bottom:1em;}
    .n_msubbtn{ 100%; }
    }

  • 相关阅读:
    PIE SDK云图动画导出
    PIE SDK地图书签
    PIE SDK元素的保存与打开
    Jenkins简单入门:下载-安装-配置-构建
    Vue.js—60分钟快速入门
    程序员分享学习平台
    IOC+EF+Core项目搭建EF封装(一)
    python+django学习四
    python+django学习三
    Django2.0 应用 Xadmin 报错二
  • 原文地址:https://www.cnblogs.com/lvlina/p/7645414.html
Copyright © 2011-2022 走看看