前端經常使用的CSS代碼

時間 2019-12-16

標籤前端經常使用 css 代碼欄目 CSS 简体版

原文原文鏈接

本文首發於公衆號：小夭同窗，同步更新我的博客：故事膠片，轉載請署名。代碼不斷更新中！！ javascript

Demo預覽在這兒！！！！

代碼預覽Democss

補充

你們若是有經常使用的也能夠分享出來鴨！！！html

前提

平常開發中高頻使用的CSS代碼分享給你們，其中可能有不少你們常用的。歡迎你們提出更優的解決方法！！前端

Git地址

前端經常使用的CSS代碼html5

一、垂直居中對齊

.vc {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.vc {
   position:absolute;
   top: 50%;
   left: 50%;
   width: 100px;
   height: 100px;
   margin:-50px 0 -50px;
}
複製代碼

二、全屏顯示

html, 
body {
    position: fixed;
    width: 100%;
    height: 100%;
}
div {
    height: 100%;
}
複製代碼

三、不一樣a標籤連接使用不一樣樣式

// link

a[href^="http://"]{
    background: url(link.gif) no-repeat center right;
}
// emails
a[href^="mailto:"]{
    background: url(email.png) no-repeat center right;
}

// pdfs

a[href$=".pdf"]{
    background: url(pdf.png) no-repeat center right;
}
複製代碼

四、圖像灰度

img {
    filter: gray; 
    -webkit-filter: grayscale(1);
}
複製代碼

五、背景漸變更畫

bg {
    background-image: linear-gradient(#5187c4, #1c2f45);
    background-size: auto 200%;
    background-position: 0 100%;
    transition: background-position 0.5s;
}    
bg:hover {
    background-position: 0 0;
}
複製代碼

六、長文本自動換行

pre {
    white-space: pre-line;
    word-wrap: break-word;
}
複製代碼

七、模糊文本

.text {
   filter: blur(1px);
}
複製代碼

八、用CSS動畫實現省略號動畫

.point:after {
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    animation: ellipsis 2s infinite;
    content: "\2026";
}
@keyframes ellipsis {
    from {
        width: 2px;
    }
    to {
        width: 15px;
    }
}
複製代碼

九、樣式重置

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; } 
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }
複製代碼

十、清除浮動

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
複製代碼

十一、css元素透明

.transparent {
    filter: alpha(opacity=50); 
    -khtml-opacity: 0.5; 
    -moz-opacity: 0.5;   
    opacity: 0.5;     
}
複製代碼

十二、CSS引用樣式

blockquote {
    background: #f9f9f9;
    border-left: 10px solid #ccc;
    margin: 1.5em 10px;
    padding: .5em 10px;
    quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
    color: #ccc;
    content: open-quote;
    font-size: 4em;
    line-height: .1em;
    margin-right: .25em;
    vertical-align: -.4em;
}
blockquote p {
    display: inline;
}
複製代碼

1三、個性圓角

.borderRadius {
    border-radius: 4px 3px 6px 10px;
}
.borderRadius {
    border-top-left-radius: 4px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 10px;
}
複製代碼

1四、通用媒體查詢

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  /* Styles */
}
@media only screen and (min-width : 321px) {
  /* Styles */
}
@media only screen and (max-width : 320px) {
  /* Styles */
}
/* iPad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  /* Styles */
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
  /* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  /* Styles */
}
/* 桌面 */
@media only screen and (min-width : 1224px) {
  /* Styles */
}

@media only screen and (min-width : 1824px) {
  /* Styles */
}

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
  /* Styles */
}
複製代碼

1五、自定義文本選擇

::selection { background: #e2eae2; }
複製代碼

1六、圖片邊框偏光

img.polaroid {
    background:#000; 
    border:solid #fff;
    border-width:6px 6px 20px 6px;
    box-shadow:1px 1px 5px #333; 
    -webkit-box-shadow:1px 1px 5px #333;
    -moz-box-shadow:1px 1px 5px #333;
    height:200px; 
    width:200px;  
}
複製代碼

1七、錨連接僞類

a:link { color: blue; }
a:visited { color: purple; }
a:hover { color: red; }
a:active { color: yellow; }
複製代碼

1八、全屏背景圖

html { 
    background: url('bg.jpg') no-repeat center center fixed; 
    background-size: cover;
}
複製代碼

1九、內容垂直居中

.center {
    min-height: 6.5em;
    display: table-cell;
    vertical-align: middle;
}
複製代碼

20、強制出現垂直滾動條

html { height: 101% }
複製代碼

2一、CSS3漸變模板

.bg {
    background: #629721;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#83b842), to(#629721));
    background-image: linear-gradient(top, #83b842, #629721);
}
複製代碼

2二、@font-face引用

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); 
    src: url('webfont.eot?#iefix') 
    url('webfont.woff') format('woff'), 
    url('webfont.ttf')  format('truetype'),
    url('webfont.svg#svgFontName') format('svg');
}
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}
複製代碼

