Difference between revisions of "Team:SIAT-SCIE/Home"
| Line 3: | Line 3: | ||
<style> | <style> | ||
| − | + | body { /*About the freeze part in the whole, backgroun color*/ | |
| − | + | width: 1263px; | |
| − | + | margin-left: auto; | |
| − | + | margin-right: auto; | |
| − | + | background-color: #f9f9f9; | |
| − | + | } | |
| − | + | /*Logo picture as a whole, use to eliminate margin*/ | |
| − | + | #logo p { | |
| − | + | margin: 0px; | |
| − | + | } | |
| − | + | /*basically same with the top, but use div id=logo, let it float right, margin on right and top*/ | |
| − | + | #logo { | |
| − | + | float: right; | |
| − | + | margin-right: 10px; | |
| − | + | margin-top: 18px; | |
| − | + | background-color: #f9f9f9; | |
| − | + | } | |
| − | + | /*this is about div id=comic: take the top banner as a whole to eliminate the margin*/ | |
| − | + | #comic { | |
| − | + | margin: 0px; | |
| − | + | } | |
| − | + | /* Actually this make the navigation bar bigger and better*/ | |
| − | + | #nav { | |
| − | + | margin: 0 0 0 0; | |
| − | + | padding: 10px; | |
| − | + | } | |
| − | + | /*place the first line 'inline', and the interval to be 20px*/ | |
| − | + | #nav ul li { | |
| − | + | display: inline; | |
| − | + | margin: 0 10px 0 10px; | |
| − | + | } | |
| − | + | /*just to eliminate any margin */ | |
| − | + | #basic_discription { | |
| − | + | margin: 0 0 0 0; | |
| − | + | } | |
| − | + | /*also eliminate any margin*/ | |
| − | + | #basic_discription p { | |
| − | + | margin: 0px; | |
| − | + | } | |
| − | + | /*put footer in the center!*/ | |
| − | + | #footer { | |
| − | + | text-align: center; | |
| − | + | } | |
| − | + | #nav { | |
| − | + | background-color: #333; | |
| − | + | } | |
| − | + | #nav ul { | |
| − | + | list-style-type: none; | |
| − | + | margin: 0; | |
| − | + | padding: 0; | |
| − | + | overflow: hidden; | |
| − | + | background-color: #333; | |
| − | + | } | |
| − | + | #nav li { | |
| − | + | float: left; | |
| + | } | ||
| + | |||
| + | #nav li a, .dropbtn { | ||
| + | display: inline-block; | ||
| + | color: white; | ||
| + | text-align: center; | ||
| + | padding: 14px 16px; | ||
| + | text-decoration: none; | ||
} | } | ||
| − | #nav li a, .dropbtn { | + | #nav li a:hover, #nav .dropdownlist:hover .dropbtn { |
| − | + | background-color: red; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #nav li.dropdownlist { | |
| − | + | display: inline-block; | |
| − | + | } | |
| − | + | #nav .dropdown_content { | |
| − | + | display: none; | |
| − | + | position: absolute; | |
| + | background-color: #f9f9f9; | ||
| + | min-width: 160px; | ||
| + | box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); | ||
| + | z-index: 1; | ||
| + | } | ||
| − | #nav .dropdown_content { | + | #nav .dropdown_content a { |
| − | + | color: black; | |
| − | + | padding: 12px 16px; | |
| − | + | text-decoration: none; | |
| − | + | display: block; | |
| − | + | text-align: left; | |
| − | + | ||
} | } | ||
| − | #nav .dropdown_content a { | + | #nav .dropdown_content a:hover { |
| − | color: | + | background-color: #f1f1f1 |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | #nav .dropdownlist:hover .dropdown_content { | |
| − | + | display: block; | |
| − | + | } | |
| − | + | </style> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
<div class="const"> | <div class="const"> | ||
<div id="nav"> | <div id="nav"> | ||
<ul> | <ul> | ||
<li class="dropdownlist"> | <li class="dropdownlist"> | ||
| − | + | <a href="javascript:void(0)" class="dropbtn">Project</a> | |
| − | + | ||
| − | + | <div class="dropdown_content"> | |
| − | + | <a href="https://2017.igem.org/Team:SIAT-SCIE/Project_discription" alt="Project discription">Project discription</a> | |
| − | + | <a href="#" alt="Results">Results</a> | |
| − | + | <a href="#" alt="Proof">Proof</a> | |
| − | + | <a href="#" alt="Parts">Parts</a> | |
| − | + | </div> | |
| − | + | ||
</li> | </li> | ||
| − | <li | + | <li class="dropdownlist"> |
| − | + | ||
| − | + | <a href="javascript:void(0)" class="dropbtn">Notebook</a> | |
| − | + | <div class="dropdown_content"> | |
| − | + | <a href="#" alt="IGEM Diary">IGEM Diary</a> | |
| − | + | <a href="#" alt="Lab Book">Lab Book</a> | |
| − | + | <a href="#" alt="Safety">Safety</a> | |
| − | + | <a href="#" alt="Protocol">Protocol</a> | |
| − | + | </div> | |
| − | + | ||
</li> | </li> | ||
| − | + | <li><a href="#" title="Parts">Parts</a></li> | |
| − | + | <li><a href="#" title="Human practice">Human practice</a></li> | |
| − | + | <li><a href="#" title="Awards">Awards</a></li> | |
| − | + | <li><a href="https://2017.igem.org/Team:SIAT-SCIE/Team" title="Team">Team</a></li> | |
| − | + | </ul> | |
| + | </div> | ||
| + | </div> | ||
| + | <div id="comics"> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/0/05/Team-SIAT-SCIE.jpeg" alt="titlecomic" /> | ||
| + | <!--also not sure if the image should be the back ground or the seperate one--> | ||
| + | </div> | ||
| + | <div id="basic_discription"> | ||
| + | <p> | ||
| + | <img src="https://static.igem.org/mediawiki/2017/c/cd/SIAT-SCIE%EF%BC%9Aproject%E2%80%94%E2%80%94testing.jpg" alt="discription" /> | ||
| + | </p> | ||
| + | </div> | ||
| + | <div id="footer"> | ||
| + | <p>@2017 IGEM SIAT-SCIE All right reserved</p> | ||
| + | <p>Our Wechat Official Accounts: SIATxSCIE</p> | ||
</div> | </div> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</html> | </html> | ||
{{SIAT-SCIE}} | {{SIAT-SCIE}} | ||
Revision as of 14:16, 21 June 2017
