学习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下一页阅读全文

时间: 2024-10-24 00:51:03

学习WEB标准总结的一些CSS/XHTML知识小结第1/3页_经验交流的相关文章

非常漂亮的Div+CSS布局入门教程第1/5页_经验交流

在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 所有的设计第一步就是构思,构思好了,一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来,以下是我构思好的界面布局图. 下面,我们需要根据构思图来规划一下页面的布局

用css制作星级评分第1/3页_经验交流

原文:Creating a Star Rater using CSS 链接:http://komodomedia.com/blog/index.php/2005/08/24/creating-a-star-rater-using-css/ 版权:版权归原作者所有,翻译文档版权归本人|greengnn,和blueidea. 先看看效果 Step 1: XHTML  <ul class="star-rating">       <li><a href=&quo

非常漂亮的css星级效果总结第1/2页_经验交流

用纯css打造星级评分效果正在被越来越多地应用在网络RIA中,结合ajax等技术,可以渲染出很出色的视觉效果和很棒的用户体验,在这篇文章开始之前,大家可以先去cssheaven感受一下. 最近由于项目需要,我在网上找了很多css星级评分的例子和说明,但是发现大多数都是翻译国外的文章,而且解释得并不是非常清楚,所以我决定自己来做一个总结,也希望能够给大家一些帮助. 首先用中文写一下这个效果的算法: 1. 使用背景图片的位置切换来获得星级效果: 2. 整个效果最关键的地方就是"三层理论",

div+CSS网页布局的意义与副作用原因小结第1/2页_经验交流

如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

web标准知识——从p开始,循序渐进_经验交流

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

web标准常见问题集合第1/2页_经验交流

列举了一些常见,新手经常问的问题.举例并说明解决方法.1.超链接访问过后hover样式就不出现的问题 web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全web标准常见问题大全 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 复制代码 代码如下: 被点击

采用XHTML和CSS设计可重用可换肤的WEB站点的方法第1/4页_经验交流

XHTML 标准的目标是取代 html.按照 W3C 的说法,"XHTML 是 html 的继承者"(http://www.w3.org/MarkUp/). XHTML具有两大目标: 在文档结构和表示形式之间创建更明显的分离. 将 html 重新表示为 XML 的应用程序. 使用XHTML标准的好处是:只需设计页面一次,即可让该页以完全相同的方式在任何现代的浏览器中显示和工作.例如,在按照标准生成以后,页面在Internet Explorer.Mozilla Firefox.Netsc

CSS标签切换代码实例教程 比较漂亮_经验交流

我们的设计越来越追求一种简洁的风格,希望在有限的空间内展示更多的内容.与此同时我们发现一些问题,内容的简单排列总使页面很长.滚屏很多才能将显示的内容布局完毕.YAHOO与网易率先应用了标签切换的布局方式,打破了常规布局的局限性,在相同尺寸的区域内,可以放置更多的内容.我们只需要点击不同的选项卡或链接就能展开内容,这并不需要打开新的网页,只是在同一页内完成. 一.标签切换总体的实现思路: 实现这种标签切换的布局有多种方式,也流传着各种不同的代码,我们应用DIV CSS进行布局,首先来整理一下思路,

css文本框与按钮美化效果代码_经验交流

一.先看看在网页中经常出现的按钮与文本框的本来面目吧! 对照上图,我们怎么样才能改变文本框与按钮的模样呢?那在下面我为大家提供两种文本框与按钮样式作为例子参考,第一种是文本框与按钮无立体感,只是有线 条颜色与填充颜色的,这种效果大家可能在很多网站上都看见过,给人一种特别的感觉,很不错的,第二种效果就比较特殊了,是将文本框做成一种类似于下划线的 效果并且是彩色的,同时按钮的背景色也不再是灰色,而是彩色的,可以说这是一种非常酷的效果,好了,下面我就来说说这两种效果实现的详细操作步骤吧. 二.无立体效