Difference between revisions of "Template:BIT/9.6test/CSS"

Revision as of 08:29, 6 September 2018

   body{

font: 15px/1.5 Arial, Helvetice, sans-serif; padding: 0; margin:0; background-color: #f4f4f4;

                                               height: 100%;
                                               width: 100%;

}

/*Global*/ .container{ width:80%; margin:auto; overflow: hidden; } ul{ margin:0; padding:0; }

/* Header */ header{ background:#35445a; color:#ffffff; padding-top: 25px; min-height: 70px; border-bottom: #e8491d 3px solid; } header a{ color: #ffffff; text-decoration:none; font-size: 13px; }

header li{ float:left; display: inline; padding:0 20px 0 20px;

} header #branding{ float:left; } header #branding h1{ margin:0; } header nav{ float: right; margin-top:40px ; }

/** dropdown **/ /**父菜单**/ header li a, .dropbtn { display: inline; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /**父菜单悬浮背景**/ header .dropdown:hover .dropbtn , a:hover { color:#e8491d; }

.dropdown { display: inline-block; padding: 4px;

}/** 父菜单横排**/

/**子菜单**/ .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 84px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); }

.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; }

.dropdown-content a:hover {background-color: #f1f1f1} .dropdown:hover .dropdown-content { display: block; } /** drop down **/ /** 导航页追随 **/ header{ position:fixed;

           top:0; 
           left:0; 
           width:100%; 
           z-index:999; 

} #blank{ margin-top: 98px; }

   /** showcase Highlight **/
     *, *:before, *:after {
   box-sizing: border-box;
   }
   #showcase{
   font-size: 18px;
   line-height: 1.5;
   font-weight: 300;
   color: #333;
   font-family: "Nunito Sans", sans-serif;

  }

   #pzz{
   	margin: 0;
     padding: 0;
     height: 200vh;
     background-color: #ecf0f9;
     background-attachment: fixed;
   }
   #pz {
   display: flex;
   margin: 0 auto;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   max-width: 1000px;
   }

   .card {
     color: inherit;
     cursor: pointer;
     width: calc(33% - 2rem);
     min-width: calc(33% - 2rem);
     height: 300px;
     min-height: 300px;
     perspective: 1000px;
     margin: 1rem;
     position: relative;
   }
   @media screen and (max-width: 800px) {
   .card {
       width: calc(50% - 2rem);
     }
   }
   @media screen and (max-width: 500px) {
   .card {
       width: 100%;
     }
   }

   .front,
   .back {
     color: inherit;
     display: flex;
     border-radius: 6px;
     background-position: center;
     background-size: cover;
     text-align: center;
     justify-content: center;
     align-items: center;
     position: absolute;
     height: 100%;
     width: 100%;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     transform-style: preserve-3d;
     transition: ease-in-out 550ms;
   }

   .front {
     background-size: cover;
     padding: 2rem;
     font-size: 1.618rem;
     font-weight: 600;
     color: #fff;
     overflow: hidden;
     font-family: Poppins, sans-serif;
   }
   .front:before {
     position: absolute;
     display: block;
     content: ;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: linear-gradient(135deg, #1a9be6, #1a57e6);
     opacity: .25;
     z-index: -1;
   }
   .card:hover .front {
     transform: rotateY(180deg);
   }
   .card:nth-child(even):hover .front {
     transform: rotateY(-180deg);
   }

   .back {
     color:black;
     background: #fff;
     transform: rotateY(-180deg);
     padding: 0 2em;
   }
   .card:hover .back {
     transform: rotateY(0deg);
   }
   .card:nth-child(even) .back {
     transform: rotateY(180deg);
   }
   .card:nth-child(even):hover .back {
     transform: rotateY(0deg);
   }

   .button {
     transform: translateZ(40px);
     cursor: pointer;
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     font-weight: bold;
     color: #fff;
     padding: .5em 1em;
     border-radius: 100px;
     font: inherit;
     background: linear-gradient(135deg, #1a9be6, #1a57e6);
     border: none;
     position: relative;
     transform-style: preserve-3d;
     transition: 300ms ease;
   }
   .button:before {
     transition: 300ms ease;
     position: absolute;
     display: block;
     content: ;
     transform: translateZ(-40px);
     -webkit-backface-visibility: hidden;
     backface-visibility: hidden;
     height: calc(100% - 20px);
     width: calc(100% - 20px);
     border-radius: 100px;
     left: 10px;
     top: 16px;
     box-shadow: 0 0 10px 10px rgba(26, 87, 230, 0.25);
     background-color: rgba(26, 87, 230, 0.25);
   }
   .button:hover {
     transform: translateZ(55px);
   }
   .button:hover:before {
     transform: translateZ(-55px);
   }
   .button:active {
     transform: translateZ(20px);
   }
   .button:active:before {
     transform: translateZ(-20px);
     top: 12px;
   }
   /** showcase Highlight **/
       #globalWrapper{
           margin: 0;
           padding: 0;
       }
       #content{
           width: 100%;
           padding: 0;
           margin: -12px 0 0;
       }
       #top_title{
           display: none;
       }
       #sideMenu{
           display: none;
       }
      #content,
     .vs-content,
      .vs-wrapper section {
        background-color: transparent !important;
      }
      .my-backTop:visited {
        color: #F8A886 !important;
      }