• css module.css demo


    /*
    *GNET Size css
    *@author:ljw
    *@date:2015/06/07
    */
    
    /**通用**/
    a{color:inherit;text-decoration: none;}
    a:focus,
    a:hover{color:#d2232a;text-decoration:none;outline:none;}
    /**font-size**/
    .ft12{font-size:0.85em;}
    .ft14{font-size:1em;}
    .ft16{font-size: 1.142em;}
    .ft18{font-size:1.285em;}
    .ft20{font-size:1.428em;}
    .ft24{font-size:1.71em;}
    .ft42{font-size:3em;}
    /**margin**/
    .mt25{margin-top:25px;}
    .mt30{margin-top:30px;}
    /**header**/
    header{height:80px;line-height:80px;border-bottom:1px solid #c9c9c1;}
    .logo{height:65px;margin-top:5px}
    .logo a{100%;display:block;}
    .navUL{100%;margin:0;padding:0;}
    .mobile-nav{display:none;}
    .nav-item{float:left;list-style:none;font-family:'Arial';color:#999999;text-align:center;padding:0 2.5%;}
    .nav-item a{display:inline-block;cursor:pointer;}
    .subnav{display:none;padding:10px 15px;line-height:2.5em;text-align:left;position:absolute;top:60px;z-index:2;border:1px solid #cacaca;background-color:white;}
    .subnav a{display:inline-block;100%;}
    .nav-item:hover>.subnav{display:block;}
    .Language{color:#999999;}
    /**.footer**/
    .footer{background-color:#2e3239;}
    .footer .title{color:white;}
    .footer .describe{color:#f0f0f1;font-size:1em;padding:40px 0 20px;}
    .footer .share{margin:10px 0 25px;}
    .share-icon{display:inline-block;45px;height:45px;text-align:center; background:url(../images/bg/share-icon.png) no-repeat;}
    .share-icon-1{background-position:0px -137px;}
    .share-icon-2{background-position:0px -92px;}
    .share-icon-3{background-position:0px -45px;}
    .share-icon-4{background-position:0px 0px;}
    .share-icon-1:hover{background-position:-45px -137px;}
    .share-icon-2:hover{background-position:-45px -92px;}
    .share-icon-3:hover{background-position:-45px -45px;}
    .share-icon-4:hover{background-position:-45px 0px;}
    .share .shape img{margin:0 5px;vertical-align:super;}
    /**footer**/
    footer{background-color:#1c1f24;}
    footer p{margin:0;line-height:50px;color:#d1d1d1;font-family:'Microsoft Sans serif';}
    /**page-list**/
    .page-list{margin:20px 0 0px;line-height:40px;border-bottom:3px solid #686868;}
    .page-list-icon{display:inline-block;20px;height:20px;vertical-align:text-bottom;background:url(../images/bg/home.png) no-repeat;cursor:pointer;}
    .home{background-position:0px 0px;}
    .home:hover{background-position:-20px 0;}
    .page-divider{margin:0 10px;background-position:0px -20px;}
    .page-on{color:#a3a3a3;}
    /**content**/
    .article{height:auto;margin:40px auto;}
    .bottom{100%;position:absolute;bottom:0;}
    .article-font{line-height:2.14em;color:#7c7e81;}
    .advantage{color:#3b3b3b;text-indent:2em;}
    .title{margin:20px 0 0;color:#434343;font-size:2.56em;font-weight:bold;font-family:'Arial';}
    .describe{margin:0;line-height:2.5em;color:#5c5c5c;font-family:'Arial';}
    /**通用结束**/
    /**页面级**/
    /**index.html**/
    /**banner**/
    .banner-Wrap{position:relative;background:url(../images/temp/banner.jpg) no-repeat scroll center;height:558px;}
    .banner-box{position:absolute;left:50%;top:50%;margin:-100px 0 0 -500px;}
    .banner-video video{480px;}
    .caption-font{color:white;font-family:'Microsoft Sans serif';}
    .caption-btn{display:inline-block;120px;height:50px;margin:0 0 15px 180px;line-height:50px;color:white;font-family:'Arial';background:url(../images/bg/caption-btn.png) no-repeat;}
    /**thumbnail box**/
    .box{margin:15px 0;padding-bottom:40px;border:1px solid #cacaca;}
    .box-title{padding:20px 0;text-align:center;font-size:1.85em;color:#6e6e6e;font-family:'Microsoft Sans serif';}
    .box-footer{position:relative;height:86px;overflow:hidden;padding:20px 10px 0px;font-size:1.142em;font-family:'Arial';color:#3b3b3b;word-break:break-all;-webkit-word-break:break-all;-moz-word-break:break-all;}
    /**our-team.html**/
    .leader{margin-top:40px;padding-bottom:20px;}
    .divider-line{border-bottom:1px solid #e9eef1;}
    .leader-img{float:left;margin:15px 15px 0 0;}
    .leader-name{color:#1e232a;}
    .leader-job{margin:0;}
    /***overview.html***/
    .overview-advantage{color:#1e232a;text-indent:2em;list-style:decimal inside;}
    /**career.html**/
    .text-indent{text-indent:2em;}
    .Sub-title{margin:35px 0 0;color:#434343;font-size:1.71em;font-weight:bold;font-family:'Arial';}
    .apply{display:inline-block;margin-top:60px;}
    .title-line{padding-bottom:0.5em;border-bottom:3px solid #f0f0f0;}
    /***hong-kong.html**/
    .contact-icon{display:inline-block;45px;height:40px;margin-right:10px;vertical-align:middle;background:url(../images/bg/contact-us-icon.png) no-repeat;}
    .tel{background-position:-10px -13px;}
    .E-mail{background-position:-74px -13px;}
    .Fax{background-position:-136px -13px;}
    /**页面级结束**/

    1.css布局层次尽量分明,便于后期维护;

    2.尽量提高css的复用性,减少冗余代码;

  • 相关阅读:
    php 上传大文件配置upload_max_filesize和post_max_size选项
    phpstorm version 2016.2 License Server激活
    ubuntu 14.04 下通过apt-get 安装jdk
    SSH远程会话管理工具
    mysql配置命令 CHARACTER_SET_%字符集设置
    mysql 的max_connections和max_user_connections 的区别
    ActiveMQ基于JMS的pub/sub传播机制
    ActiveMq入门实例
    Java JMS
    LockSupport学习
  • 原文地址:https://www.cnblogs.com/hanbingljw/p/4595267.html
Copyright © 2020-2023  润新知