Ju2ender

======================================================
注：本文源代码点此下载
======================================================

*持续更新中

下面列出了本篇的13条小知识,点击跳转:

1. 为网页添加标题栏图标

2. font标记的替代标记

3. 设置段落间距和行间距

4. 去掉无序列表ul标记中的项目标记

5. 设置层居中

6. 设置透明层

7. 为表单元素分组

8. 定义链接样式

9. 添加qq临时会话链接

10. 上标与下标

11. 文本框中的提示

12. 我的html页面中可以使用哪些元素呢？

13. 用label标签让表单更友好

1. 为网页添加标题栏图标

相信细心的大家浏览网页时会经常看到,网站显示的标题左侧还有个小图片:

为自己的网站加上个,多个性~

(1) 准备自己的图片,大小、格式随意,在网站下建个放置图片的文件夹,我起名叫images,将图片放入其中;

(2) 在页面的head标记中加入一行代码:

type中的内容,根据你自己的图片格式而定,href中链到准备好的图片。经过测试,gif格式的图片也是可以被加上去的,type改为image/gif即可。

看看自己的网页,在标题旁是不是也有了个小图片呢?  : )

 

2. font标记的替代标记

用visual studio编写html时,使用font标记会提示font标记已过时:

可以用span标记替代font。

 

3. 设置段落间距和行间距

段落标记为p,大家都知道p也是盒子模型,所以段落间距设置p的margin即可;

行间距则用样式line-height控制,后面跟上你想要的值,注意,这个值包含了三部分内容:行的上部高度、行内容的高度、行的下部高度。若设置一个层的line-height,里面的元素都会应用该高度,无论是p还是div、span。

 

4. 去掉无序列表ul标记中的项目标记

用ul制作菜单时,会想把这个讨厌的项目标记去掉,方法很简单,将li的list-style-type设置为none即可。

 

5. 设置层居中

为目标层加入以下样式即可:

#content {

width: 90%;

text-align: center;

margin: 0 auto;

}

确保层有宽度,绝大部分浏览器在设置margin的上下距离为0,左右距离自动后,就居中了,但ie6以下的浏览器不识别,所以就加上text-align: center;加以补救。

 

6. 设置透明层

很简单,用滤镜搞定:

filter: alpha(opacity=80);

opacity: 0.8;

为目标层加上这两个样式即可,80和0.8可随意改动。

 

7. 为表单元素分组

使用html标记,外观类似于winform中的groupbox:

对应的代码为:

我的名片

ju2ender

blog: ju2ender.cnblogs.com

fieldset标记就是外面的边框,legend标记中放标题,内容自己可随意排版。fieldset的样式同样是可以自定义的。

 

8. 定义链接样式

css中用四个伪类来定义链接样式,分别是:a:link、a:visited、a:hover和a:active,例如:

a:link {

font-weight: bold;

text-decoration: none;

color: #c00;

}

a:visited {

font-weight: bold;

text-decoration: none;

color: #c30;

}

a:hover {

font-weight: bold;

text-decoration: underline;

color: #f60;

}

a:active {

font-weight: bold;

text-decoration: none;

color: #f90;

}

以上样式分别定义了:链接、已访问过的链接、鼠标停在上方时、按下鼠标时的样式。注意,必须按以上顺序写,否则显示可能与你预想的不一样。记住他们的顺序是lvha。

 

9. 添加qq临时会话链接

设置链接地址为tencent://message/?uin=qq号,即可:

talk with ju2ender :)

 

10. 上标与下标

上标:

22thcentury

下标:

h2o

下面是效果

 

11. 文本框中的提示

我们浏览一些网页会看到在textbox中会灰色提示,点击后消失或输入内容后消失,如淘宝的登录:

但它写的比较复杂,而我们用一个属性搞定!在textbox中加上placeholder,写上你需要提示的话:

是不是很方便呢 :d

 

12. 我的html页面中可以使用哪些元素呢?

html 4.01/xhtml 1.0参考中可以找到所有允许使用的html元素:

http://www.w3schools.com/tags/default.asp

 

13. 用label标签让表单更友好

不知大家有没有遇到过这样的情况,在表单中使用单选框或复选框时单击前面的描述文字没法选中该单选框或复选框,必须点击该单选框或复选框才行。

那怎么才能实现选中描述文字也会选中呢?使用label标签。示例中演示了两个性别单选框:

male

female

label标签有个for属性,将其中填入相关联的表单元素的id即可实现关联,点击male与female会选中其后的单选框。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/