学习WEB标准总结的一些CSS/XHTML知识小结第1/3页

1、很多兼容性问题，是因为不同标签在不同浏览器下有着不同的 padding margin默认值。所以可以事先定义


代码如下:

* { padding：0; margin:0;}

或者


代码如下:

ul,li,h1,h2,h3,h4,h5,h6,p,table,td,div,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;}

2、关于布局，可以看dreamweaver cs3里的模板怎么写的，它的写法是最好的写法。大的布局，可以直接使用 dreamweaver cs3 里默认的那些模板。 然后去掉注释，就能用了。

3、适当的使用margin/padding，在调整box（盒子）中，元素位置的时候，使用box（盒子）的padding比较好。而不要使用，box内元素的margin。

原因是，box内元素使用margin的时候，会对box的margin产生影响，产生错位。

但在使用padding的时候注意一点： 比如本来 width:100px 的box,如果设置了padding-left:20px的话，那就要把width减去20px。

4、一个box，设置了border后，要把width减去border的粗。 比如width:100px 的box，左右有1px的边，那应该设置box width为98px。

5、在添加box的时候，能不给width和height的，尽量不给。

height可以靠内部的元素去撑开。

width不设置的话，一般默认就是100%宽。

6、同时给一个box设置背景图片和背景颜色的方法是，先设置背景图片，再设置背景颜色，代码如下：


代码如下:

