Difference between revisions of "Template:SZMS 15 Shenzhen/indexsccss"

(Created page with "@charset "UTF-8"; →‎@font-face { font-family: NotoSansHans; src: url('../font-face/NotoSansHans-Thin.otf'); }: @media screen and (min-width:320px) and (max-width:780px) { #nav-...")
 
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;}
 +
#top-section {
 +
    border: none;
 +
    height: 0px;}
 +
#content {
 +
    border: none;
 +
width:100%;}
 +
 +
 
@charset "UTF-8";
 
@charset "UTF-8";
 
/*@font-face
 
/*@font-face
Line 110: Line 120:
 
#menubar{
 
#menubar{
 
     background-color: rgba(16, 38, 67, 0.7);
 
     background-color: rgba(16, 38, 67, 0.7);
−
     height: 42px;
+
     height: 42px;  
−
     top:20px;
+
     top:18px;
−
     width:100%;
+
left:-5px;
 +
     width:105%;
 
     position: fixed;
 
     position: fixed;
 
     z-index: 3;
 
     z-index: 3;
Line 134: Line 145:
 
     padding: 0px;
 
     padding: 0px;
 
     position: relative;
 
     position: relative;
 +
    text-align: center;
 +
    color: aliceblue;
 +
}
 +
#nav-tem{
 +
    margin-left: auto;
 +
    z-index: 3;
 +
    margin-right: auto;
 +
    margin-top: 10px;
 
}
 
}
 
.nav-button {
 
.nav-button {
Line 206: Line 225:
 
     color: rgb(256,256,256);
 
     color: rgb(256,256,256);
 
     position: relative;
 
     position: relative;
−
     bottom: -85px;
+
     bottom: -80px;
 
     display: none;
 
     display: none;
 
     height: 80px;
 
     height: 80px;
Line 231: Line 250:
 
.heading{
 
.heading{
 
     top: 50px;
 
     top: 50px;
 +
    position: relative;
 
     height: 500px;
 
     height: 500px;
−
     width: 90%;
+
     width: 80%;
−
     z-index: 2;
+
     margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    background-color: rgba(225, 225, 225, 0.2);
 +
    padding: 5%;
 +
}
 +
.heading-text{
 +
    width: 50%;
 +
    float: left;
 +
   
 +
   
 +
}
 +
.heading-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.heading-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: right;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
.content1{
 +
    top: 0px;
 
     position: relative;
 
     position: relative;
 +
    height: 500px;
 +
    width: 80%;
 
     margin-left: 5%;
 
     margin-left: 5%;
 
     margin-bottom: 70px;
 
     margin-bottom: 70px;
−
     background-color: rgba(16, 38, 67, 0.2);
+
    padding: 5%;
 +
}
 +
.content1-text{
 +
    width: 50%;
 +
    float: right;
 +
   
 +
   
 +
}
 +
.content1-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.content1-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: left;
 +
    height: 95%;
 +
     background-color: rgba(1,1,1,0.02)
 +
}
 +
.content1-pic img{
 +
    width: 95%;
 +
    margin-left: 2.5%;
 +
    margin-top:2.5%;
 +
    margin-bottom: auto;
 +
}
 +
.content2{
 +
    top: 0px;
 +
    position: relative;
 +
    height: 500px;
 +
    width: 80%;
 +
    margin-left: 5%;
 +
    margin-bottom: 70px;
 +
    padding: 5%;
 +
}
 +
.content2-pic img{
 +
    width: 95%;
 +
    margin-left: 2.5%;
 +
    margin-top:2.5%;
 +
    margin-bottom: auto;
 +
}
 +
.content2-text{
 +
    width: 50%;
 +
    float: left;
 +
   
 +
   
 +
}
 +
.content2-text-title{
 +
    width: 100%;
 +
    text-align: center;
 +
    font-size: 150%;
 +
    font-weight: bold;
 +
    margin-bottom: 5px;
 +
}
 +
.content2-pic{
 +
    margin:2.5%;
 +
    width: 45%;
 +
    float: right;
 +
    height: 95%;
 +
    background-color: rgba(1,1,1,0.02)
 +
}
 +
#b-intro{
 +
    position: relative;
 +
    width: 90%;
 +
    height: 50px;
 +
    margin: 15px;
 +
    background-color: rgb(235, 235, 235);
 +
    margin-left: 5%;
 +
    margin-right: 5%;
 +
    padding-bottom: 30px;
 +
    padding-top: 30px;
 +
}
 +
#b-intro-title{
 +
    vertical-align: middle;
 +
    padding:10px;
 +
    padding-left: 50px;
 +
    font-weight: bold;
 
}
 
}

Latest revision as of 03:15, 18 September 2015

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;}
  1. top-section {
   border: none;
   height: 0px;}
  1. content {
   border: none;

width:100%;}


@charset "UTF-8"; /*@font-face { font-family: NotoSansHans; src: url('../font-face/NotoSansHans-Thin.otf'); }*/ @media screen and (min-width:320px) and (max-width:780px) { #nav-div { width: 100%; 

       margin-left: -33px;

} 

   .nav-li {
       display:none;
   }
   .nav-button {
       display: block;
   }  
   .sub{
       width: 100%;
       margin-bottom: 5px;
   }
   .sub-heading{
       height:896px;
   }

}

@media screen and (min-width:780px) and (max-width:1000px) { #nav-div { width: 100%; } 

   .nav-li {
       display: block;
       width: 14.5%;
   }
   .nav-button {
       display: none;
   } 
   .sub{
       width: 25%;
   }
   .sub-heading{
       height:224px;
   }

}


