Template:Team:Tsinghua/CSS/Common-Style
From 2014.igem.org
(Difference between revisions)
(Created page with "<html> <style type="text/css"> - →****************************************** BODY ******************************************: body { font-family: Verdana, Arial, Helvetica, s...") |
|||
(12 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
/******************************************* | /******************************************* | ||
Line 13: | Line 12: | ||
padding: 0; | padding: 0; | ||
color: #333; | color: #333; | ||
+ | font-size: 14px; | ||
} | } | ||
/* ~~ Element/tag selectors ~~ */ | /* ~~ Element/tag selectors ~~ */ | ||
ul, ol, dl { | ul, ol, dl { | ||
- | + | font-size: 14px; | |
- | margin: | + | text-align: justify; |
+ | margin-left: 30px; | ||
} | } | ||
- | + | ||
h1, h2, h3 { | h1, h2, h3 { | ||
font-weight: bold; | font-weight: bold; | ||
Line 30: | Line 31: | ||
p{ | p{ | ||
padding: 0 20px 0; | padding: 0 20px 0; | ||
- | text-align: | + | text-align: left; |
font-size: 14px; | font-size: 14px; | ||
} | } | ||
Line 42: | Line 43: | ||
font-size: 20px; | font-size: 20px; | ||
font-weight: bold; | font-weight: bold; | ||
- | |||
- | |||
} | } | ||
Line 52: | Line 51: | ||
img.center { | img.center { | ||
- | display:block; | + | display: block; |
margin-left: auto; | margin-left: auto; | ||
margin-right: auto; | margin-right: auto; | ||
+ | } | ||
+ | p > img { | ||
+ | vertical-align:middle; | ||
+ | } | ||
+ | p.center { | ||
+ | text-align:center; | ||
+ | } | ||
+ | span.center > p { | ||
+ | text-align:center; | ||
+ | } | ||
+ | div.indent { | ||
+ | margin-left: 30px; | ||
} | } | ||
Line 63: | Line 74: | ||
a:link { | a:link { | ||
color: #42413C; | color: #42413C; | ||
- | text-decoration: | + | text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */ |
} | } | ||
a:visited { | a:visited { | ||
Line 80: | Line 91: | ||
/* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */ | /* ~~ The header is not given a width. It will extend the full width of your layout. ~~ */ | ||
header { | header { | ||
- | background-color: | + | background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0.10, rgb(158,182,223)), color-stop(0.90, rgb(61,96,154))); |
+ | padding-bottom: 8px; /* Standard syntax (must be last) */ | ||
+ | ; | ||
+ | } | ||
+ | header img { | ||
+ | display: block; | ||
} | } | ||
- | |||
.sidebar1 { | .sidebar1 { | ||
float: left; | float: left; | ||
width: 176px; | width: 176px; | ||
background-color: #959595; | background-color: #959595; | ||
- | + | border-right: 2px solid #ffffff; | |
- | + | } | |
- | + | .sidebar1 aside { | |
+ | float: left; | ||
+ | width: 176px; | ||
+ | background-color: #c6c6c6; | ||
+ | margin-bottom: 200px #c6c6c6; | ||
} | } | ||
.content { | .content { | ||
Line 95: | Line 114: | ||
width: 780px; | width: 780px; | ||
float: left; | float: left; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 116: | Line 129: | ||
clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ | clear: both; /* this clear property forces the .container to understand where the columns end and contain them */ | ||
} | } | ||
+ | footer #logoContainer { | ||
+ | display: block; | ||
+ | margin: 0 auto 0 auto; | ||
+ | text-align: center; | ||
+ | width: 975px; | ||
+ | } | ||
+ | footer#logoContainer img{ | ||
+ | float: left; | ||
+ | padding-right: 30px; | ||
+ | } | ||
+ | |||
/* ~~ Miscellaneous float/clear classes ~~ */ | /* ~~ Miscellaneous float/clear classes ~~ */ | ||
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ | .fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */ | ||
Line 136: | Line 160: | ||
display: block; | display: block; | ||
} | } | ||
- | + | /* Preload images */ | |
+ | div#preload { display: none; } | ||
</style> | </style> | ||
<html> | <html> |
Latest revision as of 17:54, 16 October 2014