页面组件

页面组件

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对应的是多边形各个坐标点

转载于:https://www.cnblogs.com/luck-L/p/9392859.html