@media screen and (min-width:1000px) { #nav-div { width:1000px; 

       margin-left: auto;
       margin-right: auto;

} 

   .nav-li {
       display: block;
       width: 150px;
   }
   .nav-button {
       display: none;
   } 
   .sub{
       width: 25%;
   }
   .sub-heading{
       height:224px;
   }

}

body{ 

   margin: 0px;
   padding: 0px;
   font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
   /*change if necessary*/

}

  1. heading{
   position: relative;
   z-index: 1;
   margin-bottom: 10px;
   cursor:pointer;

}

.nav-list{ 

   display: block;
   margin: 0px;

}

.nav-li{ 

   font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
   float: left;
   list-style-type: none;
   text-align: center;
   line-height: 2.6;

} .nav-logo{ 

   list-style-type: none;

} .nav-list li a{ 

   text-decoration: none;
   display: block;
   color: #FFFFFF;

}

.nav-list li a:hover{ 

   color: #BBBBBB;

}

  1. menubar{
   background-color: rgba(16, 38, 67, 0.7);
   height: 42px; 
   top:18px;

left:-5px; 

   width:105%;
   position: fixed;
   z-index: 3;

}

.nav-logo img{ 

   width:200px;
   padding-top: 4px;
   margin: 0px;

} .nav-logo { 

   padding: 0px;
   margin: 0px;
   float: left;

}

  1. nav-div{
   height:42px;
   z-index: 3;
   margin-top: 0px;
   margin-bottom: 0px;
   padding: 0px;
   position: relative;
   text-align: center;
   color: aliceblue;

}

  1. nav-tem{
   margin-left: auto;
   z-index: 3;
   margin-right: auto;
   margin-top: 10px;

} .nav-button { 

   float:left;

} .nav-button img { 

   height:25px;
   margin-top:9px;

}

  1. leftbar_f{
   width:100%;
   height: 100%;
   position: fixed;
   z-index: 2;

} .sub-heading{ 

   margin-left: 5%;
   width: 90%;
   position: relative;
   z-index: 1;

} .sub{ 

   height:220px;
   padding: 0px;
   float: left;

} .subi{ 

   margin-left: 2px;
   margin-right:2px;
   background-color: rgb(240,240,240);
   height: 100%;
   text-align: center;
   font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
   line-height: 1.3;
   cursor:pointer;
   overflow-y: hidden;
   display:block;

} .subi img{ 

   margin-top:10px;
   width: 80%;
   max-width: 230px;
   margin-bottom: 10px;

} .sub ul{ 

   padding: 0px;
   margin: 0px;

} .bottombar { 

   width: 100%;
   position:relative;
   z-index: 1;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;

} .buttom-intro{ 

   font-family: NotoSansHans, NotoSansHans-Thin, Calibri, Arial, sans-serif;
   font-size: 70%;

} .subi-f{ 

   background-color: rgba(0, 62, 147, 0.6);
   color: rgb(256,256,256);
   position: relative;
   bottom: -80px;
   display: none;
   height: 80px;
   padding-top: 15px;
   z-index: 2;

}

  1. b-intro{
   position: relative;
   width: 90%;
   height: 50px;
   margin: 15px;
   background-color: rgb(235, 235, 235);
   margin-left: 5%;
   margin-right: 5%;
   padding-bottom: 30px;
   padding-top: 30px;

}

  1. b-intro-title{
   vertical-align: middle;
   padding:10px;
   padding-left: 50px;
   font-weight: bold;

} .heading{ 

   top: 50px;
   position: relative;
   height: 500px;
   width: 80%;
   margin-left: 5%;
   margin-bottom: 70px;
   background-color: rgba(225, 225, 225, 0.2);
   padding: 5%;

} .heading-text{ 

   width: 50%;
   float: left;

} .heading-text-title{ 

   width: 100%;
   text-align: center;
   font-size: 150%;
   font-weight: bold;
   margin-bottom: 5px;

} .heading-pic{ 

   margin:2.5%;
   width: 45%;
   float: right;
   height: 95%;
   background-color: rgba(1,1,1,0.02)

} .content1{ 

   top: 0px;
   position: relative;
   height: 500px;
   width: 80%;
   margin-left: 5%;
   margin-bottom: 70px;
   padding: 5%;

} .content1-text{ 

   width: 50%;
   float: right;

} .content1-text-title{ 

   width: 100%;
   text-align: center;
   font-size: 150%;
   font-weight: bold;
   margin-bottom: 5px;

} .content1-pic{ 

   margin:2.5%;
   width: 45%;
   float: left;
   height: 95%;
   background-color: rgba(1,1,1,0.02)

} .content1-pic img{ 

   width: 95%;
   margin-left: 2.5%;
   margin-top:2.5%; 
   margin-bottom: auto;

} .content2{ 

   top: 0px;
   position: relative;
   height: 500px;
   width: 80%;
   margin-left: 5%;
   margin-bottom: 70px;
   padding: 5%;

} .content2-pic img{ 

   width: 95%;
   margin-left: 2.5%;
   margin-top:2.5%; 
   margin-bottom: auto;

} .content2-text{ 

   width: 50%;
   float: left;

} .content2-text-title{ 

   width: 100%;
   text-align: center;
   font-size: 150%;
   font-weight: bold;
   margin-bottom: 5px;

} .content2-pic{ 

   margin:2.5%;
   width: 45%;
   float: right;
   height: 95%;
   background-color: rgba(1,1,1,0.02)

}

  1. b-intro{
   position: relative;
   width: 90%;
   height: 50px;
   margin: 15px;
   background-color: rgb(235, 235, 235);
   margin-left: 5%;
   margin-right: 5%;
   padding-bottom: 30px;
   padding-top: 30px;

}

  1. b-intro-title{
   vertical-align: middle;
   padding:10px;
   padding-left: 50px;
   font-weight: bold;

}