CSS. , .
.wrapper {
width:960px;
margin:auto;
}
div css
, .
.container {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
CSS
, . CSS .
#footer {
position:fixed;
left:0px;
bottom:0px;
height:32px;
width:100%;
background:#333;
}
/* IE 6 */
* html #footer {
position:absolute;
top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight? document.documentElement.clientHeight: document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop? document.documentElement.scrollTop: document.body.scrollTop))+'px');
}
CSS
, . css, js.
img {
background: url(loader.gif) no−repeat 50% 50%;
}
h1 CSS
, h1, h2 . SEO .
h1 {
text-indent:-9999px;
margin:0 auto;
width:400px;
height:100px;
background:transparent url("images/logo.jpg") no-repeat scroll;
}
CSS
( ). CSS.
p:first-letter{
display:block;
margin:5px 0 0 5px;
float:left;
color:#000;
font-size:60px;
font-family:Georgia;
}
CSS
, , .
.transparent {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
Example:
<div class="box transparent">Your content</div>
+ mp3, pdf, email
. CSS , , , mailto: .
/* external links
The ^= specifies that we want to match links that begin with the http://
*/
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails
The ^= specifies that we want to match links that begin with the mailto:
*/
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
|
|
|
*/
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the:after
*/
a[href$=".zip"]:after{
content: url(icons/zip.png);
}
() CSS
, CSS. , , .
#resize-image {
/* Just imagine that the image_1.png is 200x400px */
background:url(image_1.png) top left no-repeat;
-moz-background-size: 100px 200px;
-o-background-size: 100px 200px;
-webkit-background-size: 100px 200px;
}
CSS
, . , . .
#columns-3 {
text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;
}
