卜卜口の猫窝

在Otaku和常人之间徘徊!

HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。

设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。

上面这些当我没说, 具体可以参考wiki甚至百度百科

HTML – 维基百科,自由的百科全书 zh.wikipedia.org/zh-cn/html
html_百度百科 baike.baidu.com/view/692.htm

相信看完百科,大家都应该了解一些关于HTML的内容,至于Hello world,直接跳过,好吧

在编写自己的网页之前,你需要找一个用着顺手的文本编辑器,来编辑你的网页

推荐一些比较好用的编辑器:
1, Dreamweaver 集网页制作和管理网站于一身的所见即所得网页编辑器;
2, UltraEdit 能够满足你一切编辑需要的编辑器;
3, Notepad2 增强版Notepad, 完全可以胜任网页编辑的工作;
4, EmEditor 没有UE那么强大,但是功能要比Notepad2强大.
甚至可以使用windows自带的记事本.

Web 设计软件，HTML 编辑器 | Adobe Dreamweaver CS5
www.adobe.com/cn/products/dreamweaver

UltraEdit Text Editor | UltraCompare file compare
www.ultraedit.com

flo＇s freeware – Notepad2
www.flos-freeware.ch/notepad2.html

EmEditor Text Editor – Unicode text editor for Windows suppor…
www.emeditor.com

找到了和手的编辑器之后,就开始做你的第一个网页吧

我们从网页的头部开始写起

以上是我的最基本开头部分,
＜!DOCTYPE＞ 标签是用来声明你的HTML使用的是哪种网页标准,我们经常见到的网页其实正在使用的是W3C推荐的XHTML网页标准.并非HTML
XHTML和HTML基本一致,但语法要比HTML严格.更适合我们编写严谨的网页

XHTML 1.0目前规定了三种网页标准 Strict, Transitional 和 Frameset.
其中Transitional要求相对松散, 很容易即可通过XHTML的检测
Frameset则允许我们使用框架结构,在XHTML基本废弃
推荐大家使用更严格的Strict作为你的网页标准, 虽然大家会觉得Transitional更易于使用,但相对的以后有可能面临的网页问题也会增加.
而且Strict可以更平滑的过渡到XHTML1.1 大部分时候只需更改＜!DOCTYPE＞即可

＜html＞ 标签限定了文档的开始点和结束点, xmlns属性用来在HTML文档中定义命名空间, 用来控制浏览器定义于该元素中的内容. 大多数情况下只需定义在html标签上面即可
＜head＞ 标签用于定义HTML文档的头部，它是所有头部元素的容器.
常用的头部元素有＜base＞, ＜link＞, ＜meta＞, ＜script＞, ＜style＞, ＜title＞.
＜base＞标签用来定义HTML文档的根目录路径, 用于补全文档中的一部分使用相对路径定义的文件元素的地址,在XHTML里面必须被正确闭合.
＜link＞标签用来定义HTML文档与外部资源的关系. 常用的外部资源有CSS文件(层叠样式表),javascript文件(客户端脚本),icon文件(网页的图标)等等..
＜meta＞元素用来提供有关当前HTML文档的相关信息. 常用的文档信息有description(简介),keywords(关键字),author(作者)等等…
＜script＞元素用来定义客户端脚本,既可以包含脚本语句,也可以直接指向外部脚本文件. 在XHTML里面必须定义type,
＜style＞元素用来定义CSS(层叠样式表)信息,CSS规定了浏览器如何呈现当前的HTML文档. 在XHTML里面必须定义type,

文章作者卜卜口の,转载请注明出处及卜卜口の猫窝链接
待续…

本文来自: 自己动手写网页 第一章

应用效果地址: asuka.tk/51740

以下也是效果的预览^_^, 为了代码的简洁,不支持IE6. 为IE6用户预留了a标签链接.

@山茶 @UUltraman 恩,使用DIV+CSS实现的效果^_^

以下是CSS部分的代码:

以下html部分代码:

废话不多说.
原理是通过伪类:hover,使鼠标移动到图片上面的时候, 将大小从 361×148 调整到 500×200,.

并利用 position:absolute 将其固定在第一次显示时的文档流的位置上面,

然后再通过 margin 调整位置, 最后通过 z-index:10 使它在最顶层显示不被其他元素覆盖, 达到最后显示出来的效果.

但此刻图片会和下面的内容重合,这时就需要 img 的上一级 a 标签把 img 所用的空间挤出来

通过display:inline-block 使a标签显示为行内块元素,并定义其宽高.这里如果定义成block的话 会导致换行..

在IE6实现图片弹出显示思路

以上就是全部实现思路,如果你有更好的建议,意见和问题希望我们能一起探讨 ^_^

如果对IE6有要求的话,请在回复中提出.卜卜口の简单说一下自己的思路:

将img标签的宽高度设为100%,将图片的宽高度定义在display:inline-block的a标签上面,在a标签上面定义:hover.

a标签的宽高度继承到img标签上面.由此实现在IE6中的图片弹出效果.

不知上面的思路可不可行,有兴趣的话可以自己动手实验一下!并将你试验的结果和大家一起分享吧~

2010-04-10 19:56 再次更新

以下代码支持在IE6上面的图片弹出显示效果!

实现思路在昨天的末尾

本文来自: DIV+CSS实现弹出显示图片大图效果[更新]