Difference between revisions of "Template:BNU-China/CSS/background"

Line 76: Line 76:
 
}
 
}
  
−
#w_Panel{
+
#w_Panel{
−
padding-top: 100px;
+
padding-top: 100px;
−
text-align:left;
+
text-align:left;
−
width:17%;
+
width:17%;
−
height:505px;
+
height:505px;
−
background-color:rgb(39,47,48);
+
background-color:rgb(39,47,48);
−
color:rgb(247,237,183);
+
color:rgb(247,237,183);
−
position: fixed;
+
position: fixed;
−
}
+
}
  
−
#w_Panel>ul>li{
+
#w_Panel>ul>li{
−
list-style: none;
+
list-style: none;
−
position:relative;
+
position:relative;
−
left: -20px;
+
left: -20px;
−
font-size: 20px;
+
font-size: 20px;
−
font-weight: bold;
+
font-weight: bold;
−
margin-bottom: 15px;
+
margin-bottom: 15px;
−
padding: 0px;
+
padding: 0px;
−
}
+
}
  
−
#w_Panel>ul>li>ul>li>p:hover{
+
#w_Panel>ul>li>ul>li>p:hover{
−
background-color: rgb(158,43,32);
+
background-color: rgb(158,43,32);
−
}
+
}
  
−
#w_Panel>ul>li>ul{
+
#w_Panel>ul>li>ul{
−
position: relative;
+
position: relative;
−
left: -20px;
+
left: -20px;
−
margin-top: 10px;
+
margin-top: 10px;
−
}
+
}
  
−
#w_Panel>ul>li>ul>li>p{
+
#w_Panel>ul>li>ul>li>p{
−
font-size: 15px;
+
font-size: 15px;
−
font-weight:lighter;
+
font-weight:lighter;
−
color:rgb(247,237,183);
+
color:rgb(247,237,183);
−
cursor: pointer;
+
cursor: pointer;
−
margin: 0px;
+
margin: 0px;
−
padding: 0px;
+
padding: 0px;
−
}
+
}
  
−
#w_text{
+
#w_text{
−
position: relative;
+
position: relative;
−
left: 17%;
+
left: 17%;
−
width: 83%;
+
width: 83%;
−
top:100px;
+
top:100px;
−
margin-bottom: 30px;
+
margin-bottom: 30px;
−
}
+
}
  
−
#w_text>p{
+
#w_text>p{
−
margin: 0px;
+
margin: 0px;
−
position: relative;
+
position: relative;
−
color:rgb(39,47,48);
+
color:rgb(39,47,48);
−
left: 15%;
+
left: 15%;
−
width: 70%;
+
width: 70%;
−
font-size: 14px;
+
font-size: 14px;
−
text-indent:14px;
+
text-indent:14px;
−
}
+
}
  
−
#w_text>h1{
+
#w_text>h1{
−
color:rgb(39,47,48);
+
color:rgb(39,47,48);
−
font-size: 60px;
+
font-size: 60px;
−
position: relative;
+
position: relative;
−
left: 14.4%;
+
left: 14.4%;
−
width: 70%;
+
width: 70%;
−
font-weight: bold;
+
font-weight: bold;
−
}
+
}
 +
#w_text>h2{
 +
color:rgb(39,47,48);
 +
position: relative;
 +
font-size:30px;
 +
left: 14.8%;
 +
width: 70%;
 +
margin: 20px 0px 0px 0px;
 +
padding: 0px;
 +
text-decoration: underline;
 +
font-weight: bold;
 +
}
  
−
#w_text>h2{
+
#w_text>h3{
−
color:rgb(39,47,48);
+
margin: 15px 0px 5px 0px;
−
position: relative;
+
padding: 0px;
−
font-size:30px;
+
color:rgb(39,47,48);
−
left: 14.8%;
+
position: relative;
−
width: 70%;
+
left: 15%;
−
margin: 20px 0px 0px 0px;
+
width: 70%;
−
padding: 0px;
+
font-size: 14px;
−
text-decoration: underline;
+
font-style: italic;
−
font-weight: bold;
+
font-weight: bold;
−
}
+
}
  
−
#w_text>h3{
+
#w_text>h4{
−
margin: 15px 0px 5px 0px;
+
text-align: center;
−
padding: 0px;
+
margin:0px 0px 10px 0px;
−
color:rgb(39,47,48);
+
padding: 0px;
−
position: relative;
+
color:rgb(39,47,48);
−
left: 15%;
+
opacity: 0.5;
−
width: 70%;
+
position: relative;
−
font-size: 14px;
+
left: 15%;
−
font-style: italic;
+
width: 70%;
−
font-weight: bold;
+
font-size: 12px;
−
}
+
}
  
