"
Team:SYSU-Software/tutorial.css
From 2013.igem.org
| (6 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| - | + | *{ | |
| - | + | padding:0px; | |
| - | + | margin: 0px; | |
| - | + | } | |
| - | + | body { | |
| - | + | height: 100%; | |
| - | + | width: 100%; | |
| - | + | background-color: #CCC; | |
| - | + | font-family: 'Arial'; | |
| - | + | } | |
| Line 14: | Line 14: | ||
/*the tutorial content*/ | /*the tutorial content*/ | ||
#tutorial-container{ | #tutorial-container{ | ||
| - | + | width: 100%; | |
| - | + | margin: 0 auto; | |
| - | + | height: 100%; | |
| - | + | background-color: white; | |
} | } | ||
.subnav{ | .subnav{ | ||
| - | + | float: right; | |
| - | + | padding-right: 4px; | |
| - | + | padding-top: 15px; | |
| - | + | font-size: 15px; | |
} | } | ||
.subnav a{ | .subnav a{ | ||
| - | + | color: #445d72; | |
} | } | ||
#tutorial-header{ | #tutorial-header{ | ||
| - | + | width:100%; | |
| - | + | background-color: #dff5f2; | |
| - | + | padding-top: 30px; | |
| - | + | padding-bottom: 30px; | |
| - | + | font-size: 39px; | |
| - | + | color: #445d72; | |
| - | + | font-weight: 900; | |
| - | + | text-align: center; | |
| + | } | ||
| + | |||
| + | #tutorial-header .header-title { | ||
| + | width: 980px; | ||
| + | margin: 0 auto; | ||
| + | position: relative; | ||
| + | } | ||
| + | #tutorial-header .btn-inverse { | ||
| + | position: absolute; | ||
| + | right: 0; | ||
} | } | ||
#tutorial-list{ | #tutorial-list{ | ||
| - | + | position: fixed; | |
| - | + | left: 30px; | |
| - | + | top: 180px; | |
| - | + | width: 150px; | |
| - | + | height: 220px; | |
| - | + | border-radius: 10px; | |
| - | + | background-color: white; | |
| - | + | border-color: #445d72; | |
| - | + | border: 3px solid #445d72; | |
} | } | ||
#list-header{ | #list-header{ | ||
| - | + | font-size: 23px; | |
| - | + | color: #63605e; | |
| - | + | font-weight: bolder; | |
| - | + | ||
| - | + | margin-left: 18px; | |
| - | + | padding-bottom: 10px; | |
} | } | ||
#tutorial-list ul{ | #tutorial-list ul{ | ||
| - | + | position: relative; | |
| - | + | list-style: none; | |
} | } | ||
.mainnav li a{ | .mainnav li a{ | ||
| - | + | font-size: 18px; | |
| - | + | color: #63605e; | |
} | } | ||
/*part content*/ | /*part content*/ | ||
#part-header{ | #part-header{ | ||
| - | + | padding-top: 28px; | |
| - | + | font-size: 23px; | |
| - | + | font-weight: bold; | |
| - | + | color: #445d72; | |
} | } | ||
#part-content{ | #part-content{ | ||
| - | + | width: 878px; | |
| - | + | height:450px; | |
| - | + | padding-top: 10px; | |
} | } | ||
#part-text{ | #part-text{ | ||
| - | + | text-align: justify; | |
| - | + | padding-top: 40px; | |
| - | + | padding-bottom: 70px; | |
| - | + | width: 870px; | |
| - | + | margin: 0 auto; | |
| - | + | font-size: 18px; | |
| - | + | font-weight: 200; | |
| - | + | color: #63605e; | |
} | } | ||
#part1{ | #part1{ | ||
| - | + | width: 880px; | |
| - | + | height: 100%; | |
| - | + | margin: 0 auto; | |
} | } | ||
#part2-part{ | #part2-part{ | ||
| - | + | width: 100%; | |
| - | + | background-color: #dff5f2; | |
} | } | ||
#part2{ | #part2{ | ||
| - | + | width: 880px; | |
| - | + | height: 100%; | |
| - | + | margin: 0 auto; | |
} | } | ||
#part3{ | #part3{ | ||
| - | + | width: 880px; | |
| - | + | height: 100%; | |
| - | + | margin: 0 auto; | |
} | } | ||
#part4{ | #part4{ | ||
| - | + | width: 880px; | |
| - | + | height: 100%; | |
| - | + | margin: 0 auto; | |
} | } | ||
#part4-part{ | #part4-part{ | ||
| - | + | width: 100%; | |
| - | + | background-color: #dff5f2; | |
} | } | ||
/*footer*/ | /*footer*/ | ||
| - | + | #sysu-footer{ | |
| - | + | width: 100%; | |
| - | + | margin:0 auto; | |
| - | + | position: relative; | |
| - | + | bottom: 0px; | |
| - | + | overflow: hidden; | |
| - | + | background-color: white; | |
| - | + | } | |
| - | + | #bottom-image{ | |
| - | + | width: 100%; | |
| - | + | } | |
Latest revision as of 12:03, 28 October 2013
- {
padding:0px; margin: 0px; } body { height: 100%; width: 100%; background-color: #CCC; font-family: 'Arial'; }
/*the tutorial content*/
- tutorial-container{
width: 100%; margin: 0 auto; height: 100%;
background-color: white; }
.subnav{ float: right;
padding-right: 4px; padding-top: 15px; font-size: 15px; } .subnav a{ color: #445d72; }
- tutorial-header{
width:100%; background-color: #dff5f2; padding-top: 30px; padding-bottom: 30px; font-size: 39px; color: #445d72; font-weight: 900;
text-align: center; }
- tutorial-header .header-title {
width: 980px; margin: 0 auto; position: relative; }
- tutorial-header .btn-inverse {
position: absolute; right: 0; }
- tutorial-list{
position: fixed; left: 30px; top: 180px;
width: 150px; height: 220px; border-radius: 10px; background-color: white; border-color: #445d72; border: 3px solid #445d72; }
- list-header{
font-size: 23px; color: #63605e; font-weight: bolder;
margin-left: 18px; padding-bottom: 10px; }
- tutorial-list ul{
position: relative; list-style: none; } .mainnav li a{ font-size: 18px; color: #63605e; } /*part content*/
- part-header{
padding-top: 28px; font-size: 23px; font-weight: bold; color: #445d72; }
- part-content{
width: 878px; height:450px;
padding-top: 10px; }
- part-text{
text-align: justify; padding-top: 40px; padding-bottom: 70px;
width: 870px; margin: 0 auto;
font-size: 18px; font-weight: 200; color: #63605e; }
- part1{
width: 880px; height: 100%;
margin: 0 auto; }
- part2-part{
width: 100%; background-color: #dff5f2; }
- part2{
width: 880px; height: 100%;
margin: 0 auto; }
- part3{
width: 880px; height: 100%;
margin: 0 auto; }
- part4{
width: 880px; height: 100%;
margin: 0 auto; }
- part4-part{
width: 100%; background-color: #dff5f2; } /*footer*/
- sysu-footer{
width: 100%; margin:0 auto;
position: relative; bottom: 0px; overflow: hidden;
background-color: white; }
- bottom-image{
width: 100%; }
