053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

css清洁简化的几个技巧

时间:2017-09-08

1. 删除不必要的<div>标签

我看到了很多人的包装一个 <div>标签周围 <form>或 <ul>菜单列表。为什么要创建一个额外的 <div>标签,你不需要?你的选择可以达到同样的结果运用的CSS规则。

例1:

下面的例子显示如何可以去掉 <div>标签,并宣布造型的 表格选择。

 

css清洁简化的几个技巧
 
有时为了各个内容之间的间隔,使用div 但每个内容块都有自己的h4标题,可以删除多余的div 用h4标题代替div,如图:
 
css清洁简化的几个技巧
2.使用语义标签布局
 
应该总是使用语义标记为代码的HTML文件(如 <h1>标题,为 <p>款的文本,<ul>为列表项)。所以,即使是没有提出或CSS的支持,您的文件仍然是有道理的。

例如:

下面的图片渲染之间的差异比较<div>标记和无标记的CSS语义支持

 

 

css清洁简化的几个技巧
 

 

3. 尽量减少使用<div>标签

你见过那里的混乱的模板 <div>标签是无处不在,它们让你发疯?你可曾错过了一个结束 </div>标签或有额外的开放 <div>标签搞乱了整个布局?我敢肯定,大多数开发人员都经历过。所以,你应该总是尽量减少使用 <div>,如果可能的标记。这将使调试和编辑更加容易。

示例1:

而不是使用 <div>导航标签的面包屑,它使更多的意义使用 <p>的标签。

 

css清洁简化的几个技巧

例2:

下面的示例显示了如何使用CSS可以减少2 <div>1标签与更换 <span>标记。它们都产生相同的布局。

 

 

css清洁简化的几个技巧

4. 格式(缩进)您的代码

你应该总是格式化你的源代码(即缩进您的嵌套元素),以便更容易阅读和调试。如果你有你可以很容易地格式化代码使用Adobe Dreamweaver中, 命令“> 应用源格式菜单(从应用程序)。

 

css清洁简化的几个技巧
 

 

5.注释闭幕 </div> 标签

当平台编码模板(即WordPress的主题),模板是最有可能分裂成几个文件:index.php的,header.php中的sidebar.php和footer.php。因此,你应该总是作出关闭评论为 </div>失去标记,以便你不会得到的。例如,当我看到</div><!-- /wrapper -->,我知道这是为结束标记<div id="wrapper">.

例如:

我通常插入标记后马上关闭HTML注释 </div>标记。我用正斜杠,表示它是结束标记。

 

css清洁简化的几个技巧
相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP