頁面組件

頁面組件

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對應的是多邊形各個座標點