CSS高級技巧（1）css用戶界面樣式

css用戶界面樣式

鼠標樣式cursor

cursor : default 小白 | pointer 小手  | move 移動 | text 文本

儘量不要用hand 因爲火狐不支持 pointer le6以上都支持的儘量使用

<ul>
    <li style="cursor:default">小白箭頭</li>
    <li style="cursor:pointer">小手樣式</li>
    <li style="cursor:move">移動樣式</li>
    <li style="cursor:text">文本樣式</li>
</ul>

 

輪廓 outline

<style>
    input {
        outline: 1px solid red;    /*邊框外輪廓線*/
        outline: 0;    /*不常用，可設置0清除掉*/
    }
</style>

 

防止拖拽文本域 resize

<textarea></textarea>    /*右下角可以拖拽*/
<textarea style="resize: none;"></textarea>    /*右下角不可以拖拽*/

 

vertical-align 垂直對齊

可用於行內塊與文字對齊

/*
margin: 0 auto;    塊級元素居中對齊
text-align: centerl    文字居中對齊
*
<style>
    img{
        vertical-align: baseline ;    /* 默認 */
        vertical-align: top;        /* 頂線 */
        vertical-align: middle;    /* 居中對齊      常用*/
        vertical-align: bottom ;    /* 底部 */
    }
<style>

 

去除圖片底部空白縫隙

圖片或表單等行內塊元素，他的底線會和父級盒子的基線對齊，造成問題：圖片底側有一個空白縫隙

解決辦法：

1.將其 添加 vertical-align: middle | top 等。讓圖片不要和基線對齊

2.將其轉換爲塊級元素

<style>
    img{
        display: block;    /* 轉換爲塊級元素 */
    }
<style>