当前位置：文档之家 › DIV+CSS的30条进阶技能

DIV+CSS的30条进阶技能

  • 格式：doc
  • 大小：665.50 KB
  • 文档页数：18

DIV+CSS的30条进阶技能许许多多的网页新手正徘徊在专业编码的门槛前，而网上的教程参差不齐，鱼龙混杂，很容易让新手迷茫。

这里总结了30条网页编码的“秘技”，只要在编码过程中牢记它们，灵活运用，你一定会写出一手漂亮的代码，早日迈入专业开发者的行列。

1. 一定要闭合标签在以往的页面源代码里，经常看到这样的语句：1.<li>Some text here.2.<li>Some new text here.3.<li>You get the idea.也许过去我们可以容忍这样的非闭合标签，但在今天的标准来看，这是非常不可取的，是必须百分百避免的。

一定要注意闭合你的标签，否则将无法通过验证，并且容易出现一些难以预见的问题。

最好使用这样的形式：1.<ul>2. <li>Some text here. </li>3. <li>Some new text here. </li>4. <li>You get the idea. </li>5.</ul>2. 声明正确的文档类型( DocType )笔者早先曾加入过许多CSS论坛，在那里，如果有用户遇到问题，我们会建议他首先做两件事：1. 验证CSS文件，解决所有可见的错误2. 加上文档类型 DoctypeDOCTYPE 定义在HTML标签出现之前，它告诉浏览器这个页面包含的是HTML，XHTML，还是两者混合出现，这样浏览器才能正确的解析标记。

通常有四种文档类型可供选择：1.<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”“/TR/html4/strict.dtd”>2.<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”“/TR/html4/loose.dtd”>3.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitiona l//EN”“/TR/xhtml1/DTD/xhtml1-transitional.dtd”>4.<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”“/TR/xhtml1/DTD/xhtml1-strict.dtd”>关于该使用什么样的文档类型声明，一直有不同的说法。

通常认为使用最严格的声明是最佳选择，但研究表明，大部分浏览器会使用普通的方式解析这种声明，所以很多人选择使用HTML4.01标准。

选择声明的底线是，它是不是真的适合你，所以你要综合考虑来选择适合你得项目的声明。

3. 不要使用嵌入式CSS样式当你在埋头写代码时，可能会经常顺手或偷懒的加上一点嵌入式css代码，就象这样：1.<p style=“color:red;”>Oncoding编码营</p>这样看起来即方便又没有问题，但是它会在你得代码中产生问题。

在你开始写代码时，最好是在内容结构完成之后再开始加入样式代码。

这样的编码方式就像打游击，是一种很山寨的做法。

——Chris Coyier更好的做法是，把这个P的样式定义在样式表文件里：1.#someElement > p {2. color: red;3.}4. 在页面head标签中引入所有的样式表文件理论上讲，你可以在任何位置引入CSS样式表，但HTML规范建议在网页的head 标记中引入，这样可以加快页面的渲染速度。

在雅虎的开发过程中，我们发现，在head标签中引入样式表，会加快网页加载速度，因为这样可以使页面逐步渲染。

—— ySlow团队1.<head>2.<title>My Favorites Kinds of Corn</title>3.<link rel=“stylesheet”type=“text/css”media=“screen” href=“path/to/file.css” />4.<link rel=“stylesheet”type=“text/css”media=“screen” href=“path/to/anotherFile.css” />5.</head>5. 在页面底部引入JavaScript文件要记住一个原则，就是让页面以最快的速度呈现在用户面前。

当加载一个脚本时，页面会暂停加载，直到脚本完全载入。

所以会浪费用户更多的时间。

如果你的JS文件只是要实现某些功能，（比如点击按钮事件），那就放心的在body底部引入它，这绝对是最佳的方法。