.bg {background:url(/images/blbian.gif) no-repeat}
.style1 {width:100px;height:100px;background-color:#ebf1e5;}
<div class="style1 bg"></div>

7、当float:left之类的东西写的太多，影响到周围，或者下面的元素的时候，尝试使用clear:both去清除。

代码如下:

<br class="clearfloat" />
.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

8、在进行如下设置的时候<div style="height:3px"></div>，会产生兼容性问题。 ie6会出问题，你会发现，box不是3px高。
需要如下设置： font-size:1px; 才不会有问题。参考 dw cs3模板中 clearfloat中的写法，还会加上line-height:0px。不过我发现不加也是可以的。但加会更正规。

9、在给单行文字设置height的时候，要同时设置line-height。不然会有兼容性问题，文字会有小的错位。

10、使用ul li列表的时候，一定要给ul设置 list-style-type: none; 不然会产生兼容性问题。 ff下会出现原点，而ie下经常看不到。

当前1/3页 123下一页阅读全文

赞 (0)

相关推荐

  • 学习WEB标准总结的一些CSS/XHTML知识小结第1/3页

    1.很多兼容性问题,是因为不同标签在不同浏览器下有着不同的 padding margin默认值.所以可以事先定义 复制代码 代码如下: * { padding:0; margin:0;} 或者 复制代码 代码如下: ul,li,h1,h2,h3,h4,h5,h6,p,table,td,div,img,hr,dd,dt,span,a,dt,dd,ol{margin:0;padding:0;font-size:12px;} 2.关于布局,可以看dreamweaver cs3里的模板怎么写的,它的写法

  • 初学web标准的几个误区

    非常高兴地看到很多设计师开始关注和尝试使用web标准制作网页.但从网友们的问题和制作中发现几个问题,在这里特别提醒一下: 1.不是为了通过校验才标准化.web标准的本意是实现内容(结构)和表现分离,就是将样式剥离出来放在单独的css文件中.这样做的好处是可以分别处理内容和表现,也方便搜索和内容的再利用. W3C校验仅仅是帮助你检查XHTML代码的书写是否规范,CSS的属性是否都在CCS2的规范内.代码的标准化仅仅是第一步,不是说通过的校验,我的网页就标准化了.我们不是为了虚名,或者向别人炫耀:"

  • 我的一些关于web标准的思考笔记（一）

    我是从去年初开始学习web标准的,两年下来也有些心得.最近跳槽了正好闲在家里,写一些出来和大家交流一下. 1 对于web标准和W3C XHTML规范的理解 按照习惯的理解,这两个概念似乎都是指的一个东西(就是咱们在这个版里讨论的这些个"高深理论"^_^).但我认为,事实上从技术的角度上讲,这两个事物几乎没有任何相关性.web标准简而言之就是将页面的结构.表现和行为各自独立实现,更通俗的讲就是如今招聘时流行的语言"div+css".但W3C XHTML的任何一个版本都

  • 网站程序员如何应对web标准第1/2页

    网站程序员如何应对web标准第1/2页

    作者:jxdawei jxdawei的blog:http://www.iwcn.net/ 本文讨论的是在web标准普及的形势下,网站程序员的定位以及如何与设计师配合开发符合web标准的网站项目.本文适合的读者是传统TABLE布局下分工不是非常明晰的程序员. 1:学习web标准,让你的工作变得更加简单. web标准是大势所趋,所以作为网站程序员.你必须洗脑,必须去学习web标准.去重新认识html标签,去了解如何让程序输出页面需要的代码. 比如: 上边是美工出来的效果图,下边是符合标准的程序代码:

  • web标准布局实例教程，用定位轻松解决CSS复杂布局

    web标准布局实例教程，用定位轻松解决CSS复杂布局

    我相信来经典论坛学习标准的朋友,99%都不是为了进W3C,不是为了成为专业的研究人员,那么大家来的目的是什么呢?很简单,其实都是想通过标准的学习让自己多增加一项技能而已,让自己在找工作的时候不会在被"需要熟练掌握web标准"而难倒,在下面的实例中xhtml并没有什么语意,文章的目的只是让然大家能更好的掌握CSS中相对.绝对定位的用法(新手问此问题的确实很多),及如何有效的结合背景,实现比较复杂的布局.不足之处还望前辈们能指点一二,感谢! ------------------------

  • Web标准学习资源（书籍、网站）推荐

    一.Web标准学习书籍推荐 1.<网站重构--应用WEB标准进行设计> screen.width*0.7) {this.resized=true; this.width=screen.width*0.7; this.style.cursor='hand'; this.alt='Click here to open new window\nCTRL+Mouse wheel to zoom in/out';}" onclick="if(!this.resized) {retur

  • javascript 文字上下间隔滚动的代码 符合WEB标准 脚本之家修正版

    第一个 文字上下间隔滚动 修正版 符合WEB标准的文字间隔滚动JS代码 var marqueeContent=new Array(); //滚动新闻 marqueeContent[0]='14:25 HTML/JS互相转换工具-IE7兼容版'; marqueeContent[1]='14:25 css 在线压缩工具'; marqueeContent[2]='14:25 CSS整形与最佳化工具[压缩]'; marqueeContent[3]='14:25 JS Minifier js压缩'; va

  • asp.net开发与web标准的冲突问题的一些常见解决方法

    论坛中也经常有从事.net开发的新手朋友问一些asp.net开发过程中与web标准之间的冲突问题,其实说到底就是客户端代码生成的问题.更高深的开发层面的东西我也说不出来,从页面前端的角度和大家分享一下建议: 少用asp.net中的服务器端控件 在Visual Studio中,有一系列强大的控件,让我们的刚开始学习.net开发人员爱不释手.但vs中的这些控件,大多都是基于winForm的那种模式搬来的,在网页开发上,有些控件还是少用为佳,比如: 不要什么也没都统统加form runat="serv

  • web标准知识——丰富段落里的标签

    如果你已经开始跟着<WEB标准能有多难?>在自己的工作中循序渐进地运用WEB标准了,那么这次的内容会让你更进一步的了解到关于段落里的细节.要是你刚刚准备好开始没关系可以先看看<从p开始,循序渐进>,然后再看本文.  昨天晚上我决定了放弃在这个时候插入CSS内容,继续深入XHTML的内容.也许大家会觉XHTML远没有CSS有趣,是的,的确如此,CSS能变化出无数看得见的可能.而XHTML只不过是为了机器与程序准备的.但是事实上XHTML的重要性要比CSS重要得多.我们都知道网页本身的

  • web标准知识——从p开始，循序渐进

    很多朋友现在还在用Dreamweaver(下称DW),不可否认这是个非常优秀的软件,他基本上实现了所见即所得.当然也正是因为这样让很多网页制作人员对于(x)HTML标签变得一无所知.然而要学习WEB标准就必需要与标签打交道,你必需要了解他们的特点.就算你不打算自己打代码,继续使用DW来完成自己的工作也必需要知道DW生存的代码的作用.如果你希望减少冗余代码,提升网页的品质,那么你就更需要认知(x)HTML标签. 那么学习自然要循序渐进,当然要从最常用.最简单的入手.如果问在所有HTML标签中谁是最

随机推荐