Less——嵌套與繼承
相比于傳統的css，LESS增加了幾個核心功能，如變量、混合、函數等，讓頁面的樣式動態起來了。上一章介紹了LESS中函數的使用和規范，本章來介紹一下LESS的嵌套與繼承。一，嵌套Less 提供了使用嵌套代替層疊或與層疊結合使用的能力。我們之前選擇器層疊使用如圖所示：結構復雜且冗余，編寫起來十分不方便，而Less的嵌套寫法如圖：用 Less 書寫的代碼更加簡潔，并且結構上更符合 HTML 的組織結構...
如何讓文字擁有漸變效果（限webkit內核瀏覽器）
設計出了一個這樣的需求，需要有一個數字擁有正常的顏色，但當鼠標放上去的時候要變成漸變色，大家都知道，css是沒有顏色漸變這個屬性的，只有背景顏色的漸變，這里有兩種實現方法。 1.讓設計把字給你摳出來 這里扣圖片對于瀏覽器的兼容性非常好，會兼容基本上所有瀏覽器，圖片可以任意大小，但要求底色與div盒子中底色一致，這樣視覺上不會有問題，而我們可以直接改變圖片所屬div的背景顏色，就能實現通...
Less中變量的使用
上一章已經簡單介紹了一下常用的css預處理器Less。本章我們著重講解一下變量有關知識。變量命名規范：1.必須有 @ 為前綴2.不能包含特殊字符3.不能以數字開頭4.大小寫敏感變量的基本使用如圖所示：除此之外，變量還可以作為插值使用，變量可以用于選擇器名、屬性名、URL、@import語句。再來介紹一下變量的延遲加載特性：當一個變量被聲明多次，會取最后一次的值，并從當前作用域往外尋找變量。如以下語...
常見的css預處理器——Less
在學習less之前，我們需要對css有簡單的了解，CSS 是一門非程序式語言，沒有變量、函數、SCOPE（作用域）等概念。CSS 需要書寫大量看似沒有邏輯的代碼，冗余度是比較高的。不方便維護及擴展，不利于復用。也沒有很好的計算能力。而Less是一門向后兼容的 CSS 擴展語言，也稱為 CSS 預處理器。在 CSS 的語法基礎上，引入了變量，Mixin，運算以及函數等功能，簡化了 CSS 的編寫，并...
CSS之vertical-align用法詳解
今天來介紹css中一個常用的屬性：vertical-align，vertical-align 屬性主要用來設置元素的垂直對齊方式。注意：vertical-align 屬性只能用于行內元素和置換元素（例如 圖像和表單輸入框），此屬性不繼承。vertical-align常用屬性值：baseline：默認值， 讓元素的基線與父元素文本的基線對齊。。top：令元素的頂端對齊；middle：元素的垂直中心點...
2023-10-21
利用jq和陰影做出消失效果
需求如下： 實現效果要求鼠標通過不同的標題時，根據索引值呈現不同的下拉條內容，如果大家會自己寫動畫的話，實現效果肯定比使用jq好很多，而且更加靈活。 這里我們先看一下結構。parasitism被隱藏。我們這里需要給parasitism一個下方10px模糊度為10的灰色陰影 我們引入jQuery，鼠標放到導航條上可以使用mouseover與mouseout或者hover來實現，我...