2三、鏈接CSS3元素

p {
    position:relative;
    z-index:1;
    padding: 10px;
    margin: 10px;
    font-size: 21px;
    line-height: 1.3em;
    color: #fff;
    background: #ff0030;
    box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
p:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 3px;
    bottom: 3px;
    left :3px;
    right: 3px;
    border: 2px dashed #fff;
}
p a {
    color: #fff;
    text-decoration:none;
}
p a:hover, p a:focus, p a:active {
    text-decoration:underline;
}
複製代碼

2四、CSS斑馬線

tbody tr:nth-child(odd) {
    background-color: #ccc;
}
複製代碼

2五、 css&符號

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}
複製代碼

2六、內盒陰影

.div { 
    box-shadow: inset 2px 0 4px #000;
}
複製代碼

2七、外盒陰影

.div { 
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}
複製代碼

2八、三角形列表項目符號

ul {
    margin: 0.75em 0;
    padding: 0 1em;
    list-style: none;
}
li:before { 
    content: "";
    border-color: transparent #111;
    border-style: solid;
    border-width: 0.35em 0 0.35em 0.45em;
    display: block;
    height: 0;
    width: 0;
    left: -1em;
    top: 0.9em;
    position: relative;
}
複製代碼

2九、固定寬度的居中佈局

.div {
    width: 800px;
    margin: 0 auto;
}
複製代碼

30、CSS3列文本

.columnsText {
    text-align: justify;
    -webkit-column-count: 3;
    -webkit-column-gap: 12px;
    -webkit-column-rule: 1px solid #c4c8cc;
}
複製代碼

3一、CSS固定頁腳

footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}
複製代碼

3二、設置瀏覽器最小高度

.div{
    min-height: 550px;
    height: auto !important;
    height: 550px;
}
複製代碼

3三、CSS3輸入效果

input[type=text] {
    transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
input[type=text]:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}
複製代碼

3四、強制換行

pre {
    white-space: pre-wrap;        
    word-wrap: break-word;  
}
複製代碼

3五、在可點擊的項目上強制手型

.pointer {
    cursor: pointer;
}
複製代碼

3六、網頁頂部盒陰影

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}
複製代碼

3七、CSS3對話氣泡

.line {
    background-color: #ededed;
    border: 2px solid #666;
    font-size: 35px;
    line-height: 1.3em;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    border-radius: 20px;
    box-shadow: 0 0 5px #888;
}
.chat-bubble-arrow-border {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -42px;
    left: 30px;
}
.chat-bubble-arrow {
    border-color: #ededed transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -39px;
    left: 30px;
}
複製代碼

3八、持久的列表排序

ol.chapters {
    list-style: none;
    margin-left: 0;
}
ol.chapters > li:before {
    content: counter(chapter) ". ";
    counter-increment: chapter;
    font-weight: bold;
    float: left;
    width: 40px;
}
ol.chapters li {
    clear: left;
}
ol.start {
    counter-reset: chapter;
}
ol.continue {
    counter-reset: chapter 11;
}
複製代碼

3九、CSS懸浮提示文本

a { 
    border-bottom:1px solid #bbb;
    color:#666;
    display:inline-block;
    position:relative;
    text-decoration:none;
}
a:hover,
a:focus {
    color:#36c;
}
a:active {
    top:1px; 
}

a[data-tooltip]:after {
    border-top: 8px solid #222;
    border-top: 8px solid hsla(0,0%,0%,.85);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    content: "";
    display: none;
    height: 0;
    width: 0;
    left: 25%;
    position: absolute;
}
a[data-tooltip]:before {
    background: #222;
    background: hsla(0,0%,0%,.85);
    color: #f6f6f6;
    content: attr(data-tooltip);
    display: none;
    font-family: sans-serif;
    font-size: 14px;
    height: 32px;
    left: 0;
    line-height: 32px;
    padding: 0 15px;
    position: absolute;
    text-shadow: 0 1px 1px hsla(0,0%,0%,1);
    white-space: nowrap;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}
a[data-tooltip]:hover:after {
    display: block;
    top: -9px;
}
a[data-tooltip]:hover:before {
    display: block;
    top: -41px;
}
a[data-tooltip]:active:after {
    top: -10px;
}
a[data-tooltip]:active:before {
    top: -42px;
}
複製代碼

