html学习的一点基础技巧（1）

首先，介绍下简单的图片与文字叠放在一起时的效果显示：

1.vertical-align属性

//控制图片对齐格式，设置或检索对象内容的垂直对齐方式

baseline：

将支持valign特性的对象的内容与基线对齐

sub：

垂直对齐文本的下标

super：

垂直对齐文本的上标

top：

将支持valign特性的对象的内容与对象顶端对齐

text-top：

将支持valign特性的对象的文本与对象顶端对齐

middle：

将支持valign特性的对象的内容与对象中部对齐

bottom：

将支持valign特性的对象的文本与对象底端对齐

text-bottom：

将支持valign特性的对象的文本与对象顶端对齐

<length>：（XXpx）

用长度值指定由基线（基线是指：文字部分首行文字底部，向上偏移的为正值，反之，为负值）算起的偏移量。可以为负值。基线对于数值来说为0。

<percentage>：(xx%)

用百分比指定由基线算起的偏移量。可以为负值。基线对于百分数来说就是0%。

 2.设置vspace （垂直方向）和hspace（水平方向）两个属性

<img src=”url” hspace=xx>yyyyy

!!!注意此处hspace/vspace的不要加上px单位，直接写数字即可

接下来，介绍下其他一些关于链接的基本技巧：

a.

关于网页后退键的设置处理：

<a href="javascript:history.go(-1)">后退</a>

上面的代码可以实现“后退”的动作。

b.

对邮箱的直接快捷链接

<a href="mailto:huizhao@foxmail.com?subject=联系我;body=告诉我们你对网页设计的想法?">

//这样用户的电脑会自启动outpress邮箱服务，准备往指定邮箱地址发送信息

c.

利用先进的map属性进行链接

这种链接的好处在于用户可以通过点击图片的不同部分，完成不同的链接。具体操作如下所示：

<imgsrc=””/usemap=#Map>

<mapname=”Map”>

<areashape=”此处填写区域形状” cords=”区域的各个参数” href=”链接地址”>

<area shape="rect"coords="246,105,298,135" href="后退.html">

…

</map>

d.

自定义超链接的下划线（譬如用图片的repeat-x形式代替传统的下划线，显得界面更加美观）

（通过改变<a>的属性）奉上代码：

a {

             text-decoration: none;

            padding-bottom: 15px;//必须考虑到图像不能覆盖原本链接文字部分

            background: url(图片/手.png)bottom repeat-x;//横向根据链接长度进行填充

            }

说到这里，还需要考虑一个问题，那就是制作网页对图片的选取问题

值得注意的是，一般用作logo等需要透明度高的图片，建议用png格式的图片。