我都是拿别人的模板,模仿者编写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技能大有裨益。
- 粉丝: 4
- 资源: 965
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- HtmlMate标签使用详解中文最新版本
- ATM机旁危险物品检测数据集VOC+YOLO格式1251张5类别.zip
- 网页优化meta标签使用方法及规则中文最新版本
- 网页万能复制 浏览器插件
- IMG_20241123_093226.jpg
- JavaScript的表白代码项目源码.zip
- springboot vue3前后端分离开发入门介绍,分享给有需要的人,仅供参考
- 全国297个地级市城市辖区数据1990-2022年末实有公共汽车出租车数人均城市道路建成区绿地面积供水供气总量医院卫生机构数医生人数GDP第一二三产业增加值分行业从业人员水资源农产品产量利用外资
- Python客流量时间序列预测模型.zip
- 故障预测-灰色预测模型C++源码.zip