利用高效的css提高你的開發效率~(下)

NO IMAGE

利用高效的css提高你的開發效率~(下)

18。豎文排版

<div style="writing-mode: tb;color: darkorange;">
伊人山水間,<br />
蘆葦河畔。<br />
逝水流年,轉輪迴。<br />
將軍沙場,<br />
難歸還~!<br />
</div>

利用高效的css提高你的開發效率~(下)

19.overflow-x排版橫向列表

.video_list {
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.video_list li {
margin-right: 25px;
width: 150px;
height: 80px;
line-height: 80px;
display: inline-block;
border-radius: 5px;
background-color: orangered;
overflow: hidden;
text-align: center;
}
.video_list li:nth-last-child(1) {
margin-right: 0;
}
/* 消除滾動條 */
.video_list::-webkit-scrollbar{
display: none;
}
<ul class="video_list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>

利用高效的css提高你的開發效率~(下)

20、nth-child 奇數偶數行換色

<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
<li>6666</li>
</ul>
ul {
list-style-type: none;
}
ul li {
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
margin-bottom: 10px;
}
ul li:nth-child(odd) {
background-color: aquamarine;
}
ul li:nth-child(even) {
background-color: orangered;
}

利用高效的css提高你的開發效率~(下)

21、letter-spacing排版倒序文本

<div
style="color: coral;
font-size: 30px;
letter-spacing: -65px;"
>一段錯落的文本</div>

利用高效的css提高你的開發效率~(下)

22、pointer-events禁用事件觸發

通過pointer-events:none禁用事件觸發(默認事件、冒泡事件、鼠標事件、鍵盤事件等),相當於的disabled
場景:限時點擊按鈕(發送驗證碼倒計時)、事件冒泡禁用(多個元素重疊且自帶事件、a標籤跳轉)

<ul>
<li><a href="https://developer.mozilla.org/">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://example.com"] {
pointer-events: none;
}

利用高效的css提高你的開發效率~(下)

23、filter 置灰網頁

filter:grayscale()
在HTML插入就行 自己動手試試~

24、使用caret-color改變光標顏色

<input type="text" name="" class="input1">
<input type="text" name="" class="input2">
.input1 {
caret-color: red;
}
.input2 {
caret-color: blue;
}

利用高效的css提高你的開發效率~(下)

25、首字母大寫

.css {
text-transform: capitalize;
}
<!--text-transform 介紹-->
<!--none:默認。定義帶有小寫字母和大寫字母的標準的文本。-->
<!--capitalize:文本中的每個單詞以大寫字母開頭。-->
<!--uppercase:定義僅有大寫字母。-->
<!--lowercase:定義無大寫字母,僅有小寫字母。-->

利用高效的css提高你的開發效率~(下)

26、多列等高

.div {
width: 100%;
display: flex;
}
.div2 {
flex: 1;
background-color: #aaa;
width: 33%;
border: 1px solid red;
margin: 3%;
}
<div class="div">
<div class="div2">
佔位內容佔位內容佔位內容佔位內容佔位內容佔位內容佔位內
容佔位內容佔位內容佔位內容佔位內容佔位內容佔位內容佔
位內容佔位內容佔位內容佔位內容佔位內容佔位內容佔位內
容佔位內容佔位內容佔位內容佔位內容容佔位內容佔位內容容佔位內容佔位內容容佔位內容佔位內容
</div>
<div class="div2">另一個內容</div>
<div class="div2">另一個內容另一個內容另一個內容另一個內容另一個內容另一個內容</div>
</div>

利用高效的css提高你的開發效率~(下)

待續。。。。

相關文章

redis系列:通過demo學習string命令

redis系列:redis介紹與安裝

java多線程系列:ThreadPoolExecutor源碼分析

java多線程系列:ThreadPoolExecutor