40、深灰色的圓形按鈕

.graybtn {
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#ffffff;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777777;
    font-family:arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0px #ffffff;
}
.graybtn:hover {
    background:gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1;
}
.graybtn:active {
    position:relative;
    top:1px;
}
複製代碼

4一、顯示a連接得URLs

@media print   {  
  a:after {  
    content: " [" attr(href) "] ";  
  }  
}
複製代碼

4二、禁用移動Webkit的選擇高亮

body {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
複製代碼

4三、CSS3 圓點圖案

body {
    background: radial-gradient(circle, white 10%, transparent 10%),
    radial-gradient(circle, white 10%, black 10%) 50px 50px;
    background-size: 100px 100px;
}
複製代碼

4四、CSS3 方格圖案

body {
    background-color: white;
    background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
    linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
    background-size: 100px 100px;
    background-position: 0 0, 50px 50px;
}
複製代碼

4五、CSS font屬性縮寫

p {
  font: italic small-caps bold 1.2em/1.0em Arial, Tahoma, Helvetica;
}
複製代碼

4六、論文頁面的捲曲效果

ul.box {
    position: relative;
    z-index: 1;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}
ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}
ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}
ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}
複製代碼

4七、鮮豔的錨連接

a {
    color: #00e;
}
a:visited {
    color: #551a8b;
}
a:hover {
    color: #06e;
}
a:focus {
    outline: thin dotted;
}
a:hover, a:active {
    outline: 0;
}
a, a:visited, a:active {
    text-decoration: none;
    color: #fff;
    transition: all .3s ease-in-out;
}
a:hover, .glow {
    color: #ff0;
    text-shadow: 0 0 10px #ff0;
}
複製代碼

4八、帶CSS3特點的橫幅顯示

.featureBanner {
    position: relative;
    margin: 20px
}
.featureBanner:before {
    content: "Featured";
    position: absolute;
    top: 5px;
    left: -8px;
    padding-right: 10px;
    color: #232323;
    font-weight: bold;
    height: 0px;
    border: 15px solid #ffa200;
    border-right-color: transparent;
    line-height: 0px;
    box-shadow: -0px 5px 5px -5px #000;
    z-index: 1;
}
.featureBanner:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -8px;
    border: 4px solid #89540c;
    border-left-color: transparent;
    border-bottom-color: transparent;
}
複製代碼

4九、限制單行文本超出顯示省略號

