分类目录归档:前端

HTML/CSS细节

HTML/CSS的相对来说比编程简单,甚至简单很多。

可以用Dreamweaver快速学习上手,但最好学会手写,使用editplus/Notepad++。

不一定要懂最新的,例如HTML5/CSS3,但一定要懂标准的,简单的东西差别在于细节

以下是一些总结(持续更新)

编写XHTML而不是”HTML”

XHTML的一些特点

1)正确嵌套元素:<p><span></span></p>,不能<p><span></p></span>,span与p区交叉。

2)结束标签

3)处理空元素

4)区分大小写

5)引用的属性值

6)明确的属性值

7) 处理特殊字符<!–10.14更新–>

负边距实现超级流体布局

负边距除了可以进行简单的hack和实现适应浏览器的垂直和水平居中外,更多会用到在流体布局里。

今晚搜索更多相关内容的时候,从这里还学到一种结构多变(左右两栏宽度固定)但排列输出不变的负边距流体布局,我简称神奇流体布局,太神奇了,练习之余总结分享一下。

如下图,无论相关区域在相关区域里怎样滚动变换位置,输出位置都不变,left、main、right区都会分别从左到右排列。

重构也有好玩的东西,好玩之余也可以想想;

这样做的优点:

  • 结构可任意调整却不影响输出(信息量大而且用户网速慢时优先显示重要部分)
  • 优先让搜索引擎抓取重要内容
  • 用作高难度面试题(有必要?)
  • 忽悠小MM

这样做的缺点:

  • 代码不简洁,实现这样的三栏布局可用3个div解决,这里用了6个(致命)
  • 可能增加重构难度

代码如下(我要看demo),有一个地方想不明白,#in区的负边距可用大于mian宽度但小于1400px的任何整数值。#out区的负边距则可用大于right的任何整数值,为什么呢? 继续阅读

用float精确定位div+css

用position的relativeabsolute定位div不方便改动。用float就不折腾了,长宽定义不溢出就行了,float的详细可以看这里,里面的实例更清晰。详细代码和效果如下。

<-点击看大图。

看起来每个div间都有2px距离,因为定义了边框border-width:1px,等同于div外加多一个1px,所以margin、height和width计算时像做小学计算题。以下是代码部分,两个文件放在同一文件夹就行了。

继续阅读