如果我知道正在干着的网站会有大块大块的CSS来袭,我喜欢使用下面这个有几分类似飞机起飞前检查清单的模板,它确保我可以顾及所有基本的选择器。假使一个页面的不同区域的同一组选择器(比如无序列表)要使用不同的样式,我只需拷贝粘贴,并加上恰当的id和class。没有用到的话,我只需删掉。以下是CSS模板1的样例:
/* ----- IDS ----- */ #container{ } #primaryContent{ } #secondaryContent{ } #navigation{ } #footer{ } /* ----- CLASSES ----- */ .hide{ } .show{ } /* ----- HEADINGS ----- */ h1{ } h2{ } h3{ } h4{ } /* ----- LISTS ----- */ li{ } li p{ } ol{ } ul{ } ol li{ } ul li{ } /* ----- IMAGES ----- */ img{ } img a{ } img a:hover{ } /* ----- LINKS ----- */ a{ } a:hover{ } a:visited, a:active, a:focus{ } a:visited{ } a:active{ } a:focus{ } /* ----- FORMS ----- */ form{ } fieldset{ } legend{ } label{ } input{ } textarea{ } input, textarea{ } select{ } optgroup{ } option{ } /* ----- TABLES ----- */ table{ } caption{ } thead{ } tbo***{ } tfoot{ } tr{ } tr .alt{ } th{ } td{ }
CSS模板2 你知道什么遥不可及吗?记住并且填入所有CSS选择器恰当的性质(property,又译特性,属性)。留意我大部分的项目,我一遍又一遍地为选择器使用相同的性质。所以我创建另外一个基于CSS模板1的模板,在里面为所有CSS选择器添加经常会用的CSS性质。以下是CSS模板2的样例:
/* ----- CSS ----- */ *{ margin:; padding:; font-family:; font-size:; } bo***{ margin:; padding:; background:; } /* ----- IDS ----- */ #container{ width:; margin:; padding:; background:; text-align:; } #primaryContent{ position:; float:; width:; margin:; padding:; background:; text-align:; } /* ----- CLASSES ----- */ .hide{ display:none; } .show{ display:block; } /* ----- PARAGRAPHS ----- */ p{ font:; color:; font-size:; font-family:; font-style:; font-weight:; font-variant:; text-align:; text-indent:; text-decoration:; text-shadow:; text-transform:; letter-spacing:; word-spacing:; } /* ----- LISTS ----- */ li{ listy-style:; list-style-type:; list-style-image:; list-style-position:; float:; margin:; padding:; } /* ----- LINKS ----- */ a{ font:; color:; text-decoration:; border-bottom:; } a:hover{ color:; background-color:; border-bottom:; } a:visited, a:active, a:focus{ color:; background-color:; border-bottom:; } |
相关推荐
个人收集的CSS模板,这些模板界面友好,易于改动。做网站必备参考。
很优秀的CSS模板,初学者必看,参考学习
最实用的50套精华Div+CSS模板,对设计网站和页面的人有参考的作用!
Bootstrap CSS/HTML前端框架,Bootstrap风格模板被很多前端设计者喜欢,Bootstrap... 在Bootstrap的文档中,包括了20个具有代表性的设计模板,可为你的前端开发设计提供参考。如演示截图所示,这只是其中一个模板。
55个国外极精美的CSS网页模板,学习Css的朋友可以参考一下
网站设计网页设计模板 html模板 div+css模板资料合集(80套),可供学习及设计参考。
内有100套HTMl模板,可以下载参考参考,个人觉得这套模板还是很不错的
css模板100个,包含各大典型的网页布局模式,可以参考制作
国外流量较大的100个CSS模板资源站,值得参考和借鉴,
很细化的div+css标准模板设计说明,附解说。学习参考,难得。 以下地址只是演示,需要打包下载的,我已经上传了rar文件。 http://www.35tt.com/template/40web2/index.htm
div css模板 html模板,仅供参考。
25个各类型网站HTML5CSS3模板源代码打包分享,html5,以静态页面、css、js为主。25个,以供学习和参考。
多套实用的 css控制模板,是管理类web页面是设计难得的参考素材。
12个不错的DIV+CSS模板,仅供学习参考,严谨用户商业用途,否则后果自负!(要凑字数不容易)
一些漂亮的模板,可以看看,这是我搜集的,还好
对于学习DIV+CSS进行web开发有很大帮助,其中有完整的源代码可以参考。
10套CSS风格国外网页模板,可以作为企业软件开发的参考网页。
基于js.css.jq.bootstrap的HTML后台模板,是我学习html来练练手的,html基础入门的学生可以考虑参考一下
css模板和js特效,100套免费欧美css网站模板下,很有参考价值!不多说了,下来看看就知道啦!
红色主题,带有新年气息的DIV+CSS博客模板。 适合网页制作的新手参考,代码简单,很实用!