一:html语法之--使用图像映射
1 什么是图像映射
所谓图像映射是指在一幅图中定义若干个区域,每个区域中指定一个不同的超链接,当单击不同的区域时便可以跳转到相应的目标页面。
2 创建图像映射
2.1 定义映射区域
定义映射区域使用MAP标记符,在<MAP>和</MAP>之间添加映射区域。添加映射区域使 用AREA标记符。该标记符具有三个基本属性:
href 标识出目标的URL
shape 说明映射区域的形状。取值可是:
rect 矩形
circle 圆形
poly 多边形
default 整个图像区域 coords 用于标识映射区域的边界。
2.2 对映射区域进行引用
标记了映射区域之后,就可以通过在IMG标记符中使用usermap属性来引用相应的映射信息。
一个完整的图像映射语法如下:
<map name="mymap">
<area href=URL1 shape=rect coords="x1,y1,x2,y2">
<area href=URL2 shape=circle coords="x,y,r">
<area href=URL3 shape=poly coords="x1,y1,x2,y2,...,xn,yn">
</map>
<img src=image_URL usemap=#mymap>
注意:map标记符中,name属性的取值必须与img标记符中,usemap属性的取值相同,只是usemap属性的值前面多了一个# 。
二、fieldset 元素可将表单内的相关元素分组。
<fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。
<legend> 标签为 fieldset 元素定义标题。
eg: <body>
<fieldset style="300px;color:red">
<legend><font color="blue">★ 审核状态</font></legend>
<form>
<input type="radio" name="state">已经审核
<input type="radio" name="state">没有审核
<input type="radio" name="state">全部
</form>
</fieldset>
</body>
三、CSS中的常用四种选择器
1.类选择器(class)
2.id选择器
3.html元素选择器
4.通配符选择器
我们希望所有的超链接
(1)默认样式是黑色,24px,没有下划线
(2)当鼠标移动到超链接时,自动出现下划线
(3)点击后,超链接变成红色。这又该怎么实现呢?
a:link{
color:black;
text-decoration:none;
font-size:24px;
}
a:hover{
text-decoration:underline;
font-size:40px;
color:green;
}
a:visited{
color:red;
}
/*对同一中html 元素分类*/
p.cls1{
color:blue;
font-size:30px;
}
p.cls2{
color:red;
font-size:20px;
}
四、四个选取器优先权
Id 选择器> class 选择器> html 选择器> 通配符选则器
五、常见的行内元素和块元素
常见的行内元素有<a> <span> <inpu type=”xxx”>
常见块元素有<div> <p>
行内元素和块元素可以转换
使用
Display: inline 表示使用行内元素方式显示
Display: block 表示使用块元素方式显示
六、浮动
浮动在div+css 中浮动分为左浮动,右浮动,清除浮动
右浮动
所谓右浮动,指一个块元素向右移动,让出自己空间,向右移动直到碰到包含自己的父元素的最右边的边框.
左浮动
所谓左浮动就是指: 某个块元素尽量向左边移动,这样就让出它右面的空间,让别的块元素显示.
如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:直到有足够空间.
七、定位
常见的定位有四种
1. static 定位(默认值) 【left 和top 无效】//left top 属性对static 没有效果, static 定位是靠margin-left margin-top 来移动位置的.
2. relative 相对定位 (空余部分不会被占用)
3. absolute 绝对定位(空余部分会被补齐)
4. fixed 固定定位.
所谓相对定位是指,相对该元素应当显示的左上角重新定位,虽然它脱离的标准流,但是它的空间,不能被占用.
所谓绝对定位是指,对该元素最近的那个脱离了标准流的元素定位,如果没有父元素(或者有父元素,但是父元素没有脱离标准流),则相对body 左上角定位.
所谓fixed 定位就是不管怎样,总是以视窗的左上角定位.
z-index用于设置对象(div) 显示时候,层叠的属性, z-index 值越小,则越在下层显示!!