Difference between revisions of "Team:BIT-China/css/page/homeTemp1020"

Revision as of 00:40, 20 October 2016 (view source) Yida (Talk | contribs) (Created page with " @import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css); →‎***********************************: @font-face { font-family: 'Roboto'; font-st...")		Revision as of 15:52, 4 November 2016 (view source) Yida (Talk | contribs) Newer edit →
Line 745:		Line 745:
	.content-right{		.content-right{
−
	text-align: justify;		text-align: justify;
	text-justify: distribute-all-lines;		text-justify: distribute-all-lines;
−	text-align-last: justify;
−	-moz-text-align-last: justify;
−	-webkit-text-align-last: justify;
	}		}

---

Revision as of 15:52, 4 November 2016

@import url(http://cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css);

/*************************************/

@font-face {

   font-family: 'Roboto';
   font-style: normal;
   font-weight: 100;
   src: local('Roboto Thin'), local('Roboto-Thin'),
   url(http://fonts.gstatic.com/s/roboto/v15/vzIUHo9z-oJ4WgkpPOtg13YhjbSpvc47ee6xR_80Hnw.woff) format('woff');

}

.page-title{

   font-family: 'Roboto',san-serif;
   font-size: 50px;color: white;
   display: block;
   height: 200px;
   line-height: 200px;
   background: rgba(20,41,60,0.7);
   position:absolute;text-align: center;left: 0;

}

.circle_img_2s{

   -webkit-animation:logoSizing 1s ease-in-out 0s 2;

}

/*logo大小变化效果*/ @-webkit-keyframes logoSizing {

   0%,100%{
       -webkit-transform: scale(1);
       -moz-transform: scale(1);
       -ms-transform: scale(1);
       -o-transform: scale(1);
       transform: scale(1);
   }
   50%{
       -webkit-transform: scale(1.5);
       -moz-transform: scale(1.5);
       -ms-transform: scale(1.5);
       -o-transform: scale(1.5);
       transform: scale(1.5);
   }

}

.top-title{

   font-size:48px;
   font-weight: bold;
   color:#141d3d;

}

.panel-title a{

   display:block;
   padding:20px 20px 20px 20px;
   color:#FFF !important;
   font-size:18px;
   font-weight:500;

}

.accordion-light .panel-title a{

   display:block;
   padding:20px 20px 20px 20px;
   color:#666 !important;
   font-size:18px;
   font-weight:500;

}

/**************************************************/

.home-nav-wrapper{

   padding: 10px 0 30px 0;

}

.bottom-title{

   color:rgb(21,40,60) !important;
   font-size:16px;
   margin-top: 10px;
   margin-bottom:40px;
   text-align: center;
   /*font-family: 'Raleway', sans-serif !important;*/

}

.header-xsmall, .header-xsmall a {

   display: block;
   padding-top: 10px;
   margin: 10px;
   font-size:25px;
   text-decoration: underline;
   text-align: center;
   font-weight:bold;overflow:visible; 

}

/************************************************************************/

/*---------------------------------*/ /* 23. COUNTER STYLES */ /*---------------------------------*/

.bg-overlay-dark {

   background: rgba(51,51,51,0.8);

} .bg-overlay {

   overflow: hidden;
   height: 100%;
   z-index: 2;
   padding: 70px 0;

}

.text-white-center{

   color:#FFF !important;
   text-align:center !important;

}

.counter-wrapper{

   margin:10px auto 10px auto;
   width:200px;
   height:200px;
   border-radius:100px;
   -moz-border-radius: 100px;
   -webkit-border-radius: 100px;
   border:6px solid #EEE;
   color:#EEE;
   font-size:45px;
   text-align:center;
   line-height:190px;

}

.counter-wrapper-gray{

   border:3px solid #666;
   color:#666 !important;

}

.counter-wrapper-green{

   border:4px solid #68C3A3;

}

.counter-wrapper-green-2{

   border:4px solid #68C3A3;
   color:#666;

}

.counter-wrapper-red{

   border:4px solid #eb5d68 ;

}

.counter-wrapper-blue{

   border:4px solid #3498DB ;

}

.counter-wrapper-bg-dark{

   background-color:#666;

}

.counter-wrapper-bg-green{

   background-color:#68C3A3;
   color:#FFF;

}

.counter-wrapper-bg-blue{

   background-color:#3498DB;
   color:#FFF;

}

.counter-wrapper-bg-red{

   background-color:#eb5d68;
   color:#FFF;

}

.counter-header{

   margin-bottom:50px;

}

.counter-text-white{

   font-family: 'Raleway', sans-serif;
   text-align:center;
   color:#EEE;
   padding:0 40px 0 40px;

}

.counter-text-2{

   text-align:center;
   padding:0 40px 0 40px;

}

/*---------------------------------------------*/ /* 30. CONTACT PAGE & CONTACT FOOTER STYLES */ /*---------------------------------------------*/

.contact, .contact2, .contact3{

   background-color:#FFF;
   border:1px solid #E5E5E5;
   padding:20px 15px;
   margin-left:auto;
   margin-right:auto;

}

.contact-header-bg{

   background-color:#666;
   color:#FFF;
   padding:8px 15px 8px 15px;
   display:inline-block;
   font-size:16px;
   margin:0 0 10px 0;

}

.contact hr, .contact2 hr, .contact3 hr{

   margin-top:10px;

}

.contact h4, .contact2 h4, .contact3 h4{

   margin-top:20px;

}

.contact-map-area{

   width:100%;
   margin-bottom:20px;
   overflow:hidden;
   height:250px;
   border:1px solid #E5E5E5;

}

.contact-map-area2, .contact-map-area3{

   width:100%;
   margin-bottom:20px;
   overflow:hidden;
   height:350px;
   border:1px solid #E5E5E5;

}

.contact-info ul{

   margin:20px 0 0 0;
   padding:0;

}

.contact-info ul li{

   list-style:none;
   margin-bottom:15px;

}

.contact-info ul li i{

   margin-right:20px;
   font-size:18px;
   color:#666;

}

.contact-form-area{

   background-color:#F5F5F5;
   padding:45px 10px;
   border:1px solid #DDD;

}

.contact-form-area2, .contact-form-area3{

   background-color:#F5F5F5;
   padding:20px 10px;
   border:1px solid #DDD;

}

.contact-form3{

   margin-top:40px;

}

.contact-onepage-light{

   background-color:#F7F7F7 !important;

}

.contact-onepage-light h3{

   color:#3f444a !important;

}

.contact-onepage-light p, .contact-onepage-light a{

   color:#5c6873 !important;

}

.contact-onepage p, .contact-onepage li, .contact-onepage a{

   color:#888 !important;
   font-size:16px;

}

.contact-onepage{

   padding:80px 0 !important;

}

.contact-onepage i{

   color:#AAA !important;

}

.contact-one-page-form-area button{

   margin-top:20px;

}

.contact-one-page-form-area input, .contact-one-page-form-area textarea{

   background-color:#333;
   border:1px solid #444;
   color:#DDD;

}

.onepage-footer{

   padding:40px 0 25px 0;
   background-color:#282828;

}

.onepage-footer p{

   color:#777;

}

.op-contact-social{

   float:right;

}

.op-contact-social li{

   display:inline-block;
   list-style:none;
   padding:10px;
   background-color:#333;
   margin-left:10px;
   width:40px;
   height:40px;
   text-align:center;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;

}

.op-contact-social li:hover{

   background-color:#555;

}

.op-contact-social li a{

   font-size:18px;
   color:#666;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;

}

.op-contact-social li:hover a{

   color:#FFF;

}

.btn1-md{

   font-size:14px;
   padding:6px 20px;
   line-height:25px;

} .btn1-default, .btn1-blue, .btn1-red, .btn1-orange, .btn1-dark, .btn1-white{

   font-size:14px;
   color:#FFF;
   text-align:center;
   padding:5px 20px;
   border:none;
   margin:5px 0 5px 0;
   -moz-transition: all 0.3s;
   -webkit-transition: all 0.3s;
   -ms-transition: all 0.3s;
   -o-transition: all 0.3s;
   line-height:25px;
   border-radius:2px;

}

.contact-page{

   padding-top: 20px;
   /*padding-bottom: 20px;*/

}

/****************/ /******导航栏样式*********/ /*** Header and header elements

• • • /

.header {

   /*box-shadow: 0 5px 7px #CA01F9;*/
   box-shadow: 0 5px 7px #620053;
   /*background: #fff;*/
   border-radius: 0;
   /*margin-bottom: 23px;*/
   /*z-index: 999;*/
   position: relative;
   -webkit-transition: all ease-in-out 0.2s;
   -moz-transition: all ease-in-out 0.2s;
   -ms-transition: all ease-in-out 0.2s;
   -o-transition: all ease-in-out 0.2s;
   transition: all ease-in-out 0.2s;

}

.roll-nav{

   z-index: 3;
   padding: 0;
   position: fixed;
   background: url();
   /*background:  url(../img/top_bg.jpg);*/
   margin-top: -10px;

   -webkit-transition: all ease-in-out 0.2s;
   -moz-transition: all ease-in-out 0.2s;
   -ms-transition: all ease-in-out 0.2s;
   -o-transition: all ease-in-out 0.2s;
   transition: all ease-in-out 0.2s;

   -webkit-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);
   box-shadow: -4px 3px 0px 0px rgba(0, 0, 0, 0.2);

}

