页面组件

1 CSS属性/尺寸/边框/背景

尺寸

width max-width min-width
height max-height min-height

边框

border-style 边框风格：solid实线/dotted点线/dashed虚线/double双实线/none无
border-color：边框颜色
border-width：边框宽度
border：复合属性 2px solid #555 (无顺序要求)

内边距

padding-left：左边距
padding-right：右边距
padding-top：上边距
padding-bottom：下边距
padding：

    20px；四边都20
    20px 40px；上下20，左右40
    20px 40px 60px：上20，左右40，下60
    10px 20px 30px 40px：上右下左

背景属性

background-color 背景颜色 transparent为默认的颜色，代表透明
background-image：url()

背景图片平铺设置

background-repeat:repeat;默认
                  no-repeat;不平铺
                  repeat-x;水平平铺
                  repeat-y:竖直平铺

背景图片位置

background-position:left top;左上(默认)
                    right center;右中
                    10px 10px(相对于左上的距离)

背景附件(固定)

background-attachment:fixed;背景图片相对屏幕位置固定

复合属性

background: #ccc url() no-repeat 10px 10px; (无顺序要求)

CSS Sprite 精灵图

利用background-position设置背景图片的位置
把很多小的图片集成在一张大图上
好处：减少网络请求次数

2 超链接

a元素

特殊用法

发邮件：<a href='mailto:邮箱号'>text</a>
发短信：<a href='sms:手机号'>text</a>
打电话：<a href='tel:手机号'>text</a>

路径

相对路径：./当前文件夹 ../上一层文件夹
绝对路径：url http://www.biadu.com/index.html
特殊的相对路径：/lesson/path/index.html

鼠标属性

cursor:pointer;鼠标移动过去会变手
       move;鼠标移动过去会变十字
       no-drop;鼠标移动过去会变禁止访问标识

锚点

第一种方式：a+name
<a href='#haha'>哈哈</a>
<a name='haha'></a>
第二种方式：a+id 可使用任意元素
<a href='#haha'>哈哈</a>
<div id='haha'>
</div>
使用锚点回顶部：
<a href='#'>回顶部</a>
#直接回到本页面顶部，若问空，则会重新加载

完整的url

http://www.badiu.com/path/demo/contents/index.php?a=100&b=300#mao1

协议protocol http
主机名hostname www.baidu.com / IP
路径 path /path/demo/contents/
文件名filename index.php
查询内容query ?a=100&b=300
锚点 #mao1

3 图片

图片映射

<map name='与上面usemap中的值对应'>
    <area shape='rect' coords='22,22,123,120'(代表选中的左上点与右下点) title='鼠标移到这里显示我' target = '_blank' href='跳转的地址'>
</map>
其余两种shape的值
circle对应的coords为圆心坐标与半径r
poly对应的是多边形各个坐标点