−
#w_text>h4{
+
#w_text>img{
−
text-align: center;
+
position: relative;
−
margin:0px 0px 10px 0px;
+
width: 70%;
−
padding: 0px;
+
left: 15%;
−
color:rgb(39,47,48);
+
margin:5px 0px 0px 0px;
−
opacity: 0.5;
+
padding: 0px;
−
position: relative;
+
}
−
left: 15%;
+
@media screen and (max-width:911px){
−
width: 70%;
+
#w_Panel>ul>li{
−
font-size: 12px;
+
font-size: 15px;
 +
}
 +
#w_Panel>ul>li>ul>li>p{
 +
font-size: 10px;
 +
}
 +
}
 +
@media screen and (max-width:767px){
 +
#w_text{
 +
position: relative;
 +
left: 25%;
 +
width: 75%;
 +
top:100px;
 +
}
 +
#w_Panel{
 +
padding-top: 100px;
 +
width:25%;
 +
height:505px;
 +
}
 +
#w_text>p{
 +
left: 10%;
 +
width: 80%;
 +
font-size: 14px;
 +
}
 +
#w_text>h1{
 +
left:10%;
 +
width:80%;
 +
font-size: 30px;
 +
}
 +
#w_text>h3{
 +
font-size: 22px;
 +
}
 +
#w_text>h2{
 +
font-size: 50px;
 
}
 
}
 +
}
  
−
#w_text>img{
+
@media screen and (max-width:480px){
−
position: relative;
+
#w_text{
−
width: 70%;
+
position: relative;
−
left: 15%;
+
left: 30%;
−
margin:5px 0px 0px 0px;
+
width: 70%;
−
padding: 0px;
+
top:100px;
−
}
+
}
 +
#w_Panel{
 +
padding-top: 100px;
 +
width:30%;
 +
height:505px;
 +
}
 +
#w_Panel>ul>li{
 +
left: -30px;
 +
}
 +
#w_text>p{
 +
left: 5%;
 +
width: 90%;
 +
}
 +
#w_text>h1{
 +
left:5%;
 +
width:90%;
 +
}
 +
}
  
−
@media screen and (max-width:911px){
+
.w_indexPhoto{
−
#w_Panel>ul>li{
+
text-align: center;
−
font-size: 15px;
+
position:absolute;
−
}
+
width: 100%;
−
#w_Panel>ul>li>ul>li>p{
+
margin: 14px 0px 0px 0px;
−
font-size: 10px;
+
padding: 14px 0px 0px 0px;
−
}
+
}
−
}
+
−
 
+
−
@media screen and (max-width:767px){
+
−
#w_text{
+
−
position: relative;
+
−
left: 25%;
+
−
width: 75%;
+
−
top:100px;
+
−
}
+
−
#w_Panel{
+
−
padding-top: 100px;
+
−
width:25%;
+
−
height:505px;
+
−
}
+
−
#w_text>p{
+
−
left: 10%;
+
−
width: 80%;
+
−
font-size: 14px;
+
−
}
+
−
#w_text>h1{
+
−
left:10%;
+
−
width:80%;
+
−
font-size: 30px;
+
−
}
+
−
#w_text>h3{
+
−
font-size: 22px;
+
−
}
+
−
 
+
−
#w_text>h2{
+
−
font-size: 50px;
+
−
}
+
−
}
+
−
 
+
−
@media screen and (max-width:480px){
+
−
#w_text{
+
−
position: relative;
+
−
left: 30%;
+
−
width: 70%;
+
−
top:100px;
+
−
}
+
−
#w_Panel{
+
−
padding-top: 100px;
+
−
width:30%;
+
−
height:505px;
+
−
}
+
−
#w_Panel>ul>li{
+
−
left: -30px;
+
−
}
+
−
#w_text>p{
+
−
left: 5%;
+
−
width: 90%;
+
−
}
+
−
#w_text>h1{
+
−
left:5%;
+
−
width:90%;
+
−
}
+
−
}
+
−
 