.roll-nav-hide{

   -webkit-transform: translateY(-500px);
   -moz-transform: translateY(-500px);
   -ms-transform: translateY(-500px);
   -o-transform: translateY(-500px);
   transform: translateY(-500px);

}

.home-img{

   padding-left: 200px;padding-right: 200px;

}

@media screen and (max-width:1024px){

   .home-img{
       padding-left: 100px;padding-right: 100px;
   }

}

/* 导航栏 */ .header-navigation {

   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 18px;
   font-weight: bold;
   /*margin: 0 10px 0 0;*/
   margin: 0;
   padding: 0;
   float: left;
   /*text-transform: uppercase;*/

} .header-navigation ul {

   margin: 0;
   padding: 0;
   list-style: none;

} .header-navigation > ul > li {

   float: left;
   padding:0 10px;
   /*box-shadow: 5px 0 rgba(216,209,183, 0.2);*/

}

.header-navigation > ul > li:last-child{

   box-shadow: none;

}

.header-navigation > ul > li > a {

   /*禁止选中*/
   user-select: none;
   -ms-user-select: none;
   -moz-user-select: none;
   -webkit-user-select: none;

   color: #FFFFFF;
   height:86px;
   display: block;

   padding: 30px 5px 30px;

   font-size: 14px;
   font-weight: 900;

}

