Team:SYSU-Software/tutorial.css
From 2013.igem.org
(Difference between revisions)
Line 9: | Line 9: | ||
font-family: 'Arial'; | font-family: 'Arial'; | ||
} | } | ||
+ | |||
+ | |||
/*the tutorial content*/ | /*the tutorial content*/ | ||
#tutorial-container{ | #tutorial-container{ | ||
- | width: | + | width: 100%; |
margin: 0 auto; | margin: 0 auto; | ||
height: 100%; | height: 100%; | ||
- | background-color: | + | background-color: white; |
} | } | ||
Line 27: | Line 29: | ||
} | } | ||
.subnav a{ | .subnav a{ | ||
- | color: | + | color: #445d72; |
} | } | ||
#tutorial-header{ | #tutorial-header{ | ||
+ | width:100%; | ||
+ | background-color: #dff5f2; | ||
padding-top: 30px; | padding-top: 30px; | ||
padding-bottom: 30px; | padding-bottom: 30px; | ||
font-size: 39px; | font-size: 39px; | ||
- | color: | + | color: #445d72; |
font-weight: 900; | font-weight: 900; | ||
Line 41: | Line 45: | ||
#tutorial-list{ | #tutorial-list{ | ||
- | position: | + | position: fixed; |
- | left: | + | left: 60px; |
+ | top: 150px; | ||
- | + | width: 140px; | |
+ | height: 200px; | ||
+ | border-radius: 20px; | ||
+ | background-color: white; | ||
+ | border-color: #dff5f1; | ||
+ | border: 3px solid #dff5f1; | ||
} | } | ||
#list-header{ | #list-header{ | ||
font-size: 23px; | font-size: 23px; | ||
- | color: | + | color: #aeb3ba; |
- | + | font-weight: bolder; | |
+ | |||
+ | margin-left: 18px; | ||
padding-bottom: 10px; | padding-bottom: 10px; | ||
} | } | ||
#tutorial-list ul{ | #tutorial-list ul{ | ||
position: relative; | position: relative; | ||
- | |||
list-style: none; | list-style: none; | ||
- | |||
- | |||
} | } | ||
.mainnav li a{ | .mainnav li a{ | ||
- | font-size: | + | font-size: 18px; |
- | color: | + | color: #aeb3ba; |
} | } | ||
+ | /*part content*/ | ||
#part-header{ | #part-header{ | ||
+ | padding-top: 28px; | ||
font-size: 23px; | font-size: 23px; | ||
- | + | font-weight: bold; | |
- | + | color: #445d72; | |
- | + | ||
} | } | ||
#part-content{ | #part-content{ | ||
Line 73: | Line 83: | ||
height: 690px; | height: 690px; | ||
- | padding-top: | + | padding-top: 10px; |
} | } | ||
+ | |||
#part-text{ | #part-text{ | ||
+ | text-align: justify; | ||
padding-top: 40px; | padding-top: 40px; | ||
- | padding-bottom: | + | padding-bottom: 70px; |
- | width: | + | width: 870px; |
margin: 0 auto; | margin: 0 auto; | ||
+ | |||
font-size: 18px; | font-size: 18px; | ||
- | color: | + | font-weight: 200; |
+ | color: #9d9c9b; | ||
} | } | ||
#part1{ | #part1{ | ||
Line 89: | Line 103: | ||
margin: 0 auto; | margin: 0 auto; | ||
+ | } | ||
+ | #part2-part{ | ||
+ | width: 100%; | ||
+ | background-color: #dff5f2; | ||
} | } | ||
#part2{ | #part2{ | ||
Line 108: | Line 126: | ||
margin: 0 auto; | margin: 0 auto; | ||
} | } | ||
- | # | + | #part4-part{ |
- | width: | + | 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%; | ||
+ | } |
Revision as of 17:48, 26 September 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-list{
position: fixed; left: 60px; top: 150px;
width: 140px; height: 200px; border-radius: 20px; background-color: white; border-color: #dff5f1; border: 3px solid #dff5f1;
}
- list-header{
font-size: 23px; color: #aeb3ba; font-weight: bolder; margin-left: 18px; padding-bottom: 10px;
}
- tutorial-list ul{
position: relative; list-style: none;
} .mainnav li a{
font-size: 18px; color: #aeb3ba;
} /*part content*/
- part-header{
padding-top: 28px; font-size: 23px; font-weight: bold; color: #445d72;
}
- part-content{
width: 878px; height: 690px;
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: #9d9c9b;
}
- 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%; }