|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。
破洛洛文章简介：CSS3网页制造实例：页面效果。
CSS3网页制造实例：页面效果
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en">
<head>
<metahttp-equiv="content-type"content="text/html;charset=iso-8859-1"/>
<style>
/*YAHOO!RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
table{
border-collapse:collapse;
border-spacing:0;
}
fieldset,img{
border:0;
}
address,caption,cite,code,em,strong,dfn,th,var{
font-style:normal;
font-weight:normal;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:normal;
}
q:before,q:after{
content:;
}
abbr,acronym{
border:0;
}
/*----------ENDRESET----------*/
/*------------------------------------*
MAIN
*------------------------------------*/
html{
font-size:100%;
height:101%;
}
body{
font-size:62.5%;
font-family:Arial,Verdana,sans-serif;
background:#fff;
color:#333;
}
#wrapper{
width:940px;
margin:0auto;
padding:10px;
}
@font-face{
font-family:"GraublauWeb";
src:url(../fonts/GraublauWeb.eot);
src:local(GraublauWeb),local(GraublauWeb),
url(../fonts/GraublauWeb.otf)format(opentype);
}
@font-face{
font-family:"GraublauWebBold";
src:url(../fonts/GraublauWebBold.eot);
src:local(GraublauWebBold),local(GraublauWebBold),
url(../fonts/GraublauWebBold.otf)format(opentype);
}
/*------------------------------------*
TYPE
*------------------------------------*/
/*---HEADINGS---*/
h1,h2,h3,h4,h5,h6{
font-family:"GraublauWeb",Helvetica,Arial,Verdana,sans-serif;
line-height:1.4em;
margin-bottom:18px;
font-weight:bold;
text-shadow:1px1px1px#999;
}
h1{font-size:2.4em;}
h2{font-size:2.0em;}
h3{font-size:1.8em;}
h4{font-size:1.6em;}
.caption{
margin-bottom:5px;
font-style:italic;
line-height:1em;
clear:both;
}
/*---PARAGRAPHS---*/
p{
font-size:1.2em;
line-height:1.5em;
margin-bottom:18px;
}
p#intro{
font-size:1.6em;
line-height:1.5em;
margin-bottom:1.5em;
font-family:Georgia,"TimesNewRoman",Times,serif;
text-align:justify;
-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
column-count:3;
column-gap:20px;
}
/*---LINKS---*/
a{
color:#00f;
}
/*---MISC---*/
code{
font-family:"CourierNew","LucidaConsole",Courier,monospace;
font-size:1.3em;
}
pre{
font-family:"LucidaConsole","CourierNew",Courier,monospace;
padding:10px;
background:#ffc;
border:1pxsolid#ff8;
margin-bottom:18px;
clear:both;
}
prestrong{
font-weight:bold;
color:#000;
}
.comment{
color:#080;
}
/*------------------------------------*
TABLES
*------------------------------------*/
table{
font-size:1.2em;
width:100%;
margin-bottom:20px;
}
th{
font-weight:bold;
}
td,th{
border:1pxsolid#ccc;
padding:5px;
}
theadtr{
border-bottom:2pxsolid#ccc;
}
tbodytr:nth-of-type(odd){
background:#ffc;
}
/*---EMPLOYEES---*/
#employees.col{
width:25%;
}
#employeestbodytr:hover{
font-weight:bold;
background:#ff8;
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:005px#666;
-webkit-box-shadow:005px#666;
}
/*---MATRIX---*/
#employees.col{
width:20%;
}
#matrixtbodytd:hover{
font-weight:bold;
background:#ff8;
-moz-transform:scale(1.02);
-webkit-transform:scale(1.02);
-moz-box-shadow:005px#666;
-webkit-box-shadow:005px#666;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
/*------------------------------------*
NAV
*------------------------------------*/
#nav{
font-family:"GraublauWeb",Helvetica,Arial,Verdana,sans-serif;
width:220px;
float:left;
margin-bottom:18px;
}
#navlia{
color:#fff;
font-size:1.6em;
font-weight:bold;
padding:10px;
display:block;
text-decoration:none;
background:#34ad4a;
text-shadow:1px1px1px#1c5e28;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#47b649),to(#34ad4a));
-webkit-transition:-webkit-transform0.1sease-in;/*Tellswebkittomakeatransitionofatransform(definedbelow)*/
}
#navli:first-of-typea{
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
border-top-left-radius:10px;
border-top-right-radius:10px;
}
#navli:last-of-typea{
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
}
#navlia:hover{
background:#0079ac;
text-shadow:1px1px1px#0d4f6b;
background:-webkit-gradient(linear,lefttop,leftbottom,from(#0ba7be),to(#0079ac));
-moz-transform:scale(1.05);
-webkit-transform:scale(1.05);
-moz-box-shadow:005px#666;
-webkit-box-shadow:005px#666;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
/*------------------------------------*
POLAROID
*------------------------------------*/
.polaroid{
clear:both;
padding:10px10px50px10px;
background:#fff;
border:1pxsolid#ececec;/*Thisbordermergeswiththecolouroftheshadowinsupportingbrowsers,butinnon-supportingbrowserstheborderactsastheedgeoftheimage*/
margin-bottom:18px;
-moz-box-shadow:1px2px5px#666666;
-webkit-box-shadow:1px2px5px#666666;
}
.small-polaroid{
clear:none;
padding:10px10px25px10px;
-moz-transform:rotate(-4deg);
-webkit-transform:rotate(-4deg);
-webkit-transition:-webkit-transform0.1sease-in;/*Tellswebkittomakeatransitionofatransform(definedbelow)*/
}
.small-polaroid:hover{
z-index:100;
position:relative;/*Makethez-indexworkinSafari*/
-moz-transform:rotate(4deg)scale(1.2);
-webkit-transform:rotate(4deg)scale(1.2);
}
/*------------------------------------*
MISC
*------------------------------------*/
hr{display:none;}
.hr{height:1px;border-top:1pxsolid#ccc;margin-bottom:18px;}
.clear{clear:both;}
/*------------------------------------*
IPHONE
*------------------------------------*/
@mediascreenand(max-device-width:480px){
#wrapper{width:90%;}
pre{overflow:hidden;}
pre.comment{white-space:normal;}
}
</style>
</head>
<bodyid="home">
<divid="wrapper">
<h1>CSSWizardry—CSS3Examples&ProgressiveEnhancement</h1>
<p>AllCSSshowncorrespondstotheelementsdirectlyabove.TheID/classnamesarethesameasusedandallCSS3/progressiveenhancementsnippetsareshowninbold.<br/>By<ahref="http://csswizardry.com/"title="WebStandardsDesignandDevelopment">HarryRoberts—CSSWizardry</a>.<ahref="http://twitter.com/?status=CSS3andProgressiveEnhancementby@csswizardryhttp://csswizardry.com/css3/"title="Tweetalinktothispage">PleaseTweet</a>.</p>
<h2class="caption">Columns:</h2>
<pid="intro">Loremipsumdolorsitamet,consectetueradipiscingelit.Inaccumsandiamvitaevelit.Aliquamvehicula,turpissedegestasporttitor,estligulaegestasleo,atinterdumleoanteutrisus.Crasutnunc.Phasellusimperdiet,urnainvolutpatvenenatis,maurispedeeuismodpede,malesuadaeuismodturpisenimatarcu.Sedplacerataccumsanmi.Classaptenttacitisociosquadlitoratorquentperconubianostra,perinceptoshimenaeos.Aliquamsuscipit,quamatplaceratinterdum,quamturpisplaceratpede,egetsagittisarcusapienvelmauris.Nullafaucibusturpisegettellus.Integermattisdapibuslorem.Donecpretiumloremvelligula.Fuscesemperconsequatdui.Integeracmi.Crasfaucibusnullaquisipsum.Nuncaugueturpis,tristiqueet,hendreritid,hendreriteu,lacus.Cumsociisnatoquepenatibusetmagnisdisparturientmontes,nasceturridiculusmus.Curabiturvulputate.Proineteratidipsumaccumsanporttitor.Suspendissetellusarcu,scelerisquevel,feugiatsitamet,aliquetsed,velit.Aeneanegeteratidmassasodales.</p>
<pre><code>p#intro{
font-size:1.6em;
line-height:1.5em;
margin-bottom:1.5em;
font-family:Georgia,"TimesNewRoman",Times,serif;
text-align:justify;
<strong>-moz-column-count:3;
-moz-column-gap:20px;
-webkit-column-count:3;
-webkit-column-gap:20px;
column-count:3;
column-gap:20px;</strong>
}</code></pre>
<scripttype="text/javascript"><!--
google_ad_client="pub-0849827290095392";
/*728x90,创立于09-3-19*/
google_ad_slot="6829013231";
google_ad_width=728;
google_ad_height=90;
//-->
</script>
<scripttype="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<divclass="hr"><hr/></div>
<h2class="caption">Transforms:</h2>
<h3class="captionclear">Hoverrows/cellslistitems…</h3>
<tableid="employees">
<colgroup>
<colid="employee-name"class="col"/>
<colid="employee-type"class="col"/>
<colid="employee-edit"class="col"/>
<colid="employee-remove"class="col"/>
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Edit</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td>TedHarris</td>
<td>Admin</td>
<td><ahref="#">Editdetails…</a></td>
<td><ahref="#">Deleteuser…</a></td>
</tr>
<tr>
<td>JanePeters</td>
<td>Sales</td>
<td><ahref="#">Editdetails…</a></td>
<td><ahref="#">Deleteuser…</a></td>
</tr>
<tr>
<td>SamEdwards</td>
<td>WebDeveloper</td>
<td><ahref="#">Editdetails…</a></td>
<td><ahref="#">Deleteuser…</a></td>
</tr>
<tr>
<td>AllenJones</td>
<td>WebDeveloper</td>
<td><ahref="#">Editdetails…</a></td>
<td><ahref="#">Deleteuser…</a></td>
</tr>
</tbody>
</table>
<tableid="matrix">
<colgroup>
<colid="matrix-title"class="col"/>
<colid="matrix-ted"class="col"/>
<colid="matrix-jane"class="col"/>
<colid="matrix-sam"class="col"/>
<colid="matrix-allen"class="col"/>
</colgroup>
<thead>
<tr>
<th></th>
<th>Ted</th>
<th>Jane</th>
<th>Sam</th>
<th>Allen</th>
</tr>
</thead>
<tbody>
<tr>
<th>Age</th>
<td>45</td>
<td>31</td>
<td>34</td>
<td>27</td>
</tr>
<tr>
<th>Salary</th>
<td> |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-15 22:58:36
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-2-11 06:57:02