CSS+HTML經常使用功能

 

1.設置導航條

.wcontent::-webkit-scrollbar-track-piece {
  background-color: #f5f5f5;
}
.wcontent::-webkit-scrollbar {
  width: 2px;
  height: 2px;
}
.wcontent::-webkit-scrollbar-thumb {
  background-color: #c2c2c2;
  background-clip: padding-box;
  min-height: 28px;
}

/*IE滾動條顏色設置*/
body {
    scrollbar-arrow-color:#f2f2f3;  /*上下箭頭*/
    scrollbar-track-color:#1589ce;  /*底層背景色*/
    scrollbar-face-color:#27aeff;   /*滾動條前景色*/
    scrollbar-Shadow-color:#1589ce; /*滾動條邊線色*/
}
/*chrome滾動條顏色設置*/
body::-webkit-scrollbar {width:10px; height:10px; background-color:transparent;} /*定義滾動條高寬及背景 高寬分別對應橫豎滾動條的尺寸*/
body::-webkit-scrollbar-track {background-color:#ccc; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);} /*定義滾動條軌道 內陰影+圓角*/
body::-webkit-scrollbar-thumb {background-color:#555; border-radius:10px; -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);} /*定義滑塊 內陰影+圓角*/

 

2.特殊字符集

⊙●○①⊕◎Θ⊙¤㊣★☆♀◆◇◣◢◥▲▼△▽⊿◤ ◥
▆ ▇ █ █ ■ ▓ 回 □ 〓≡ ╝╚╔ ╗╬ ═ ╓ ╩ ┠ ┨┯ ┷┏
┓┗ ┛┳⊥『』┌ ┐└ ┘∟「」↑↓→←↘↙♀♂┇┅ ﹉﹊﹍﹎╭
╮╰ ╯ *^_^* ^*^ ^-^ ^_^ ^（^ ∵∴‖｜ ｜︴﹏﹋﹌（）〔〕
【】〖〗＠：！/ " _ < > `,·。≈{}~ ～() _ -『』√ $ @ * & # ※
卐 々∞Ψ ∪∩∈∏ の ℡ ぁ §∮」〃ミ灬ξ№∑⌒ξζω＊??ㄨ ≮≯ ＋
－×÷＋－±／＝∫∮∝ ∞ ∧∨ ∑ ∏ ‖∠ ≌ ∽ ≤ ≥ ≈＜＞じ
☆veve↑↓⊙●★☆■♀『』◆◣◥▲Ψ ※◤ ◥ →№←㊣∑⌒〖〗＠
ξζω□∮〓※∴ぷ▂▃▅▆█ ∏卐【】△√ ∩¤々♀♂∞①ㄨ≡↘↙▂
▶ ▷ ◀ ◁ ★ ☆ ⊙ ♠ ♡ ♣ ♤♥♧♨ 〠 〄 ㍿➳➴➵㊚㊛㊙℗♯♩♪♫♬♭♮ ☎ ☏ ⊙♨ º º ₪ ¤ 큐 « » の ↂ░ ▣ ▤ ▥ ▦ ▧ ▨ ▩ ♂ ♀ ☜ ☞ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▒ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪
✗✘✚✪✣✤✥✦✧✩｡◕‿◕｡ ❤❀✿♥♡ o(‧'''‧)o ๑ ۩ ۞ ۩ ๑ ㊐㊊㊋㊌㊍㊎㊏ ㊑㊒㊓㊔㊕㊖㊗㊘㊜㊝㊞㊟㊠㊡㊢ ㊣㊤㊥㊦㊧㊨㊩㊪㊫㊬㊭㊮㊯㊰
░ ▒ ▬ ♦ ◊ ◦ ♠ ♣ ▣ ۰•● ❤ ●•۰ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ♧♡♂♀♠♣♥❤☜☞☎☏⊙◎ ☺☻☼▧▨♨◐◑↔↕▪ ▒ ◊◦▣▤▥ ▦▩◘ ◈◇♬♪♩♭♪の★☆→あぃ￡Ю〓§♤♥▶¤ ๑⊹⊱⋛⋌⋚⊰⊹ ≈ ๑۩۩.. ..۩۩๑ ๑۩۞۩๑ ✲ ❈ ✿ ✲ ❈ ➹ ~.~ ◕‿-｡ ☀☂☁【】┱ ┲ ❣ ✚ ✪ ✣ ✤ ✥ ✦❉ ❥ ❦ ❧ ❃ ❂ ❁ ❀ ✄ ☪ ☣ ☢ ☠ ☭ ღღღ ▶ ▷ ◀ ◁ ☀ ☁ ☂ ☃ ☄ ★ ☆ ☇ ☈ ⊙ ☊ ☋ ☌ ☍ⓛⓞⓥⓔ ╬ 『 』∴ ☀ .｡◕‿◕｡ ♫ ♬ ♩ ♭ ♪ ☆ ∷ ﹌ の ★ ◎ ▶☺ ☻ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕↘ ☼ ▀ ▄ █ ▌░ ▒ ▬ ♦ ◊ ☜ ☞ ▐ ░ ▒▬ ♦ ◊ ◦ ☼ ♪ の ☆→ ♧ ぃ ￡ ❤ ｡◕‿◕｡ ✎ ✟ஐ
︻︼︽︾〒↑↓☉⊙●〇◎¤★☆■▓「」『』◆◇▲△▼▽◣◥◢◣◤ ◥№↑↓→←↘↙Ψ※㊣∑⌒∩【】〖〗＠ξζω□∮〓※》∏卐√ ╳々♀♂∞①ㄨ≡╬╭╮╰╯╱╲ ▂ ▂ ▃ ▄ ▅ ▆ ▇ █ ▂▃▅▆█ ▁▂▃▄▅▆▇█▇▆▅▄▃▂▁

 

3.超出幾行顯示省略號

超出幾行顯示省略號
//單行
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

//多行
overflow : hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;
-webkit-box-orient: vertical;

 

 

 4.MIME文件類型

常見的MIME類型(通用型)：
超文本標記語言文本 .html text/html
xml文檔 .xml text/xml
XHTML文檔 .xhtml application/xhtml+xml
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
PDF文檔 .pdf application/pdf
Microsoft Word文件 .word application/msword
PNG圖像 .png image/png
GIF圖形 .gif image/gif
JPEG圖形 .jpeg,.jpg image/jpeg
au聲音文件 .au audio/basic
MIDI音樂文件 mid,.midi audio/midi,audio/x-midi
RealAudio音樂文件 .ra, .ram audio/x-pn-realaudio
MPEG文件 .mpg,.mpeg video/mpeg
AVI文件 .avi video/x-msvideo
GZIP文件 .gz application/x-gzip
TAR文件 .tar application/x-tar
任意的二進制數據 application/octet-stream

 

 

5.鼠標浮上去input內容選中

 <input :placeholder="searchPlaceholder" class="search-input"  v-model="leftSearch"  vlaue="u548352" @mouseover="handleMouseover"  @paste="handlePaste">
 
 
handleMouseover (e) {
  if (e.target.value && e.target.value !== '') {
    e.currentTarget.select()
  }
}
//handlePaste粘貼事件
handlePaste (e) {
  let _that = this
  let time = setTimeout(function () {
    _that.$emit('serachChange', _that.leftSearch)
    clearTimeout(time)
  }, 1000)
}

 

 

6.文字方向

writing-mode：horizontal-tb | vertical-rl | vertical-lr | lr-tb | tb-rl
默認值：normal
適用於：除 <' display '> 屬性定義爲table-row-group | table-column-group | table-row | table-column以外的全部元素
繼承性：有
動畫性：否
計算值：特定值

horizontal-tb：
水平方向自上而下的書寫方式。即 left-right-top-bottom（相似IE私有值lr-tb）
vertical-rl：
垂直方向自右而左的書寫方式。即 top-bottom-right-left（相似IE私有值tb-rl）
vertical-lr：
垂直方向自左而右的書寫方式。即 top-bottom-left-right
lr-tb：
左-右，上-下。對象中的內容在水平方向上從左向右流入，後一行在前一行的下面。 全部的字形都是豎直向上的。這種佈局是羅馬語系使用的（IE）
tb-rl：
上-下，右-左。對象中的內容在垂直方向上從上向下流入，自右向左。後一豎行在前一豎行的左面。全角字符是豎直向上的，半角字符如拉丁字母或片假名順時針旋轉90度。這種佈局是東亞語系一般使用的（IE）

writing-mode:{
  horizontal-tb,
  inherit,
  initial,
  lr,
  lr-tb,
  rl,
  rl-tb,
  tb,
  tb-rl,
  unset,
  vertical-lr,
  vertical-rl
}

 

 

7.打印屬性（分頁）

page-break-after:設置元素後的分頁行爲
page-break-before:設置元素前的分頁行爲
page-break-inside:設置內部元素的分頁行爲

 

 

8.文字縮進兩個字符

text-indent: 2em;

 

 

9.有光澤的按鈕

background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);