Difference between revisions of "Team:XMU-China/css/home turn"

Latest revision as of 18:01, 17 October 2018

.js_simple{

   display: none;

} .examplecode {

   margin: 0 auto 30px;

} .examplecode:last-child {

   margin-bottom: 0;

}

section {

   padding: 5vw 0;

} section:nth-child(even) {

   background: #ececec;

} .slider {

   position: relative;
   width: 320px;
   margin: 0 auto 40px;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: -moz-none;
   -o-user-select: none;
   user-select: none;

} .frame {

   position: relative;
   width: 270px;
   margin: 0 auto;
   font-size: 0;
   line-height: 0;
   overflow: hidden;
   white-space: nowrap;

} .frame li {

   position: relative;
   display: inline-block;
   font-family: 'Source Sans Pro', sans-serif;
   height: 210px;
   text-align: center;
   font-size: 15px;
   line-height: 30px;
   background: #fff;
   color: #fff;

} .slides {

   display: inline-block;

} .variablewidth li {

   width: 280px;
   margin-right: 10px;

}

.variablewidth li:last-child{

   margin-right: 0;

} .prev, .next {

   position: absolute;
   top: 50%;
   margin-top: -25px;
   display: block;
   cursor: pointer;

} .next {

   right: 0;

} .prev {

   left: 0;

} .next svg, .prev svg {

   width: 25px;

} @media screen and (min-width: 45rem ) {

   .frame {
       width: 580px;
   }
   .next svg, .prev svg {
       width: 2vw;
   }
   .slider {
       width: 70vw;
       margin: 0 auto 20px;
       min-width: 640px;
   }
   .variablewidth li {
       width: 280px;
       margin-right: 10px;
   }

} @media screen and (min-width: 90rem ) {

   .slider {
       width: 980px;
       margin: 0 auto 20px;
   }
   .frame {
       width: 880px;
   }
   .variablewidth li {
       width: 280px;
       margin-right: 10px;
   }

} @media screen and (max-width: 45rem ) {

   .variablewidth li{
       width: 135px;
   }
   .frame li{
       height: 100px;
   }

}