来一发CSS网页制造技能:勤俭网页代码编写工夫
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。网页制造poluoluo文章简介：CSS已成为网页前端计划一个十分主要的部分，因为写CSS时必要思索的成绩十分多，内行们创立新页面是一般会相沿之前的CSS框架。可是老手没有本人的框架，这篇文章能够给老手们一些启发。
CSS已成为网页前端计划一个十分主要的部分，因为写CSS时必要思索的成绩十分多，内行们创立新页面是一般会相沿之前的CSS框架。可是老手没有本人的框架，这篇文章能够给老手们一些启发。
1.复杂的纯CSSTooltip
经由过程这些代码，你能够做出复杂的Tooltip。这是CSS代码：1234567891011121314151617a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}
HTML代码以下：
1Easy<aclass="tooltip"href="#">Tooltip<span>ThisisaExamplebyimbolo.com.</span></a>.效果如图。
2.重设基础款式
为了一致分歧扫瞄器对各类HTML标签的默许款式的衬着，我们必需重新界说各类标签的款式，如许能对今后的开辟带来便利。从头界说各类HTML标签只必要在CSS的开首到场以下代码。
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}body{ line-height:1;}ol,ul{ list-style:none;}blockquote,q{ quotes:none;}blockquote:before,blockquote:after,q:before,q:after{ content:none;}/*元素取得核心时的款式!*/:focus{ outline:0;}/*特别文本的款式!*/ins{ text-decoration:none;}del{ text-decoration:line-through;}/*细线表格款式*/table{ border-collapse:collapse; border-spacing:0;}3.便利的CSS调试器
这段代码能够把页面上的各类标签嵌套用分歧的线条分别出来，便利你找出BUG。
12345678*{outline:2pxdottedred}**{outline:2pxdottedgreen}***{outline:2pxdottedorange}****{outline:2pxdottedblue}*****{outline:1pxsolidred}******{outline:1pxsolidgreen}*******{outline:1pxsolidorange}********{outline:1pxsolidblue}4.使一个未设定宽度的DIV居中
关于一个有流动宽度的DIV容器，你能够轻松地经由过程margin:auto属性令他居中。假如要居中的DIV容器并没有设置宽度的话，你可使用上面的CSS代码：
12345678910111213141516171819.content{ margin:0auto8px; display:table; }.contentdiv{ display:table-cell; }<!-->.content{ display:block; text-align:center; }.contentdiv{ display:inline; zoom:1;}<!-->5.为年夜图片增加伪AJAX的载进图标
守候图片下载是扫瞄网页是定见烦人的事，但用JavaScript静态载进图片手艺难度又对照年夜。你能够用CSS加上一个载进图标，减缓访客守候加载时的心情。
1a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}16.CSS图象预载
假如你要在HTML文件加载完成前预载图片，你能够把图片设置为一个DIV容器的背景图，而且把这个容器设为不成见。当HTML加载后再把这个DIV容器拔出页面里。
a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}2a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}37.CSS通明度
因为老式扫瞄器对页面元素通明度处置欠好，你必需为通明的元素写hack。
a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}4a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}58.为IE和别的扫瞄器设置元素的最小高度
因为IE不撑持min-height属性，我们仍是要为IE写hack。以下代码的第一部分是准确的代码，能够在尺度扫瞄器里利用，第二部分是针对IE的hack。因为IE不克不及辨认min属性，因而height值设定为8em，使容器能装下超越容器局限的文本。
a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}6a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}79.依据链接范例选用分歧的链接款式
超链接的情势次要有http链接和mailto链接两种，你能够为这两种链接设置分歧的款式。经由过程CSS3，你乃至能为指向分歧文件范例的附件链接创建分歧的款式！不外，这类做法对不兼容CSS3的扫瞄器不敷友爱，而这也是我们必需尽快减少老版本IE的缘故原由。
a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}8a:hover{ background:#ffffff;/*要兼容IE6的话必需增加背景致*/ text-decoration:none;}a.tooltipspan{ display:none; padding:2px3px; margin-left:8px; width:130px;}a.tooltip:hoverspan{ display:inline; position:absolute; background:#ffffff; border:1pxsolid#cccccc; color:#6c6c6c;}910.移除IE里文本输出框的转动条
IE扫瞄器会多此一举地为多行的文本输出框加上一个转动条，哪怕你输出的笔墨长度还没有超越输出框的局限。经由过程上面的代码你能够把过剩的转动条移除。
1011
原文链接：10个勤俭开辟工夫的CSS技能</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 滚动条)层属性--溢出(visible/hidden/scroll/auto) Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。
页:
[1]