举例：1.<p>And now you know my favorite kinds of corn. </p>2.<script type=“text/javascript”src=“path/to/file.js”></script>3.<script type=“text/javascript”src=“path/to/anotherFile.js”></script>4.</body>5.</html>6. 不要使用嵌入式JavaScript，这都21世纪了！许多年以前，还存在一种这样的方式，就是直接将JS代码加入到标签中。

尤其是在简单的图片相册中非常常见。

本质上讲，一个“onclick”事件是附加在标签上的，其效果等同于一些JS代码。

不需要讨论太多，非常不应该使用这样的方式，应该把代码转移到一个外部JS文件中，然后使用“ addEventListener / attachEvent ”加入时间侦听器。

或者使用jQuery等框架，之需要使用其“clock”方法。

1.$(‘a#moreCornInfoLink’).click(function() {2.alert(‘Want to learn more about corn?’);3.});7. 开发中随时进行标准验证很多人并不真正理解标准验证的意义和价值，笔者在一篇博客中详细分析了这个问题。

一句话，标准验证是为你服务的，不是给你找麻烦的。

如果你刚开始从事网页制作，那强烈建议你下载这个网页开发工具条，并在编码过程中随时使用”HTML标准验证”和“CSS标准验证”。

如果你认为CSS是一种非常好学的语言，那么它会把你整的死去活来。

你的不严谨的代码会让你的页面漏洞百出，问题不断，一个好的方法就是——验证，验证，再验证。

8. 下载FirebugFirebug是当之无愧的网页开发最佳插件，它不但可以调试JavaScript，还可以直观的让你了解页面标记的属性和位置。

不用多说，下载它！9. 使用Firebug！据笔者观察，大部分的使用者仅仅使用了Firebug 20%的功能，那真是太浪费了，你不妨花几个小时的时间来系统学习这个工具，相信会让你事半功倍。

Firebug教程：10. 使用小写的标记理论上讲，你可以像这样随性的书写标记：1.<DIV>2.<P>Here’s an interesting fact about corn. </P>3.</DIV>最好不要这样写，费力气输入大些字母没有任何用处，并且会让代码很难看，这样子就很好：1.<div>2.<p>Here’s an interesting fact about corn. </p>3.</div>11.使用H1 - H6标签笔者建议你在网页中使用其中全部六种标记，虽然大部分人只会用到前四个，但使用最多的H会有很多好处，比如设备友好、搜索引擎友好等，不妨把你的P 标签都替换成H6。

12. 如果是博客，那把H1留给文章标题今天笔者在Twitter上发起一次讨论：是该把H1定义到LOGO上还是定义到文章标题上，有80%的人选择了后者。

当然具体如何使用要看你的需求，但我建议你在建立博客的时候，将文章题目定为H1，这对搜索引擎优化(SEO)是非常有好处的。

13. 下载ySlow在过去几年里，雅虎的团队在前端开发领域做了许多伟大的工作。

前不久，它们发布了一个叫ySlow的Firebug扩展，它会分析你的网页，并返回一个“成绩单”，上面细致分析了这个网页的方方面面，提出需要改进的地方，虽然它有点苛刻，但它绝对会对你有所帮助，强烈推荐——ySlow！14. 使用UL列表布局导航菜单通常网站都会有导航菜单，你可以用这样的方式定义：1.<div id=“nav”>2. <a hre f=“#”>Home </a>3. <a href=“#”>About </a>4. <a href=“#”>Contact </a>5.</div>如果你想书写优美的代码，那最好不要用这种方式，为什么要用UL布局导航菜单？——因为UL生来就是为定义列表准备的最好这样定义：1.<ul id=“nav”>2. <li><a href=“#”>Home</a></li>3. <li><a href=“#”>About</a></li>4. <li><a hre f=“#”>Contact</a></li>5.</ul>15. 学会怎样对付IEIE一直以来都是前端开发人员的噩梦！如果你的CSS样式表基本定型了，那么可以为IE单独建立一个样式表，然后这样仅对IE生效：1.<!–[if lt IE 7]>2. <link rel=“stylesheet”type=“text/css”media=“screen”href=“path/to/ie.css” />3.<![endif]–>这些代码的意思是：如果用户浏览器是IE6及以下，那这段代码才会生效。

如果你想把IE7也包含进来，那么就把“[if lt IE 7]”改为“[if lte IE 7]”。

16. 使用一个好的代码编辑器不论你是Windows还是Mac用户，这里都有很多优秀的编辑器供你选择：Mac 用户PC 用户17. 压缩前端代码！通过压缩CSS和JavaScript代码，通常可以减小25%以上的文件体积，在某种情况下，这会大大减轻你的带宽压力，提高加载速度。

合集下载

25个-CSS-高级进阶教程(参考模板)

25个-CSS-高级进阶教程(参考模板)

25个CSS 高级进阶教程如果你对 CSS 的掌握已经到了一定的贯通程度,那么你手中的 CSS 将会为你做很多高级的功能,甚至有时候 CSS 可以帮助解决之前靠 JS 才能解决的问题, 要知道,在 Web 开发过程中, 减少一段 JS 可是对 Web 的运行有足够大的减压作用的。

25个 CSS 高级教程，让你更了解 CSS。

1. 纯 CSS 字体渐变和背景渐变CSS Gradients using pure CSSBackground gradients and CSSCSS Gradient Text EffectPure CSS Text Gradient2. Z-Index 图像重叠Understading Z-IndexCSS Z-index3. CSS 边框创意Create a Scalable Star using using CSS border Border Slants4. 超酷 CSS 效果–控制面板Dashboard5. 纯 CSS 创建 2D/3D 按钮3D Rollover Button using CSSHow to make sexy buttons with CSSCSS rollover buttons6. Text Embossing/Shadow Technique With CSSview plaincopy to clipboardprint?Text EmbossingCSS Text Drop Shadows1. text-shadow: 0px 1px 0px #e5e5ee;7. Iconize Text links/Hyperlink with CSSAdd icon to the hyperlink.Iconize Textlinks with CSS8. CSS Curly QuotesCurly Quotes with Pure CSSSwooshy Curly Quotes Without Images9. Using CSS Opacity for Various Cool EffectsA CSS only fly-out menu with transparency CSS Menu using CSS opacity propertyOpacity Background Blending Effects Transparency Menu Watermark on an image 10. Blurry Background Effecthow to create a blurry background using CSS 11. CSS Parallax EffectExamples of and How to Create the CSS Parallax EffectA parallax illusion with CSS: The Horse in Motion12.Create a Lightbox effect only with CSStechnique13.CSS-Only Accordion Effectcreate Accordion using CSS14. Add grunge Effect to Text Using Simple CSStutorial15.Create a Block Hover /Element Hover EffectLearn how to create a block hover effect for a list of linksCSS element hover effect.16. Simple Dither Effect using CSSdither effect using17. Create a liDock MenuHorizontal Menus That Grow on You 18. CSS Hover Swap EffectCSS swap hover effect19. Polaroid effect using CSSPolaroid-izing photos with CSS and one Image.20. CSS 杂志Create a Magazine Type layout Using CSS21. CSS Hoverbox Menucool CSS Menu22.CSS 标签切换Create a Tabbed content.23.CSS Magic with Fixed Background-attachmentshows a trick that reveals a magic24. CSS 信息提示如不慎侵犯了你的权益，请联系告知！11 /11 Show a message when hovering over the links.25. 纯 CSS 预加载效果Add a “loading” icon to your larger images（本资料素材和资料部分来自网络，仅供参考。

Dreamweaver之DIV+CSS的使用技巧

Dreamweaver之DIV+CSS的使用技巧

4. 内嵌样式 内嵌样式是混合在 HTML 标记里使用的，用这种方法，可以很简单的对某个元素单独定义 样式。内嵌样式的使用是直接将在 HTML 标记里加入 style 参数。而 style 参数的内容就是 CSS 的属性和值，如下例：
<p style="color: sienna;margin-left: 20px;"> 这是一个段落 </p> <!--这个段落颜色为土黄，左边距为 20 象素-->
注意：有些低版本的浏览器不能识别 style 标记，这意味着低版本的浏览器会忽略 style 标记 里的内容，并把 style 标记里的内容以文本直接显示到页面上。为了避免这样的情况发生， 我们用加 HTML 注释的方式（<!-- 注释 -->）隐藏内容而不让它显示：
2010·10·4
广东石油化工学院 教育技术学
('light').style.display='none';document.getElementById('fade').style.display='none'"
4，关于 float 的问题：有时候一些 div 会挤到页面的上方，把页面挤破掉，这里可能就是浮 动引起的，这
时候我们就用到了这个：clear：both，很不错的解决方法，不妨一试。
要用引用 js 的时候，样式最好不要用 id，因为 id 要留给 js 使用，当程序员写后台用的是.net 时，最好不用
用 id，id 要留给程序员用，前台我们就用 class 好了。
7，还是 img 问题，页面中最好不要用大块背景，能平铺的要平铺，否则加载起来会很慢， 也不利于以后的
DIV+CSS网页布局技巧实例

DIV+CSS网页布局技巧实例

DIV+CSS网页布局技巧实例1：设置网页整体居中的代码以前用表格布局时设置网页居中非常方便，把表格对齐方式设置为居中就行了，就这么简单，现在呢，用DIV+CSS样式表控制，好像不是那么容易了，其实也很简单，只不过方式不line-height:500px;<!D O CTY PE ht m l PU B LI C "-//W3C//D<ht m l xm l ns="ht t p://w w w.w3.or g/199<head><m et a ht t p-equi v="Cont ent-Type"co提示：可以先修改部分代码后再运行这是一种方法，另外和种方法就是设置的它内边距padding了，自己可以试试哟～～DIV+CSS网页布局技巧实例3：设置层的透明度有时候我们需要用到层的透明度，把下边的背景透出来，如下图：这种半透明的形式在blog上应用比较广泛，那么这种效果是怎么做出来的呢？用JS，NO, NO，既然我们是CSS布局教程，那么就尽量用CSS来解决问题！filter: alpha(opacity=70);opacity: 0.7;把这两句代码加入到要实现半透明层的CSS样式表里即可，简单吧！！注：70和0.7的值可改为你需要的<!D O CTY PE ht m l PU B LI C "-//W3C//D<ht m l xm l ns="ht t p://w w w.w3.or g/199<head><m et a ht t p-equi v="Cont ent-Type"co提示：可以先修改部分代码后再运行DIV+CSS网页布局技巧实例4：使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。

css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。

divcss入门教程讲解

divcss入门教程讲解

divcss入门教程讲解
DIV+CSS是WEB设计标准，它是一种网页的布局方法。

与传统中通过表格(table)布局定位的方式不同，它可以实现网页页面内容与表现相分离。

提起DIV+CSS组合，还要从XHTML说起。

XHTML是一种在HTML(标准通用标记语言的子集)基础上优化和改进的新语言，目的是基于XML应用与强大的数据转换能力，适应未来网络应用更多的需求。

我们为大家收集整理了关于divcss入门教程，以方便大家参考。

做前端开发的朋友都知道css，但是好多人还不知道css怎样命名才算是规范的，其实css命名规范有很多版本，看自己对哪种比较适合或者说习惯。

在DIV+CSS网页中时常使用html注释与css注释，而各种注释大多作用是在重要代码处加上注释说明注明意思。

比如写了一段代码是比较特殊的时常需要改动的CSS代码，为了以后一下即可找到此段代码，这个时候加入CSS注释加以说明，即可起到说明提示作用。

有时候，我们需要对网页某个区域的文字竖排，竖向排列，横向的当然大家都见惯了，对于竖排，一时间找不到思路了。

在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。

俗话说，细节决定成败，我们只要在web前端开发学习中不断总结不断改变，才会有所成绩的。