+
−
.w_indexPhoto{
+
−
text-align: center;
+
−
position:absolute;
+
−
width: 100%;
+
−
margin: 14px 0px 0px 0px;
+
−
padding: 0px;
+
−
}
+
  
 
.w_indexPhoto>img{
 
.w_indexPhoto>img{

Revision as of 07:58, 6 October 2017

body{ margin:0px; overflow-y: scroll; } .w_a{ text-decoration:none; color: rgb(247,237,183); }

  1. w_nav{

margin: 0px; padding: 0px; top:15px; position:fixed; z-index: 500; }

  1. w_nav>img{

display:inline-block; margin: 0px; padding: 0px; width:100%; }

  1. w_nav>ul{

margin: 0px; padding: 0px; position: relative; text-align: center; }

  1. w_nav>ul>li{

margin:0px; padding: 0px; display:inline; }

  1. w_nav>ul>li>a{

text-align: center; margin: 0px; padding: 0px; display:inline-block; color: rgb(247,237,183); }

  1. w_nav>div{

position: relative; top:-42px; color:rgb(247,237,183); font-size: 16px; }

  1. w_nav>div>p{

cursor:pointer; }

  1. w_nav>div>ul{

position: relative; text-align: center; background-color: rgb(158,43,32); }

  1. w_nav>div>ul>li{

text-align: center; list-style: none; }

  1. w_nav>div>ul>li>a{

color:rgb(247,237,183); position: relative; left:-20px; }

p{ opacity: 1; }

  1. w_Panel{

padding-top: 100px; text-align:left; width:17%; height:505px; background-color:rgb(39,47,48); color:rgb(247,237,183); position: fixed; }

  1. w_Panel>ul>li{

list-style: none; position:relative; left: -20px; font-size: 20px; font-weight: bold; margin-bottom: 15px; padding: 0px; }

  1. w_Panel>ul>li>ul>li>p:hover{

background-color: rgb(158,43,32); }

  1. w_Panel>ul>li>ul{

position: relative; left: -20px; margin-top: 10px; }

  1. w_Panel>ul>li>ul>li>p{

font-size: 15px; font-weight:lighter; color:rgb(247,237,183); cursor: pointer; margin: 0px; padding: 0px; }

  1. w_text{

position: relative; left: 17%; width: 83%; top:100px; margin-bottom: 30px; }

  1. w_text>p{

margin: 0px; position: relative; color:rgb(39,47,48); left: 15%; width: 70%; font-size: 14px; text-indent:14px; }

  1. w_text>h1{

color:rgb(39,47,48); font-size: 60px; position: relative; left: 14.4%; width: 70%; font-weight: bold; }

  1. w_text>h2{

color:rgb(39,47,48); position: relative; font-size:30px; left: 14.8%; width: 70%; margin: 20px 0px 0px 0px; padding: 0px; text-decoration: underline; font-weight: bold; }

  1. w_text>h3{

margin: 15px 0px 5px 0px; padding: 0px; color:rgb(39,47,48); position: relative; left: 15%; width: 70%; font-size: 14px; font-style: italic; font-weight: bold; }

  1. w_text>h4{

text-align: center; margin:0px 0px 10px 0px; padding: 0px; color:rgb(39,47,48); opacity: 0.5; position: relative; left: 15%; width: 70%; font-size: 12px; }

  1. w_text>img{

position: relative; width: 70%; left: 15%; margin:5px 0px 0px 0px; padding: 0px; } @media screen and (max-width:911px){ #w_Panel>ul>li{ font-size: 15px; } #w_Panel>ul>li>ul>li>p{ font-size: 10px; } } @media screen and (max-width:767px){ #w_text{ position: relative; left: 25%; width: 75%; top:100px; } #w_Panel{ padding-top: 100px; width:25%; height:505px; } #w_text>p{ left: 10%; width: 80%; font-size: 14px; } #w_text>h1{ left:10%; width:80%; font-size: 30px; } #w_text>h3{ font-size: 22px; } #w_text>h2{ font-size: 50px; } }

@media screen and (max-width:480px){ #w_text{ position: relative; left: 30%; width: 70%; top:100px; } #w_Panel{ padding-top: 100px; width:30%; height:505px; } #w_Panel>ul>li{ left: -30px; } #w_text>p{ left: 5%; width: 90%; } #w_text>h1{ left:5%; width:90%; } }

.w_indexPhoto{ text-align: center; position:absolute; width: 100%; margin: 14px 0px 0px 0px; padding: 14px 0px 0px 0px; }

.w_indexPhoto>img{ width: 100%; }

#storyArrow{ cursor: pointer; top: 88%; position: fixed; width: 4%; left: 48%; opacity: 0.6; }

#abstract{ background-color: rgb(39,47,48); color: rgb(247,237,183); width: 100%; height:100%; text-align: center; }

#abstract>h1{ font-size: 100px; 

                       color: rgb(247,237,183);

margin: 0px; padding: 0px; font-weight: bold; 

                       line-height:normal;

}

#abstract>p{ position: relative; width: 80%; left: 10%; font-size: 22px; margin: 0px 0px 5.9% 0px; }

@media screen and (min-width:767px) { .w_indexPhoto{ position:absolute; top:70px; width: 100%; } }

@media screen and (max-width:1050px){ .w_indexPhoto{ top:45px; } }

@media screen and (max-width:767px){ #abstract>h1{ font-size: 80px; } #abstract>p{ font-size: 14px; margin-bottom: 0%; } .w_indexPhoto{ margin-top: 30px; position:static; width: 100%; } }

@media screen and (max-width:480px){ #abstract>h1{ font-size: 60px; } #abstract>p{ font-size: 12px; } .w_indexPhoto{ margin-top: 15px; } }