iT邦幫忙

2021 iThome 鐵人賽

DAY 17
0
  1. 什麼是介面樣式?

所謂的介面樣式,就是更改一些用戶操作樣式,以提高用戶體驗。

  1. 更改用戶的鼠標樣式

語法 :

li { cursor : pointer; }

        /*
        cursor: default;        小白游標(默認)
        cursor: pointer;        小手
        cursor: move;           移動
        cursor: text;           文本
        cursor: not-allowed;    禁止
        */

設置或檢索在對向上移動的鼠標指針採用何種系統預定義的光標形狀。

  1. 表單輪廓
  • 輪廓線 outline

給表單添加 outline : 0 ; 或者 outline : none; 樣式之後,就可以去掉默認的藍色邊框。

input { outline:none;}
  1. 防止表單文本域拖曳

實際開發中,我們文本域右下角是會設置成不可以拖曳的

textarea { resize:none;}

網頁中常見的一些三角形 可以直接使用CSS畫出來

選擇器 {
        width: 0;
        height: 0;
		line-height: 0; /*為了改善兼容性問題*/
		font-size:0;   /*為了改善兼容性問題*/
        border: 100px solid transparent;
        border-top: 100px solid salmon;
}

三角範例


上一篇
Day 16 CSS <網頁布局-定位布局-2.定位使用>
下一篇
Day 18 CSS <Sprite 精靈圖>
系列文
從零開始前端學習(HTML、CSS、JavaScript) 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言