Difference between revisions of "Template:BNU-China/CSS/background"
| Line 1: | Line 1: | ||
body{ | body{ | ||
| − | + | margin:0px; | |
| − | + | overflow-y: scroll; | |
| − | } | + | } |
| − | .w_a{ | + | .w_a{ |
| − | + | text-decoration:none; | |
| − | + | color: rgb(247,237,183); | |
| − | } | + | } |
| − | #w_nav{ | + | #w_nav{ |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | + | top:15px; | |
| − | + | position:fixed; | |
| − | + | z-index: 500; | |
| − | } | + | } |
| − | #w_nav>img{ | + | #w_nav>img{ |
| − | + | display:inline-block; | |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | + | width:100%; | |
| − | } | + | } |
| − | #w_nav>ul{ | + | #w_nav>ul{ |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | + | position: relative; | |
| − | + | text-align: center; | |
| − | } | + | } |
| − | #w_nav>ul>li{ | + | #w_nav>ul>li{ |
| − | + | margin:0px; | |
| − | + | padding: 0px; | |
| − | + | display:inline; | |
| − | } | + | } |
| − | #w_nav>ul>li>a{ | + | #w_nav>ul>li>a{ |
| − | + | text-align: center; | |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | + | display:inline-block; | |
| − | + | color: rgb(247,237,183); | |
| − | } | + | } |
| − | #w_nav>div{ | + | #w_nav>div{ |
| − | + | position: relative; | |
| − | + | top:-42px; | |
| − | + | color:rgb(247,237,183); | |
| − | + | font-size: 16px; | |
| − | } | + | } |
| − | #w_nav>div>p{ | + | #w_nav>div>p{ |
| − | + | cursor:pointer; | |
| − | } | + | } |
| − | #w_nav>div>ul{ | + | #w_nav>div>ul{ |
| − | + | position: relative; | |
| − | + | text-align: center; | |
| − | + | background-color: rgb(158,43,32); | |
| − | } | + | } |
| − | #w_nav>div>ul>li{ | + | #w_nav>div>ul>li{ |
| − | + | text-align: center; | |
| − | + | list-style: none; | |
| − | } | + | } |
| − | #w_nav>div>ul>li>a{ | + | #w_nav>div>ul>li>a{ |
| − | + | color:rgb(247,237,183); | |
| − | + | position: relative; | |
| − | + | left:-20px; | |
| − | } | + | } |
| − | p{ | + | p{ |
| − | + | opacity: 1; | |
| − | } | + | } |
| − | #w_Panel{ | + | #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; | |
| − | } | + | } |
| − | #w_Panel>ul>li{ | + | #w_Panel>ul>li{ |
| − | + | list-style: none; | |
| − | + | position:relative; | |
| − | + | left: -20px; | |
| − | + | font-size: 20px; | |
| − | + | font-weight: bold; | |
| − | + | margin-bottom: 15px; | |
| − | + | padding: 0px; | |
| − | } | + | } |
| − | #w_Panel>ul>li>ul>li>p:hover{ | + | #w_Panel>ul>li>ul>li>p:hover{ |
| − | + | background-color: rgb(158,43,32); | |
| − | } | + | } |
| − | #w_Panel>ul>li>ul{ | + | #w_Panel>ul>li>ul{ |
| − | + | position: relative; | |
| − | + | left: -20px; | |
| − | + | margin-top: 10px; | |
| − | } | + | } |
| − | #w_Panel>ul>li>ul>li>p{ | + | #w_Panel>ul>li>ul>li>p{ |
| − | + | font-size: 15px; | |
| − | + | font-weight:lighter; | |
| − | + | color:rgb(247,237,183); | |
| − | + | cursor: pointer; | |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | } | + | } |
| − | #w_text{ | + | #w_text{ |
| − | + | position: relative; | |
| − | + | left: 17%; | |
| − | + | width: 83%; | |
| − | + | top:100px; | |
| − | + | margin-bottom: 30px; | |
| − | } | + | } |
| − | #w_text>p{ | + | #w_text>p{ |
| − | + | margin: 0px; | |
| − | + | position: relative; | |
| − | + | color:rgb(39,47,48); | |
| − | + | left: 15%; | |
| − | + | width: 70%; | |
| − | + | font-size: 14px; | |
| − | + | text-indent:14px; | |
| − | } | + | } |
| − | #w_text>h1{ | + | #w_text>h1{ |
| − | + | color:rgb(39,47,48); | |
| − | + | font-size: 60px; | |
| − | + | position: relative; | |
| − | + | left: 14.4%; | |
| − | + | width: 70%; | |
| − | + | font-weight: bold; | |
| − | } | + | } |
| − | #w_text>h2{ | + | #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>h3{ | + | #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; | |
| − | } | + | } |
| − | #w_text>h4{ | + | #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; | |
| − | } | + | } |
| − | #w_text>img{ | + | #w_text>img{ |
| − | + | position: relative; | |
| − | + | width: 70%; | |
| − | + | left: 15%; | |
| − | + | margin:5px 0px 0px 0px; | |
| − | + | padding: 0px; | |
| − | } | + | } |
| − | @media screen and (max-width:911px){ | + | @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){ | + | @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){ | + | @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{ | + | .w_indexPhoto{ |
| − | + | text-align: center; | |
| − | + | position:absolute; | |
| − | + | width: 100%; | |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | } | + | } |
| − | .w_indexPhoto>img{ | + | .w_indexPhoto>img{ |
| − | + | width: 100%; | |
| − | } | + | } |
| − | #storyArrow{ | + | #storyArrow{ |
| − | + | cursor: pointer; | |
| − | + | top: 88%; | |
| − | + | position: fixed; | |
| − | + | width: 4%; | |
| − | + | left: 48%; | |
| − | + | opacity: 0.6; | |
| − | } | + | } |
| − | #abstract{ | + | #abstract{ |
| − | + | background-color: rgb(39,47,48); | |
| − | + | color: rgb(247,237,183); | |
| − | + | width: 100%; | |
| − | + | height:100%; | |
| − | + | text-align: center; | |
| − | } | + | } |
| − | #abstract>h1{ | + | #abstract>h1{ |
| − | + | font-size: 100px; | |
| − | + | color: rgb(247,237,183); | |
| − | + | margin: 0px; | |
| − | + | padding: 0px; | |
| − | + | font-weight: bold; | |
| − | } | + | line-height:normal; |
| + | } | ||
| − | #abstract>p{ | + | #abstract>p{ |
| − | + | position: relative; | |
| − | + | width: 80%; | |
| − | + | left: 10%; | |
| − | + | font-size: 22px; | |
| − | + | margin: 0px 0px 5.9% 0px; | |
| − | + | } | |
| − | } | + | |
| − | @media screen and (min-width:767px) { | + | @media screen and (min-width:767px) { |
| − | + | .w_indexPhoto{ | |
| − | + | position:absolute; | |
| − | + | top:70px; | |
| − | + | width: 100%; | |
| − | + | } | |
| − | } | + | } |
| − | @media screen and (max-width:1050px){ | + | @media screen and (max-width:1050px){ |
| − | + | .w_indexPhoto{ | |
| − | + | top:45px; | |
| − | + | } | |
| − | } | + | } |
| − | @media screen and (max-width:767px){ | + | @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){ | + | @media screen and (max-width:480px){ |
| − | + | #abstract>h1{ | |
| − | + | font-size: 60px; | |
| − | + | } | |
| − | + | #abstract>p{ | |
| − | + | font-size: 12px; | |
| − | + | } | |
| − | + | .w_indexPhoto{ | |
| − | + | margin-top: 15px; | |
| − | + | } | |
| − | } | + | } |
Revision as of 07:22, 6 October 2017
body{ margin:0px; overflow-y: scroll; } .w_a{ text-decoration:none; color: rgb(247,237,183); }
#w_nav{ margin: 0px; padding: 0px; top:15px; position:fixed; z-index: 500; }
#w_nav>img{ display:inline-block; margin: 0px; padding: 0px; width:100%; }
#w_nav>ul{ margin: 0px; padding: 0px; position: relative; text-align: center; }
#w_nav>ul>li{ margin:0px; padding: 0px; display:inline; }
#w_nav>ul>li>a{ text-align: center; margin: 0px; padding: 0px; display:inline-block; color: rgb(247,237,183); }
#w_nav>div{ position: relative; top:-42px; color:rgb(247,237,183); font-size: 16px; }
#w_nav>div>p{ cursor:pointer; }
#w_nav>div>ul{ position: relative; text-align: center; background-color: rgb(158,43,32); }
#w_nav>div>ul>li{ text-align: center; list-style: none; }
#w_nav>div>ul>li>a{ color:rgb(247,237,183); position: relative; left:-20px; }
p{ opacity: 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; }
#w_Panel>ul>li{ list-style: none; position:relative; left: -20px; font-size: 20px; font-weight: bold; margin-bottom: 15px; padding: 0px; }
#w_Panel>ul>li>ul>li>p:hover{ background-color: rgb(158,43,32); }
#w_Panel>ul>li>ul{ position: relative; left: -20px; margin-top: 10px; }
#w_Panel>ul>li>ul>li>p{ font-size: 15px; font-weight:lighter; color:rgb(247,237,183); cursor: pointer; margin: 0px; padding: 0px; }
#w_text{ position: relative; left: 17%; width: 83%; top:100px; margin-bottom: 30px; }
#w_text>p{ margin: 0px; position: relative; color:rgb(39,47,48); left: 15%; width: 70%; font-size: 14px; text-indent:14px; }
#w_text>h1{ color:rgb(39,47,48); font-size: 60px; position: relative; left: 14.4%; width: 70%; 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>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; }
#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; }
#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: 0px; padding: 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; } }
