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

Latest revision as of 03:02, 8 September 2018

   body{
     font: 15px/1.5 Arial, Helvetice, sans-serif; 
     padding: 0;
     margin:0;
     background-color:#ecf0f9;
   }

   /*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: 96px;
   }

   /** 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 **/

   /** homepage read more **/
   .readmore: {
     width:80%
     color: #000000;
     padding: 0px;
     margin: 0px;
     position:absolute;

   }

   /** homepage read more **/

   .qinghuai:{
     margin: 0;

      width:100px;}