页面组件
页面组件
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='链接' target='_blank'(在新浏览器窗口打开) title='ha'(指针移动到该链接处时会显示ha) download (下载，若链接为浏览器无法打开的格式，不写download也会进行下载)>text/图片</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 图片
<img src='路径' alt='不存在是显示我' title='鼠标移到这里显示我' usemap='图片映射时使用我'>
图片映射
<map name='与上面usemap中的值对应'>
<area shape='rect' coords='22,22,123,120'(代表选中的左上点与右下点) title='鼠标移到这里显示我' target = '_blank' href='跳转的地址'>
</map>
其余两种shape的值
circle对应的coords为圆心坐标与半径r
poly对应的是多边形各个坐标点