/*这里，对导航栏的高度缩减*/ .roll-nav .header-navigation >ul >li >a{

   padding: 10px 10px 10px;
   height: 40px;

}

1. site-logo-img{

   width: 100%;height: auto;max-width:80px;

}

.roll-nav #site-logo-img{

   height: 40px;
   width: 40px;
   display: block;
   margin: 0 auto;

}

@media screen and (max-width: 1024px){

   .header-navigation > ul > li{
       padding: 0;
   }

}

.header-navigation ul > li.active > a, .header-navigation ul > li > a:hover, .header-navigation ul > li > a:focus, .header-navigation ul > li.open > a, .header-navigation ul > li.open > a:hover, .header-navigation ul > li.open > a:focus {

   /*color: rgb(136, 41, 129);*/
   color: #FFFFFF;
   text-decoration: none;
   display: block;
   /*background:rgba(20,41,60,0.3);*/

} .header-navigation ul > li.active > a {

   /*background: rgba(47,47,47,0.3);*/
   /*border-bottom: 2px solid #e64f00;*/

}

/* 下拉菜单*/ .header-navigation .tabdown-menu {

   left: auto;
   top: 100%;
   padding: 0;
   position: absolute;
   border: none;
   text-transform: none;
   letter-spacing: 0;
   border-radius: 0;

   z-index: 5;

}

.header-navigation .tabdown-menu:before, .header-navigation .tabdown-menu:after {

   display: none !important;

} .header-navigation > ul > li > .tabdown-menu {

   background: url();
   background-size: 100% 100%;
   background-repeat: no-repeat;
   border-radius: 5px;

}

/*首个选项顶部红色*/ .header-navigation .tabdown-menu > li:first-child { }

.header-navigation .tabdown-menu li {

   padding: 0;
   margin: 0;
   /*border-bottom: solid 2px #efefef;*/
   position: relative;
   /*display:block;*/
   display: none;
   float: none;

}

.header-navigation > ul >li:hover .tabdown-menu li,.header-navigation > ul >li:focus .tabdown-menu li{

   /*显示各个子菜单*/
   display: block;

}

.header-navigation .tabdown-menu li:last-child {

   border: none;

} .header-navigation .tabdown-menu li > a {

   padding: 10px 20px 10px 25px;
   display: block;
   font-weight: 400;
   font-size: 16px;
   color:#eeeeee;
   text-shadow: 1px 2px 5px #692117; 

}

