285月

CSS em的运用以及与px的区别

SEO/网站推广, 前端开发DIV+CSS

最近在做Ipad的界面,领导需要用em的可缩放的字体来编写页面,因此又温习了一下em在网页中的具体运用,下面是网上查到的一些资料。

一般做网页我们都使用12px作为网站的主体字体大小。10px太小,14px容易看清,中文字体就出现锯齿的边缘了,做英文网站的时候还是觉得11px的英文字体显得网站[……]

No comments | read more »
131月

CSS三列布局,左右宽度固定,中间自适应宽度

英文网站建设

运用DIV对于页面宽度的自适应的布局,左右两栏布局自适应:左边栏固定,右边栏自适应,这个应该不是很难(左边栏设置一个固定宽度,float:left;就可以。右边栏width:auto; margin-left:相应宽度;即可)

这里介绍下左栏,右栏宽度固定,中间栏自适应宽度,现在介绍几个比较实[……]

1 comment | read more »
284月

CSS display 属性

SEO/网站推广

说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的这种层次结构,所有 display 是绝对必要的。

注释:CSS2 中有值 co[……]

No comments | read more »
121月

CSS选择符命名的四个原则

SEO/网站推广

写CSS时,有时要花一定的时间去纠结选择符该如何命名。随意的命名,会让你陷入查找的麻烦。
  
  在这里介绍出以下的几个命名原则:

  原则一:CSS选择符命名应该体现结构而不是样式。

  这句话听起来很奇怪。这样不是违反了结构和样式分离的原则么?恰恰相反,其实正是遵循分离原则。要[……]

No comments | read more »
051月

CSS网页布局扩展小技巧

SEO/网站推广

CSS网页布局开发中,会有很多小技巧,这之类相关的文章在葡提子-英文建站博客有许多介绍,这里再扩展一下您所想要得到的知识,相信您会有很多收获!

  一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。
  二、同一个的class选择符可以在一个文档中重复[……]

No comments | read more »
2512月

display:inline在网页设计中的几个基本用途

SEO/网站推广, 前端开发DIV+CSS

很多网站的代码中经常可以看到<li></li>标签内设置了float:left又设置display:inline。
既然设置了float:left,那标签内的元素都会向左浮动了。为什么又要设置display:inline。

既然设置了float:left,那该标签已具[……]

No comments | read more »
2312月

li标签的间距问题及编码方式

SEO/网站推广, 前端开发DIV+CSS

新建一个简单的HTML测试文件,下面来测试ul li标签

Example Source Code
<ul>
<li><a href=”#”>菜单一</a></li>
<li><a href=”#”>菜单一[……]

No comments | read more »
1612月

text-indent以图换文字字隐藏文字

SEO/网站推广

以图换字是CSS布局中非常常用的一种手段,因为图片文字有时候比可选的文字的表达效果更好!
因此,某些文字标题是用图片来表达的。但写一个img标签实在不雅,为了照顾蜘蛛,我们使用浏览器障眼法。
于是用最常用的text-indent:

css:
Example Source Code
b[……]

No comments | read more »
1512月

CSS的优先权 Specificity具体的计算

SEO/网站推广

CSS2.1 中规定了关于 CSS 规则 Specificity(特异性)的计算方式,用一个四位的数字串(注:CSS2 中是用三位)来表示,最后以 Specificity 的高低判断 CSS 的优先权。

Specificity 具体的计算规则:

1.元素的 style 样式属性,加 1,[……]

No comments | read more »
0712月

CSS清除浮动元素方法

SEO/网站推广, 前端开发DIV+CSS

在进行浮动布局时,大多数人都深知,在必要的地方进行浮动清理:<div style=”clear:both;”></div>。
例如:

 Example Source Code
<div style=”background:#666;”> <!–[……]

No comments | read more »