我都是拿别人的模板,模仿者编写DIV布局,以及CSS样式。一般而言,我都是用ID来标整个页面的布局结构,然后里面的内容用CSS类来设置样式。 比如我布局可以这么写,然后我可以写一些小工具(也可以这么想,反正就是一个HTML模块,然后你可以在里面填写相应的结构化信息,交给程序员编写相应的 代码或者是JS脚本,复用之):
复制代码代码如下: <body> <div id=”wapper”> <div id=”header”> <h1> <a>Knight’s Personal Site</a></h1> </div> <div id=”menu” class=”clearfix
在CSS的编写过程中,我们经常会面临布局设计和样式设置的挑战。从分享的内容来看,作者在实践中积累了一些宝贵的经验,这些经验对初学者和有一定经验的开发者都极具启发性。
作者提到用ID来定义整个页面的布局结构,而用CSS类来设置具体的内容样式。这种做法遵循了CSS中的“分离内容与表现”的原则,使得HTML结构清晰,易于理解,同时也方便维护和复用。例如,在示例代码中,`id="wapper"`定义了整个页面的包裹层,`id="header"`、`id="menu"`等则表示不同的页面区域,而`.clearfix`、`.contentItem`、`.gallery`等类则用于设置特定元素的样式。
CSS的文件结构也至关重要。作者提到了常见的三种CSS文件类型:`reset.css`、`layout.css`和`elements.css`。`reset.css`的主要作用是重置浏览器的默认样式,确保不同浏览器下页面显示的一致性。这一步很关键,因为不同的浏览器可能对某些元素的默认样式有不同的处理。`layout.css`则专注于页面的布局,如设置`div`的背景、内边距和外边距等,确保整个页面的布局逻辑清晰。`elements.css`用于定义具体元素或小工具的样式,这样可以保持代码的整洁,提高可读性。
在编写CSS时,作者还强调了CSS选择器的使用,如类选择器`.contentItem`,通过它我们可以为一类元素设置统一的样式。同时,他还提到了CSS的复用性,例如,创建一个`.gallery`类,可以应用于多个展示图片的区域,减少了代码重复,提高了效率。
此外,作者还分享了一个实用技巧,即利用CSS的`background-color`、`border`、`padding`和`margin`属性来控制元素的外观。例如,`.gallery`类中的设置,使图片容器具有白色背景,带有底部和右侧的边框,以及适当的内边距,确保了视觉效果的一致性。
编写CSS时,我们应该注重代码的组织和复用,合理使用ID和类选择器,以及有效地管理CSS文件结构。这不仅有助于提高代码质量,还能降低维护成本,使得网站设计更加灵活和可扩展。对于初学者来说,学习和借鉴这些经验,将对提升CSS技能大有裨益。