撰写CSS的1些感悟共享

2021-01-20 14:23 jianzhan
我全是拿他人的模版,效仿者撰写DIV合理布局,和CSS款式。1般而言,我全是用ID来标全部网页页面的合理布局构造,随后里边的內容用CSS类来设定款式。
例如我合理布局能够这么写,随后我能够写1些小专用工具(还可以这么想,总之便是1个HTML控制模块,随后你能够在里边填写相应的构造化信息内容,交到程序流程员撰写相应的 编码或是JS脚本制作,复用之):

拷贝编码
编码以下:

<body>
<div id="wapper">
<div id="header">
<h1>
<a href="#">Knight's Personal Site</a></h1>
</div>
<div id="menu" class="clearfix">
<ul>
<li class="first"><a href="#" accesskey="1">Home</a></li>
<li><a href="#" accesskey="2">About Us</a></li>
<li><a href="#" accesskey="3">Aticles</a></li>
<li><a href="#" accesskey="4">Photos</a></li>
<li><a href="#" accesskey="5">Contact Us</a></li>
</ul>
</div>
<div id="content">
<div id="xbg1">
</div>
<div id="primaryContentContainer">
<div id="main-content">
</div>
</div>
<div id="leftSide">
</div>
<div class="clear">
</div>
</div>
<div id="footer">
<!-- widget for footer and for example,i designed a widget-->
<p>
Copyright &copy; 2006 Sitename.com. Designed by <a href="http://www.freecsstemplates.org">
Free CSS Templates</a></p>
<!-- /widget for footer and for example,i designed a widget-->
</div>
</div>

小专用工具的示例:

拷贝编码
编码以下:

<div class="contentItem">
<!-- widget for main-content and for example,i designed a widget -->
<h2>PHOTOS GALLERY</h2>
<div class="gallery"> <img src="images/wall-04.jpg" /> </div>
<!-- /widget for main-content and for example,i designed a widget -->
</div>

随后你能够撰写contentItem这个CSS类,运用CSS的1些挑选器来设定款式。而你的合理布局信息内容,你能够挑选用CSS的ID挑选器来开展布 局。这样的益处便是构造清楚,易于复用。
此外1个值得1提的便是CSS的文档构造。这1直是个见仁见智的难题。自然,以便灵便性,你能够切分成几个CSS文档。例如我在写的情况下就常常分为3个 CSS文档,各自是:reset.css,这个文档时用于设定访问器的默认设置款式,你能够去互联网上看看,Eric或YUI的reset源文档,或你能够 参看1些CSS Framework的编码。1个提议,要量身定做,不必盲目跟风的复制;
layout.css,这个文档的用途,从文档名也很非常容易看出来,便是用来设定全部网页页面的合理布局信息内容的,好像某个DIV的 BACKGROUND,PADDING,MARGIN等,我全是在这里开展设定的;
elements.css,这个文档,我关键用来设定小专用工具的款式信息内容。上文撰写的小专用工具为例,我能够这么写:

拷贝编码
编码以下:

.gallery { background-color:#FFF; border-bottom:#CCC solid 2px; border-right:#CCC solid 2px; padding:2px 2px 10px 2px; width:450px; }
.gallery img{ margin:0; width:100%; }

随后你能够四处粘贴了,舒适!