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

Line 367: Line 367:
 
     text-align: justify;
 
     text-align: justify;
 
     text-justify: distribute-all-lines;
 
     text-justify: distribute-all-lines;
 +
}
 +
 +
/*设置最大图片宽度*/
 +
.content-title img{
 +
max-width:100%;
 
}
 
}

Revision as of 09:16, 7 November 2016

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

.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);
   }

}

/**************************************************/ /*部分小样式*/ .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;

}

/****************/ /******导航栏样式*********/ /*** 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(T--BIT-China--img--top_bg.png);
   /*background:  url(../img/top_bg.jpg);*/
   margin-top: -10px;
   -webkit-transition: transform ease-in-out 0.2s;
   -moz-transition: transform ease-in-out 0.2s;
   -ms-transition: transform ease-in-out 0.2s;
   -o-transition: transform ease-in-out 0.2s;
   transition: transform 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);

}

/*导航栏padding*/ .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 > 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);

}

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

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


   background: url(T--BIT-China--downmenubg.png);
   background-size: 100% 100%;
   background-repeat: no-repeat;
   border-radius: 5px;

}

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

   display: none !important;

}

.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;

}

.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;

}

/*缓慢进入*/ .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;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -ms-transition-delay: 0s;
   -o-transition-delay: 0s;
   transition-delay: 0s;

} /*左侧导航隐藏*/ .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;

}

/*右侧导航增加缓入效果*/

  1. 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(T--BIT-China--img--basic_bg3.png);
   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;

}

/*设置最大图片宽度*/ .content-title img{ max-width:100%; }