div{
    width: 65px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

複製代碼

50、限制多行文本超出省略號

div{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
複製代碼

5一、css三角形繪製

.sj {
    width: 0; 
    height: 0;
    border-width: 100px;
    border-style: solid;
}

.sj-left {
    border-color: transparent pink transparent transparent;
}

.sj-right {
    border-color: transparent transparent transparent pink;
}

.sj-top {
    border-color: transparent transparent pink transparent;
}

.sj-bottom {
    border-color: pink transparent transparent transparent;
}
複製代碼

5二、自適應文本框自動換行，限寬不限高

div{
    display: inline-block;
    min-height: 15px;
    max-width: 78%;
    padding: 12px 10px;
    text-align: left;
    font-family: Microsoft YaHei;
    word-wrap: break-word;
}
複製代碼

5三、 ~選擇器：查找某一個元素後面的全部兄弟元素

例如     .test~.name{background:red}
複製代碼

5四、 +選擇器：查找某一個元素後面緊鄰的兄弟元素

例如     .test+.name{background:red}
複製代碼

5五、用 font-size ：0 來清除邊距

5六、利用padding實現等比例縮放的盒子

最外層容器{
    display:flex;
    display:flex-box;
    flex-wrap:warp;
}
最外層容器 > 子元素{
    flex-basis:25%;
}
最外層容器 > 子元素 > 父元素{
    width:100%;
    padding-top:75%;
    position:relative;
}
最外層容器 > 子元素 > 父元素 > 子元素{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
複製代碼

5七、利用pointer-events禁用事件光標變成default阻止hover和hover以及JavaScript 點擊事件的觸發

pointer-events:none;
複製代碼

5八、利用 max-width 防止圖片撐破容器

img{
    max-width：100%；
    display：inline-block;
}
複製代碼

5九、僞類和僞元素的用法

// 僞類是用 : 來表示，僞元素是用 :: 來表示

    常見的僞類有：
    :hover
    :active
    :focus
    :visited
    :link
    :lang
    :first-child
    :last-child
    :not
    :nth-child
           
// 僞元素就是不存在DOM文檔樹中的虛擬元素，它們和HTML元素同樣，可是你又沒法使用javascript去獲取

常見僞元素
    ::before
    ::after
    ::first-letter
    ::first-line 
           
           
用 :valid  和 :invalid 來作表單驗證

    html5 提供了相似required Email tel 等表單屬性
    :required // 指定具備required屬性的表單元素
    :valid // 指定一個經過匹配正確的所要求的表單元素
    :invalid // 指定一個不匹配指定要求的表單元素

<input type="text" required />   
    input:vaild{    若是輸入文字則變成綠色
        border:1px solid green;
        box-shadow:inset 10px 0 0 green;
    }
    input:invaild{   若是沒有輸入則是紅色
        border:1px solid red;
        box-shadow:inset 10px 0 0 red;
    }
            
            
用:target來實現摺疊面板


用:not來排除其餘選擇器
  :not([readonly]):not([.disabled]):not([text])  等
  
用:nth-child 來實現各行變色
  :nth-child(2n+1){background:red;}
  :nth-child(2n){backgorund:blue;}
  

用::selection 來美化選中文本
    p::selection{
        background:red;
        color:green;
    }

用::placeholder 美化輸入框佔位符樣式
    ::placeholder{
        color:Red;
    }
   
用::first-letter 來實現段落首字下沉
    p::first-letter{
        font-size:30px;
        color:Red;
        padding:20px;
    }

用::first-line 來標記段落的第一行
    p::first-line{
        color:red;
    }
複製代碼

60、footer永遠在頁面底部

<style>
body {
  position:absolute;
  width:100%;
  min-height:100%; 
}
#app {
  padding-bottom: 200px;
  height: 100%; 
  font-family: "Microsoft Yahei", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333;
  min-width: 1190px;
}
</style>
footer {
  clear: both;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background: #000;
  color: #fff;
  min-width: 1200px;
  height: 200px;
}
複製代碼

6一、兩個子元素一個有內容自動撐開，另外一個爲空如何跟隨高度。

.f{
    display: flex;
    align-items: stretch;
}
複製代碼

6二、消除transition閃屏

.css {
    transform: translate3d(0,0,0);
}
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

前端經常使用的CSS代碼

Demo預覽在這兒！！！！

補充

前提

Git地址

一、垂直居中對齊

二、全屏顯示

三、不一樣a標籤連接使用不一樣樣式

四、圖像灰度

五、背景漸變更畫

六、長文本自動換行

七、模糊文本

八、用CSS動畫實現省略號動畫

九、樣式重置

十、清除浮動

十一、css元素透明

十二、CSS引用樣式

1三、個性圓角

1四、通用媒體查詢

1五、自定義文本選擇

1六、圖片邊框偏光

1七、錨連接僞類

1八、全屏背景圖

1九、內容垂直居中

20、強制出現垂直滾動條

2一、CSS3漸變模板

2二、@font-face引用

2三、鏈接CSS3元素

2四、CSS斑馬線

2五、 css&符號

2六、內盒陰影

2七、外盒陰影

2八、三角形列表項目符號

2九、固定寬度的居中佈局

30、CSS3列文本

3一、CSS固定頁腳

3二、設置瀏覽器最小高度

3三、CSS3輸入效果

3四、強制換行

3五、在可點擊的項目上強制手型

3六、網頁頂部盒陰影

3七、CSS3對話氣泡

3八、持久的列表排序

3九、CSS懸浮提示文本

40、深灰色的圓形按鈕

4一、顯示a連接得URLs

4二、禁用移動Webkit的選擇高亮

4三、CSS3 圓點圖案

4四、CSS3 方格圖案

4五、CSS font屬性縮寫

4六、論文頁面的捲曲效果

4七、鮮豔的錨連接

4八、帶CSS3特點的橫幅顯示

4九、限制單行文本超出顯示省略號

50、限制多行文本超出省略號

5一、css三角形繪製

5二、自適應文本框自動換行，限寬不限高

5三、 ~選擇器：查找某一個元素後面的全部兄弟元素

5四、 +選擇器：查找某一個元素後面緊鄰的兄弟元素

5五、 用 font-size ：0 來清除邊距

5六、 利用padding實現等比例縮放的盒子

5七、利用pointer-events禁用事件光標變成default阻止hover和hover以及JavaScript 點擊事件的觸發

5八、利用 max-width 防止圖片撐破容器

5九、僞類和僞元素的用法

60、footer永遠在頁面底部

6一、兩個子元素 一個有內容自動撐開，另外一個爲空如何跟隨高度。

6二、消除transition閃屏

5五、用 font-size ：0 來清除邊距

5六、利用padding實現等比例縮放的盒子

6一、兩個子元素一個有內容自動撐開，另外一個爲空如何跟隨高度。