/*二级菜单a标签hover效果*/ .header-navigation .tabdown-menu > li > a:hover, .header-navigation .tabdown-menu > li.active > a, .header-navigation .header-navigation-content .header-navigation-col li > a:hover, .header-navigation .header-navigation-content .header-navigation-col li.active > a {

   background-color: rgb(0,0,21);
   color: #cccccc;

}

/*顶部子导航*/ .sub-top-nav{

   -webkit-transition: all ease-in-out 0.2s;
   -moz-transition: all ease-in-out 0.2s;
   -ms-transition: all ease-in-out 0.2s;
   -o-transition: all ease-in-out 0.2s;
   transition: all ease-in-out 0.2s;

}

.sub-top-hide{

   -webkit-transform: translateX(-100%);
   -moz-transform: translateX(-100%);
   -ms-transform: translateX(-100%);
   -o-transform: translateX(-100%);
   transform: translateX(-100%);

}

.sub-top-nav-left{

   margin: 5px;
   padding: 2px;
   color: white;
   display: table;

}

.sub-top-nav-left span{

   font-size: 18px;
   display: table-cell;
   vertical-align: middle;

}

.sub-top-nav-right {

   color: white;
   margin: 5px;
   padding: 2px;
   display: table;
   font-size: 12px;

}

.sub-top-nav-right span{

   display: table-cell;
   vertical-align: middle;

}

1. sub-top-nav-right .nav-divider{

   display: inline-block;
   position: relative;
   margin: 0 0.85em 0 1.1em;
   vertical-align: top;
   text-align: center;

}

/*缓慢进入*/

       .slow-transition{
           -webkit-transition: transform ease-in-out .5s;
           -moz-transition: transform ease-in-out .5s;
           -ms-transition: transform ease-in-out .5s;
           -o-transition: transform ease-in-out .5s;
           transition: transform ease-in-out .5s;
       }

       .transform_hide{
           -webkit-transform: translateX(-180px);
           -moz-transform: translateX(-180px);
           -ms-transform: translateX(-180px);
           -o-transform: translateX(-180px);
           transform: translateX(-180px);
       }

       .nav-left{
           float: left;margin-left:-100%;width: 200px;position:relative;
       }

       .nav_shrink{
           color: #654D6F;
           position:absolute;
           top: -10px;
           left: 90px;font-size: 2.5em;cursor: pointer;z-index: 5;

           -webkit-transition: all ease-in-out 0.5s;
           -moz-transition: all ease-in-out 0.5s;
           -ms-transition: all ease-in-out 0.5s;
           -o-transition: all ease-in-out 0.5s;
           transition: all ease-in-out 0.5s;
       }

       #content-right-border{
           -webkit-transition: margin ease-in-out 0.5s;
           -moz-transition: margin ease-in-out 0.5s;
           -ms-transition: margin ease-in-out 0.5s;
           -o-transition: margin ease-in-out 0.5s;
           transition: margin ease-in-out 0.5s;
       }

/*内容不贴边*/ .block-title{

   margin-top: 30px;
   color:#923F91;
   padding-bottom: 10px;
   width: 100%;
   text-align: center;
   font-size: 2.5em;

} .block-content{

   font-size: 1.5em;
   padding:10px 50px;

}

       .block-content-header{
           display: inline-block;
           margin-top: 20px;
           margin-bottom: 10px;
           font-weight: bolder;
       }

/*增加斜体，小体等特殊样式*/

       .small{
           font-size: 0.5em;
       }

       .italic{
           font-style: italic;
       }

       .block-red{
           color:red;
       }

/*增加暖色背景*/

       .block-border-outer{
           margin-left:220px;margin-right: 20px;
           -webkit-box-shadow: 6px 6px 0px #2A455A;
           -moz-box-shadow: 6px 6px 0px #2A455A;
           box-shadow: 6px 6px 0px #2A455A;
           background: url();
           margin-top: 0.5em;margin-bottom:0.5em;padding: 1px;border-radius: 10px;
       }

       .overview-content{
           border:3px dashed #F08B1F;
           border-radius: 10px;margin: 0.5em;padding: 10px;
       }

/*图注样式*/

       .pic_info{
           font-size: 0.9em;
           width: 100%;
           text-align: center;
       }

/*设置段落样式*/ .block-header-margin1{

   margin-top: 1em;
   margin-bottom: 1.2em;

}

.block-paragraph{

   margin-top: 0.5em;  

}

.block-paragraph-padding{

   margin-top: 0.5em;
   padding: 0 1em;

}

.content-right{

  text-align: justify;
  text-justify: distribute-all-lines;

}