css滑鼠變成小手 技巧篇 CSS高階技巧詳解

2021-10-11 06:55:43 字數 1970 閱讀 9471

display -- block;(轉換為塊元素&& 顯示) none(隱藏 && 不保留原來的位置) --重要!

visibility -- visible(顯示) hidden (隱藏 && 保留原來的位置 )

複習:overflow:hidden; 1.之前解決父子關係垂直巢狀的合併塌陷問題。2.清除浮動
overflow -- hidden 內容超出的部分隱藏(重點的) scroll(強制出現滾動條樣式) auto(根據內容多少來判斷是否出現滾動條 )

目的:為了有效地減少伺服器接受和傳送請求的次數,提高頁面的載入速度

實現原理: 只請求一張圖 --只是展示不同位置的小圖。

案例使用:

background-image 背景

background-repeat 是否平鋪

background-position 背景定位

小小注意點:

1.精靈技術主要針對背景,插入的img不需要這個技術

2.需要測量每個小背景的大小和位置

3.給盒子指定小的背景時,背景定位基本都是負值

優勢:瀏覽器支援性比較好,靈活性大;體積小,載入速度快,節省頻寬流量;減輕伺服器壓力。

1.把包包裡面的font資料夾複製出來乙份,放在我們專案根目錄。

2.在html檔案標籤裡面新增結構

3.在html檔案樣式style裡面宣告字型:告訴**和別人使用我們自己自定義的字型(一定注意路徑問題)

4.給盒子設定字型即可

原來的不能刪除,繼續使用,此時我們需要這樣做

本質:還是利用了盒子的邊框

做法:1.寬高為 零

2.四個邊都要的,只保留我們需要的邊框顏色,其他的 顏色透明即可。

3.為了照顧相容問題,設定:line-height:0; font-size:0;

三角形案例:    .demo                 i
我是預設的小白鼠標樣式       我是滑鼠小手樣式       我是滑鼠移動樣式       我是滑鼠文字樣式       我是滑鼠禁止樣式   ​cursor:pointer; -- 記住!cursor:move; --記住!cursor:not-allowed; --記住!outline: 0/ none; ----- 去掉輪廓線

resize:none;

div                 img ​
1.必須強制一行顯示 white-space:nowrap;

2.超出部分隱藏 overflow:hidden;

3.文字省略號代替超出的文字 text-overflow:ellipsis;

overflow: hidden;            /*文字省略號代替*/            text-overflow: ellipsis;            /* 彈性伸縮盒子模型顯示 */            display: -webkit-box;            /* 限制在乙個塊元素顯示的文字的行數 */            -webkit-line-clamp: 3;            /* 設定或檢索伸縮盒物件的子元素的排列方式 */            -webkit-box-orient: vertical;
前置知識點:

relative -- 相對定位佔位置

absolute --- 絕對定位不佔位置

float ---- 浮動不佔位置

浮動 -- 壓不住下面標流的和文字。

text-align:center --- 給父親元素新增,可以讓子盒子(行內塊/行內元素)水平居中。

div ​

css 滑鼠變成小手

nm use ver this.style.cursor hand cursor其他取值 auto 標準游標 default 標準箭頭 pointer,hand 手形游標 wait 等待游標 text i形游標 vertical text 水平i形游標 no drop 不可拖動游標 not allo...

css滑鼠變成小手 CSS總結四(前端一)

day9 1.css高階技巧 1.元素的顯示與隱藏 display 隱藏物件,不保留位置 none,block visibility 隱藏物件,保留位置 hidden,visible overflow 只隱藏超出盒子部分 auto 2.使用者介面樣式 滑鼠樣式 cursor default 預設 p...

css滑鼠樣式 css滑鼠小手

青嵐影視 www.qldyy.net 例子 css滑鼠手型效果 css滑鼠手型效果 例子 css滑鼠手型效果 css滑鼠手型效果 例子 css滑鼠十字型 效果 css滑鼠十字型 效果 help是問號 例子 css滑鼠問號效果 css滑鼠問號效果 下面寫法都一樣,這裡就不一一寫完了。e resize是...