带来一篇CSS教程:CSS把持网页笔墨排版实例
结构清晰，容易被搜索引擎搜索到，天生优化了seo破洛洛文章简介：有关CSS基础的排版把持固然已有具体的利用申明和参考教程，但另有很多丰厚的CSS排版才能，是很少能查到的。明天的这些实例，为您供应了良多设想和拓展的空间。
CSS功效的壮大在webjx.com中早已展示良多，而有关CSS基础的排版把持固然已有具体的利用申明和参考教程，但另有很多丰厚的CSS排版才能，是很少能查到的。明天的这些实例，为您供应了良多设想和拓展的空间。
h3.reflect_1{color:#333333;border-bottom:6pxsolid#DDDDDD;line-height:.2em;margin:0;padding:00010px;font-size:150%;}
h3.reflect_2{color:#CECECE;margin:0;line-height:.6em;border-top:1pxsolid#EEEEEE;padding:00010px;font-size:150%;}
h3.line_drop{font-family:"TrebuchetMS",Garamond,Georgia;line-height:.88em;border-bottom:#9900001pxsolid;color:#990000;
letter-spacing:-2px;}
h3.elegant{letter-spacing:-2px;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;font-size:200%;text-shadow:#6666660.2em0.2em;}
h3.handwriting{font-style:italic;font-weight:bold;font-family:"ComicSansMS";letter-spacing:-1px;font-size:100%;word-spacing:.25em;}
h3.handwriting2{font-style:italic;font-weight:100;font-family:"TrebuchetMS",Garamond,Georgia;letter-spacing:-1px;font-size:100%;word-spacing:.25em;}
h3.handwriting3{font-style:italic;font-weight:100;font-family:"ComicSansMS";letter-spacing:1px;font-size:100%;word-spacing:.25em;}
h3.hide{font-size:150%;font-weight:100;line-height:.4em;border-bottom:7pxsolid#FFFF66;}
h3.capital{font-size:375%;text-transform:uppercase;letter-spacing:-8px;}
h3.capitalspan{font-size:70%;text-transform:lowercase;letter-spacing:-1px;}
p.letters{line-height:.64em;letter-spacing:-2px;font-family:"CourierNew",Courier,monospace;font-size:25px;font-weight:100;text-transform:uppercase;}
p.letters2{line-height:.72em;letter-spacing:-2px;font-family:"TimesNewRoman",Times,serif;font-size:25px;font-weight:100;text-transform:uppercase;}
p.letters3{line-height:.77em;letter-spacing:-2px;font-family:Georgia,"TimesNewRoman",Times,serif;font-size:25px;font-weight:100;text-transform:uppercase;}
h3.newspaper{letter-spacing:.10em;font-size:36px;text-transform:uppercase;font-weight:100;border-bottom:groove2px#CCCCCC;width:auto;line-height:1em;}
h3.newspaperspan{font-family:Georgia,"TimesNewRoman",Times,serif;}
h3.newspaper2{letter-spacing:.10em;font-size:36px;font-weight:100;border-bottom:groove2px#CCCCCC;width:auto;line-height:1em;font-variant:small-caps;}
h3.funky{font-family:"TrebuchetMS",Garamond,Georgia;font-size:36px;letter-spacing:20px;line-height:.65em;color:#666666;font-weight:100;}
h3.funkyspan{letter-spacing:5px;}
h3.el{font-family:Verdana,Arial,Helvetica,sans-serif;color:#BBBBBB;border-bottom:#CCCCCC1pxsolid;letter-spacing:1em;font-weight:100;line-height:.8em;font-size:9px;}
h3.num_blend{font-size:36px;font-weight:100;}
h3.num_blendspan{font-size:24px;line-height:1em;font-style:italic;font-weight:bold;letter-spacing:2px;}
h3.scaps{font-variant:small-caps;letter-spacing:-1px;font-size:200%;font-family:"CourierNew",Courier,monospace;font-weight:100;}
h3.gr{font-size:500%;margin:0;float:left;color:#999999;font-family:Impact,Arial,Verdana;text-transform:uppercase;border-bottom:#CC000010pxsolid;font-weight:100;}
h3.gr2{font-size:500%;margin:25px0;color:#999999;float:left;font-family:Impact,Arial,Verdana;text-transform:uppercase;position:relative;font-weight:100;}
h3.g{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#133BC1;}
h3.o1{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#E33B21;}
h3.o2{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#E6B500;}
h3.l{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#4BCE54;}
h3.lg{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#0048E3;}
h3.e{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#E33B21;font-style:italic;}
.gray{background:#000000;padding:20px;}
h3.gray2{font-size:200%;text-transform:uppercase;font-family:Garamond,Georgia,"TimesNewRoman";
letter-spacing:.5em;font-weight:100;color:#FFFFFF;border-top:1pxsolid#CCCCCC;border-bottom:#CCCCCC1pxsolid;width:600px;text-align:center;}
h3.fed{color:#660099;letter-spacing:-.08em;font-size:500%;font-family:Verdana,Arial,Helvetica,sans-serif;}
h3.fedspan{color:#999999;margin:000-.1em;font-size:105%;}
h3.y1{float:left;font-size:500%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:0;
font-weight:0;color:#FF0000;}
h3.y2{float:left;font-size:350%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:15px00-10px;font-weight:0;color:#FF0000;}
h3.y3{float:left;font-size:350%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:8px00px-5px;font-weight:0;color:#FF0000;}
h3.y4{float:left;font-size:300%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:12px00px-5px;font-weight:0;color:#FF0000;}
h3.y5{float:left;font-size:350%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:6px00px-1px;font-weight:0;color:#FF0000;}
h3.y6{float:left;font-size:350%;font-family:Verdana,Arial,Helvetica,sans-serif;margin:4px00px-1px;font-weight:0;color:#FF0000;}
p.taga{font-size:85%;text-align:center;color:#FF3300;}
p.taga:hover{background:#FFFF66;}
运转代码框
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=iso-8859-1"/><title>CSSTypography-ExamplesforCSSandWebTypography-www.webjx.com</title><styletype="text/css">html,body{width:75%;}h3.reflect_1{color:#333333;border-bottom:6pxsolid#DDDDDD;line-height:.2em;margin:0;padding:00010px;font-size:150%;}h3.reflect_2{color:#CECECE;margin:0;line-height:.6em;border-top:1pxsolid#EEEEEE;padding:00010px;font-size:150%;}h3.line_drop{font-family:"TrebuchetMS",Garamond,Georgia;line-height:.88em;border-bottom:#9900001pxsolid;color:#990000;letter-spacing:-2px;}h3.elegant{letter-spacing:-2px;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;font-size:200%;text-shadow:#6666660.2em0.2em;}h3.handwriting{font-style:italic;font-weight:bold;font-family:"ComicSansMS";letter-spacing:-1px;font-size:100%;word-spacing:.25em;}h3.handwriting2{font-style:italic;font-weight:100;font-family:"TrebuchetMS",Garamond,Georgia;letter-spacing:-1px;font-size:100%;word-spacing:.25em;}h3.handwriting3{font-style:italic;font-weight:100;font-family:"ComicSansMS";letter-spacing:1px;font-size:100%;word-spacing:.25em;}h3.hide{font-size:150%;font-weight:100;line-height:.4em;border-bottom:7pxsolid#FFFF66;}h3.capital{font-size:375%;text-transform:uppercase;letter-spacing:-8px;}h3.capitalspan{font-size:70%;text-transform:lowercase;letter-spacing:-1px;}p.letters{line-height:.64em;letter-spacing:-2px;font-family:"CourierNew",Courier,monospace;font-size:25px;font-weight:100;text-transform:uppercase;}p.letters2{line-height:.72em;letter-spacing:-2px;font-family:"TimesNewRoman",Times,serif;font-size:25px;font-weight:100;text-transform:uppercase;}p.letters3{line-height:.77em;letter-spacing:-2px;font-family:Georgia,"TimesNewRoman",Times,serif;font-size:25px;font-weight:100;text-transform:uppercase;}h3.newspaper{letter-spacing:.10em;font-size:36px;text-transform:uppercase;font-weight:100;border-bottom:groove2px#CCCCCC;width:auto;line-height:1em;}h3.newspaperspan{font-family:Georgia,"TimesNewRoman",Times,serif;}h3.newspaper2{letter-spacing:.10em;font-size:36px;font-weight:100;border-bottom:groove2px#CCCCCC;width:auto;line-height:1em;font-variant:small-caps;}h3.funky{font-family:"TrebuchetMS",Garamond,Georgia;font-size:36px;letter-spacing:20px;line-height:.65em;color:#666666;font-weight:100;}h3.funkyspan{letter-spacing:5px;}h3.el{font-family:Verdana,Arial,Helvetica,sans-serif;color:#BBBBBB;border-bottom:#CCCCCC1pxsolid;letter-spacing:1em;font-weight:100;line-height:.8em;font-size:9px;}h3.num_blend{font-size:36px;font-weight:100;}h3.num_blendspan{font-size:24px;line-height:1em;font-style:italic;font-weight:bold;letter-spacing:2px;}h3.scaps{font-variant:small-caps;letter-spacing:-1px;font-size:200%;font-family:"CourierNew",Courier,monospace;font-weight:100;}h3.gr{font-size:500%;margin:0;float:left;color:#999999;font-family:Impact,Arial,Verdana;text-transform:uppercase;border-bottom:#CC000010pxsolid;font-weight:100;}h3.gr2{font-size:500%;margin:25px0;color:#999999;float:left;font-family:Impact,Arial,Verdana;text-transform:uppercase;position:relative;font-weight:100;}h3.g{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#133BC1;}h3.o1{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#E33B21;}h3.o2{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#E6B500;}h3.l{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#4BCE54;}h3.lg{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#0048E3;}h3.e{font-size:500%;font-family:Georgia,"TimesNewRoman",Times,serif;font-weight:100;float:left;margin:0;color:#E33B21;font-style:italic;}.gray{background:#000000;padding:20px;}h3.gray2{font-size:200%;text-transform:uppercase;font-family:Garamond,Georgia,"TimesNewRoman";letter-spacing:.5em;font-weight:100;color:#FFFFFF;border-top:1pxsolid#CCCCCC;border-bottom:#CCCCCC1pxsolid;width:600px;text-align:center;}h3.fed{color:#660099;letter-spacing:-.08em;font-size:500%;font-family:Verdana,Arial,Helvetica,sans-serif;}h3.fedspan{color:#999999;margin:000-.1em;font-size:105%;}h3.y1{float:left;font-size:500%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:0;font-weight:0;color:#FF0000;}h3.y2{float:left;font-size:350%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:15px00-10px;font-weight:0;color:#FF0000;}h3.y3{float:left;font-size:350%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:8px00px-5px;font-weight:0;color:#FF0000;}h3.y4{float:left;font-size:300%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:12px00px-5px;font-weight:0;color:#FF0000;}h3.y5{float:left;font-size:350%;font-family:Garamond,Georgia,"TimesNewRoman";text-transform:uppercase;margin:6px00px-1px;font-weight:0;color:#FF0000;}h3.y6{float:left;font-size:350%;font-family:Verdana,Arial,Helvetica,sans-serif;margin:4px00px-1px;font-weight:0;color:#FF0000;}p.taga{font-size:85%;text-align:center;color:#FF3300;}p.taga:hover{background:#FFFF66;}</style></head><body><br/><h3class="reflect_1">KINDEKINC</h3><h3class="reflect_2">KINDEKINC</h3><h3class="line_drop">WebDesignRockstarz</h3><h3class="elegant">ThechappleDeLaRossJohnson</h3><h3class="handwriting">Dontforgettoturnoffthelightswhenyouleave!</h3><h3class="handwriting2">Dontforgettoturnoffthelightswhenyouleave!</h3><h3class="handwriting3">Dontforgettoturnoffthelightswhenyouleave!</h3><h3class="capital">C<span>aptivating,</span>C<span>reative</span></h3><h3class="capital">L<span>ogans</span>L<span>itigation</span></h3><h3class="capital">Z<span>efer</span>Z<span>oo</span></h3><h3class="capital">B<span>est</span>B<span>uilding</span></h3><pclass="letters">PotentialuseformagazinestyletypographyCloselineheightandletterspacing,almostconnectedlines...</p><pclass="letters2">PotentialuseformagazinestyletypographyCloselineheightandletterspacing,almostconnectedlines...</p><pclass="letters3">PotentialuseformagazinestyletypographyCloselineheightandletterspacing,almostconnectedlines...</p><h3class="newspaper"><span>Webdesign</span>Times</h3><h3class="newspaper2">WebdesignTimes</h3><h3class="funky">Fun<strong><em>k</em></strong>y<br/><span>We<em>b<strong>d</strong></em>esign!</span></h3><h3class="el">SATURDAYMARCH19TH2046</h3><h3class="num_blend">Rock<span>5</span>tarandaDe<span>51</span>gner</h3><h3class="scaps">MoreTyperighterStyle,lesscluttered.</h3><h3class="gr">Grays</h3><h3class="gr2">Anatomy</h3><brstyle="clear:both;"/><h3class="g">G</h3><h3class="o1">o</h3><h3class="o2">o</h3><h3class="lg">g</h3><h3class="l">l</h3><h3class="e">e</h3><brstyle="clear:both;"/><divclass="gray"><h3class="gray2">GraysAnatomy</h3></div><brstyle="clear:both;"/><h3class="fed">Fed<span>Ex</span></h3><h3class="y1">Y</h3><h3class="y2">A</h3><h3class="y3">H</h3><h3class="y4">O</h3><h3class="y5">O</h3><h3class="y6">!</h3><brstyle="clear:both;"/><pclass="tag"><ahref="http://www.webjx.com">TypographyExamplesbyRossJohnson-www.webjx.com</a></p></html>
每个声明内只能有一个属性，如果属性值中含有空格用双引号括起来例，在一个声明块内可以有多个声明，每个声明用分号隔开。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 滚动条)层属性--溢出(visible/hidden/scroll/auto) 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 可以使用 CSS 检查工具进行设计。
页:
[1]