整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
Bootstrap 是全球最受歡迎的前端組件庫(kù)，用于開(kāi)發(fā)響應(yīng)式布局、移動(dòng)設(shè)備優(yōu)先的 WEB 項(xiàng)目。
Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 開(kāi)發(fā)的開(kāi)源工具集。利用我們提供的 Sass 變量和大量 mixin、響應(yīng)式柵格系統(tǒng)、可擴(kuò)展的預(yù)制組件、基于 jQuery 的強(qiáng)大的插件系統(tǒng)，能夠快速為你的想法開(kāi)發(fā)出原型或者構(gòu)建整個(gè) app 。
誰(shuí)適合閱讀本教程？
只要您具備 HTML 和 CSS 的基礎(chǔ)知識(shí)，您就可以閱讀本教程，進(jìn)而開(kāi)發(fā)出自己的網(wǎng)站。在您學(xué)習(xí)完本教程后，您即可達(dá)到使用 Bootstrap 開(kāi)發(fā) Web 項(xiàng)目的中等水平。
閱讀本教程前，您需要了解的知識(shí)：
在您開(kāi)始閱讀本教程之前，您必須具備 HTML 、 CSS 和 JavaScript 的基礎(chǔ)知識(shí)。如果您還不了解這些概念，那么建議您先閱讀我們的這些教程:
HTML 教程
CSS 教程
JavaScript 教程
Bootstrap4 實(shí)例
Boostrap4 與 Bootstrap3
Boostrap4 是 Bootstrap 的最新版本，與 Bootstrap3 相比擁有了更多的具體的類以及把一些有關(guān)的部分變成了相關(guān)的組件。同時(shí) Bootstrap.min.css 的體積減少了40%以上。
Boostrap4 放棄了對(duì) IE8 以及 iOS 6 的支持，現(xiàn)在僅僅支持 IE9 以上 以及 iOS 7 以上版本的瀏覽器。如果對(duì)于其中需要用到以前的瀏覽器，那么請(qǐng)使用 Bootstrap3。
我們可以通過(guò)以下兩種方式來(lái)安裝 Bootstrap4：
使用 Bootstrap 4 CDN。
從官網(wǎng) getbootstrap.com 下載 Bootstrap 4。
Bootstrap 4 CDN
國(guó)內(nèi)推薦使用 BootCDN 上的庫(kù)：
Bootstrap4 CDN
<!-- 新 Bootstrap4 核心 CSS 文件 --><linkrel="stylesheet"><!-- jQuery文件。務(wù)必在bootstrap.min.js 之前引入 --><scriptsrc="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><!-- popper.min.js 用于彈窗、提示、下拉菜單 --><scriptsrc="https://cdn.bootcss.com/popper.js/1.12.5/umd/popper.min.js"></script><!-- 最新的 Bootstrap4 核心 JavaScript 文件 --><scriptsrc="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
此外，你還可以使用以下的 CDN 服務(wù)：
國(guó)內(nèi)推薦使用 : https://www.staticfile.org/
國(guó)際推薦使用：https://cdnjs.com/
下載 Bootstrap 4
你可以去官網(wǎng) https://getbootstrap.com/ 下載 Bootstrap4 資源庫(kù)。
注：此外你還可以通過(guò)包的管理工具 npm、 gem、 composer 等來(lái)安裝：
npm install bootstrap@4.0.0-beta.2gem 'bootstrap', '~> 4.0.0.beta2'composer require twbs/bootstrap:4.0.0-beta.2
創(chuàng)建第一個(gè) Bootstrap 4 頁(yè)面
1、添加 HTML5 doctype
Bootstrap 要求使用 HTML5 文件類型，所以需要添加 HTML5 doctype 聲明。
HTML5 doctype 在文檔頭部聲明，并設(shè)置對(duì)應(yīng)編碼:
<!DOCTYPEhtml><html><head><metacharset="utf-8"></head></html>
移動(dòng)設(shè)備優(yōu)先
為了讓 Bootstrap 開(kāi)發(fā)的網(wǎng)站對(duì)移動(dòng)設(shè)備友好，確保適當(dāng)?shù)睦L制和觸屏縮放，需要在網(wǎng)頁(yè)的 head 之中添加 viewport meta 標(biāo)簽，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
width=device-width 表示寬度是設(shè)備屏幕的寬度。
initial-scale=1 表示初始的縮放比例。
shrink-to-fit=no 自動(dòng)適應(yīng)手機(jī)屏幕的寬度。
容器類
Bootstrap 4 需要一個(gè)容器元素來(lái)包裹網(wǎng)站的內(nèi)容。
我們可以使用以下兩個(gè)容器類：
.container 類用于固定寬度并支持響應(yīng)式布局的容器。
.container-fluid 類用于 100% 寬度，占據(jù)全部視口（viewport）的容器。
兩個(gè) Bootstrap 4 頁(yè)面
Bootstrap4 .container 實(shí)例
<divclass="container"><h1>我的第一個(gè) Bootstrap 頁(yè)面</h1><p>這是一些文本。</p></div>
嘗試一下 ?
讀：按鈕是界面中最基礎(chǔ)的元素之一，一個(gè)個(gè)按鈕承載著一個(gè)個(gè)操作指令，響應(yīng)用戶各類操作行為，傳達(dá)用戶的種種業(yè)務(wù)訴求。B端業(yè)務(wù)龐大而復(fù)雜，不同的場(chǎng)景使用的按鈕不同，同一流程不同狀態(tài)下的按鈕也不同，甚至同一模塊在不同顯示設(shè)備上按鈕也有所差異。下面是在實(shí)際工作中的關(guān)于按鈕的一些總結(jié)和思考，也希望能夠給讀者帶來(lái)一些新的思考。
依據(jù)按鈕呈現(xiàn)的視覺(jué)重量差異，我們可以通過(guò)改變樣式將按鈕分為主按鈕、次按鈕、虛線按鈕、文字按鈕、圖標(biāo)按鈕5類。
在日常場(chǎng)景中，主按鈕是頁(yè)面中按鈕區(qū)最為核心的操作按鈕，通過(guò)使用主題色填充容器吸引用戶視線聚焦，引導(dǎo)用戶去關(guān)注、操作主流程，強(qiáng)調(diào)性較高。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)
次按鈕是在日常場(chǎng)景中運(yùn)用最廣泛的的一種按鈕，由此也被稱為默認(rèn)按鈕，視覺(jué)呈現(xiàn)上相較于主按鈕較“弱”。通常有描邊和文字組成的字線型、背景填充（中性色或較淺的主題色）和文字組成的字面型兩種，用于按鈕區(qū)沒(méi)有主次之分的平級(jí)按鈕，強(qiáng)調(diào)性中等。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)
虛線按鈕在日常場(chǎng)景中屬于低頻操作按鈕，容器內(nèi)只有簡(jiǎn)單的虛線邊框，視覺(jué)上弱于次按鈕，常用于場(chǎng)景中的添加操作，強(qiáng)調(diào)性較低。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)
文字按鈕在日常場(chǎng)景中的使用頻次也較高，文字按鈕常見(jiàn)也分為兩種：一種是各種狀態(tài)下容器邊界都是隱藏的，一種是在hover、press、active狀態(tài)下容器有背景色填充（較淺中性色）的。不管哪一種形式視覺(jué)感受都較弱，通常用于不太明顯的操作，強(qiáng)調(diào)性較低。
常見(jiàn)有純文字、圖標(biāo)+文字兩種類型，5種不同狀態(tài)
文字按鈕和鏈接的在默認(rèn)外觀上基本一致，甚至在有的項(xiàng)目中各種交互狀態(tài)也一致，比較難區(qū)分文字按鈕和鏈接。
在我們的團(tuán)隊(duì)項(xiàng)目中，文字按鈕和鏈接也做了不同的定義，鏈接在hover、press、active狀態(tài)下都有顯示下劃線，來(lái)告知用戶這是一個(gè)外部的鏈接；文字按鈕則在hover、press、active狀態(tài)下容器都會(huì)填充背景色。
圖標(biāo)按鈕在日常場(chǎng)景中的使用頻次較高、也頗為高效，圖標(biāo)按鈕默認(rèn)狀態(tài)下容器在不可見(jiàn)，視覺(jué)感受也較弱，由于沒(méi)有文字，一些語(yǔ)義性不強(qiáng)的圖標(biāo)容易導(dǎo)致用戶理解的偏差，一般用在圖標(biāo)hover狀態(tài)下會(huì)出現(xiàn)Tooltip提示來(lái)解決此問(wèn)題，圖標(biāo)按鈕的強(qiáng)調(diào)性也較低。
常見(jiàn)只有圖標(biāo)，5種不同狀態(tài)
綜上所述就是在B端項(xiàng)目中十分常見(jiàn)的五種按鈕，不同團(tuán)隊(duì)、不同項(xiàng)目都會(huì)根據(jù)自身的實(shí)際項(xiàng)目去定義和使用不同按鈕。
在我們團(tuán)隊(duì)的實(shí)際項(xiàng)目中，依據(jù)按鈕視覺(jué)重量的不同，將按鈕分為一級(jí)按鈕（主按鈕）、二級(jí)按鈕（次按鈕、虛線按鈕）、三級(jí)按鈕（文字按鈕）、四級(jí)按鈕（圖標(biāo)按鈕），在強(qiáng)調(diào)屬性的重要程度上隨級(jí)別增加遞減。在實(shí)際的項(xiàng)目場(chǎng)景中，根據(jù)不同需求的強(qiáng)調(diào)程度去選擇相應(yīng)級(jí)別的按鈕，有了這個(gè)準(zhǔn)則作為指導(dǎo)參考，大大降低了團(tuán)隊(duì)在選擇按鈕時(shí)的時(shí)間成本。
通過(guò)對(duì)一個(gè)按鈕的拆解，可以將按鈕分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本元素，每種元素的視覺(jué)呈現(xiàn)都會(huì)反過(guò)來(lái)影響按鈕的外觀。不同風(fēng)格、不同氣質(zhì)的產(chǎn)品，需要相應(yīng)的處理的影響按鈕視覺(jué)呈現(xiàn)的各個(gè)元素。
圓角按鈕所帶來(lái)的不僅僅是圓角大小的視覺(jué)表現(xiàn)，更多是影響著用戶對(duì)整個(gè)產(chǎn)品整體認(rèn)知，以及用戶在使用產(chǎn)品過(guò)程中的具體感受。合理科學(xué)、適合產(chǎn)品氣質(zhì)特征、符合用戶預(yù)期和認(rèn)知的圓角元素，對(duì)整個(gè)產(chǎn)品使用體驗(yàn)的提升是有很大的幫助的。
這里的圓角不僅僅局限于按鈕，推而廣之適用產(chǎn)品中的每個(gè)元素，提前合理的規(guī)劃各種元素圓角，更會(huì)對(duì)整個(gè)產(chǎn)品的一致性大有裨益。
直角按鈕：棱角分明，四角垂直過(guò)渡，呈向外擴(kuò)張之勢(shì)，給人以尖銳、強(qiáng)烈，不易接近之感。
圓角按鈕：與直角相比，四角過(guò)渡較舒緩，呈向內(nèi)聚攏之勢(shì)，多給人以柔和、親近，平易好接觸之感。
多個(gè)直角按鈕近距離排列，由于直角的張力的存在，相鄰直角按鈕的間隔在視覺(jué)感受上被弱化，不像圓角按鈕那樣能更容易的區(qū)分、甄別每個(gè)按鈕。滿足產(chǎn)品需求的情況下，適當(dāng)?shù)膱A角按鈕較直角按鈕更合適。
當(dāng)然圓角也不是越大越好，相同尺寸的按鈕，圓角越大對(duì)在頁(yè)面中的視覺(jué)占比越小，操作的容易性越低。尤其在B端與下拉菜單進(jìn)行聯(lián)動(dòng)時(shí)，也會(huì)受到大圓角（全圓角）的局限，使下拉菜單和按鈕的組合適配顯得比較突兀。
按鈕loading狀態(tài)算是一種較為特殊的狀態(tài)，指的是戶操作按鈕后在得到反饋前的一種臨時(shí)按鈕狀態(tài)，常與按鈕組合在一塊作為多態(tài)按鈕使用。
由于數(shù)據(jù)量大或者網(wǎng)速不穩(wěn)定頁(yè)面造成數(shù)據(jù)反饋會(huì)有一定的響應(yīng)加載時(shí)間，當(dāng)這個(gè)加載時(shí)間讓用戶有明顯的等待感知時(shí)，就需要一種反饋來(lái)告知用戶當(dāng)前正在進(jìn)行的狀態(tài)，防止用戶在不知情的情況下犯錯(cuò)誤操作，一般會(huì)使用loading動(dòng)畫來(lái)做這種反饋，不僅向用戶反映了系統(tǒng)的當(dāng)前狀態(tài)，適當(dāng)?shù)膭?dòng)畫效果還能轉(zhuǎn)移用戶注意力，起到給用戶情緒降躁的效果。
按鈕的loading狀態(tài)則可以代替loading動(dòng)畫，既起到了原來(lái)loading動(dòng)畫的效果，又不會(huì)因頁(yè)面變動(dòng)過(guò)大給用戶帶來(lái)不適。在越發(fā)重視用戶體驗(yàn)的今天，按鈕的loading狀態(tài)也越來(lái)越多的運(yùn)用在產(chǎn)品的各種場(chǎng)景中。
通過(guò)以上對(duì)按鈕了解，應(yīng)該對(duì)按鈕有個(gè)大概的認(rèn)識(shí)，接下來(lái)就去看看在實(shí)際工作中是怎么制作按鈕。
在實(shí)際項(xiàng)目中應(yīng)用中，我們發(fā)現(xiàn)按鈕中的文本字?jǐn)?shù)≤4能夠滿足大多數(shù)場(chǎng)景。為保證大多數(shù)按鈕的長(zhǎng)度一致，就需要在定制按鈕組件時(shí)給按鈕中的文字區(qū)域一個(gè)基準(zhǔn)寬度，當(dāng)文字的實(shí)際寬度大于基準(zhǔn)寬度時(shí)，按鈕的寬度隨著文字的實(shí)際寬度增加而增加；當(dāng)文字的實(shí)際寬度不大于基準(zhǔn)寬度時(shí)，按鈕的寬度就是文字的基準(zhǔn)寬度+左右padding值。
我們項(xiàng)目的網(wǎng)格基數(shù)是4px，基準(zhǔn)正常按鈕為96*32
實(shí)際項(xiàng)目需求中，不同場(chǎng)景用到的按鈕大小（按鈕的高度）也會(huì)有所不同。在我們的項(xiàng)目中我們將通用按鈕劃分為大（large）、正常（normal）、?。╯mall）、超小（extra small），按鈕高度分別對(duì)應(yīng)著36px、32px、24px、20px。
若品牌色定義了從淺到深不同層級(jí)的色階，可使用正常基準(zhǔn)色作為按鈕的normal顏色，相鄰的淺色階作為hover狀態(tài)下對(duì)應(yīng)的顏色，相鄰深色階作為press狀態(tài)下對(duì)應(yīng)的顏色。
我們項(xiàng)目中把“disabled”狀態(tài)的定義為了一個(gè)中性色，用“置灰”的形式來(lái)告訴用戶當(dāng)前狀態(tài)不可操作，而沒(méi)有選擇色階中的淺色。
如果沒(méi)有定義從淺到深的色階，在原來(lái)主題色的基礎(chǔ)上，則可以給hover狀態(tài)添加一個(gè)透明度為16%（#fff），給press狀態(tài)添加一個(gè)透明度16%（#000），給用戶以實(shí)時(shí)操作反饋。
按鈕區(qū)是指用于放置按鈕的區(qū)域，一個(gè)按鈕區(qū)內(nèi)可以有多個(gè)按鈕，按鈕區(qū)的位置應(yīng)該位于什么頁(yè)面的什么位置？參考眾多設(shè)計(jì)語(yǔ)言，我們認(rèn)為按鈕應(yīng)置于用戶的視覺(jué)瀏覽路徑中，便于被用戶發(fā)現(xiàn)，并且應(yīng)盡量靠近其所控制的對(duì)象。
結(jié)合經(jīng)典的“F”、“Z”網(wǎng)頁(yè)瀏覽模式作為基礎(chǔ)指導(dǎo)。我們將一個(gè)相對(duì)復(fù)雜模塊分為header、body、footer三個(gè)區(qū)域：header區(qū)域的按鈕區(qū)放置影響模塊全局的操作；body區(qū)域的按鈕區(qū)放置影響跟隨內(nèi)容的操作；footer區(qū)域的按鈕區(qū)放置具有“完結(jié)流程”意義的操作。
一個(gè)模塊的按鈕區(qū)最好只有一個(gè)主按鈕，否則會(huì)對(duì)用戶造成疑惑，“到底哪一個(gè)是主要流程？”，對(duì)模塊主流程功能造成干擾。
一個(gè)模塊的按鈕區(qū)可以沒(méi)有主按鈕，在日常場(chǎng)景中，經(jīng)常會(huì)遇到一個(gè)模塊中幾個(gè)分支流程重要程度都是平級(jí)的，此時(shí)則不需要主按鈕。若非要安排一個(gè)主按鈕則會(huì)讓使用者產(chǎn)生困惑，造成流程層級(jí)混亂。
最常見(jiàn)且疑問(wèn)當(dāng)屬“取消按鈕在左邊還是右邊”，Micrisoft、Apple、Google三家操作系統(tǒng)巨頭給出的方案各不相同，可見(jiàn)不管哪種方案，只要能在系統(tǒng)中保證統(tǒng)一性，都是可以被用戶所接受的。
在我們團(tuán)隊(duì)的項(xiàng)目中定義了這樣一個(gè)“靠邊原則”，既按鈕區(qū)在左側(cè)時(shí)，優(yōu)先級(jí)別高的按鈕落在左側(cè)；按鈕區(qū)在右側(cè)時(shí)，優(yōu)先級(jí)別高的按鈕落在右側(cè)。按鈕位于中間位置時(shí)，引導(dǎo)操作的按鈕統(tǒng)一在右側(cè)。
按鈕區(qū)的按鈕較多且頁(yè)面空間有限時(shí)，就需要“折疊”部分按鈕，來(lái)優(yōu)雅的展示按鈕區(qū)效果。當(dāng)模塊寬度變窄，空間不足于完全放得下全部按鈕式，此時(shí)統(tǒng)一采用靠右“折疊”，部分按鈕隱藏在“…”按鈕中，鼠標(biāo)交互時(shí)再展示出來(lái)，用交互換得更大空間。
參考鏈接：
https://www.zcool.com.cn/article/ZMTEyNzczMg==.html
https://www.zcool.com.cn/article/ZMTA2NDY2OA==.html
https://www.zcool.com.cn/article/ZMTI2MzUwMA==.html
本文由@小梗果 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來(lái)
html
正在加載中<dot>...</dot>
css
dot{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before{
display: block;
content: '...\\A..\\A.';
white-space: pre-wrap;
animation: dot 2s infinite step-start both;
}
@keyframes dot{
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
如果你看上圖代碼沒(méi)有看懂，請(qǐng)看下圖，我注釋掉一行代碼，你就明白了。原來(lái)是dot元素，沿著Y軸在循環(huán)位移，隱藏掉就讓你看到了加載的動(dòng)畫效果。
當(dāng)你需要這樣一個(gè)上傳文件，按鈕時(shí)，你考慮的是找設(shè)計(jì)弄個(gè)圖片，還是自己寫一個(gè)？？？
其實(shí)CSS寫，也很簡(jiǎn)單的。
<a href="javascript：;" class="upload" title="繼續(xù)上傳">添加圖片</a>
.upload{
position: relative;
display: inline-block;
width: 76px;
height: 76px;
color: #ccc;
border: 2px dashed; /*邊框虛線*/
text-indent: -12em; /*使其文字看不到*/
transition: color .25s; /*hover事件：顏色漸變動(dòng)畫*/
overflow: hidden;
margin: 50px 100px;
}
/*用before/after偽類做 + 號(hào)樣式*/
.upload:before, .upload:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.upload:hover{
color: #34538b;
}
.upload::before{
width: 20px;
border-top: 4px solid;
margin: -2px 0 0 -10px;
}
.upload::after{
height: 20px;
border-left: 4px solid;
margin: -10px 0 0 -2px;
}
當(dāng)我們想給一個(gè)矩形或其他能用 border-radius 生成的形狀加投影時(shí)，用 box-shadow 都可以解決，如下圖：
但是，當(dāng)元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因?yàn)?border-radius 會(huì)無(wú)恥地忽視透明部分。這類情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);
2、元素設(shè)置了點(diǎn)狀、虛線或半透明的邊框，但沒(méi)有背景(或者當(dāng) background-clip 不是 border-box 時(shí));
3、對(duì)話氣泡，它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過(guò) clip-path 生成的形狀。
下面來(lái)看看這個(gè)示例： html代碼
<div class="speech">不規(guī)則的投影</div>
css樣式
div {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 8em;
padding: .5em;
height: 5em;
margin: .6em;
background: #0cc071;
color: #fff;
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時(shí)是偽類是沒(méi)有陰影的*/
-webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));
filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));
}
.speech {
border-radius: .3em;
}
.speech::before {
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #0cc071;
border-right-width: 0;
}
從上圖可以看出box-shadow搞不定的，drop-shadow給搞定了。這是為什么了？
可以很明顯的看出區(qū)別，為什么會(huì)這樣呢？在這里我用的是div標(biāo)簽，大家都知道，div標(biāo)簽是個(gè)塊標(biāo)簽，說(shuō)白了是個(gè)盒模型，指的是一塊區(qū)域，box-shadow的屬性只能添加到盒模型外面，因此內(nèi)部的東西是不會(huì)添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區(qū)域都做了陰影效果，就相當(dāng)于一種真正的投影。
經(jīng)常在網(wǎng)頁(yè)中看到一些Dialog，例如有些網(wǎng)頁(yè)點(diǎn)擊登錄注冊(cè)時(shí)就會(huì)跳出一個(gè)彈框來(lái)顯示登錄注冊(cè)頁(yè)面，下面就使用 css 完成一個(gè)可以自適應(yīng)，無(wú)論窗口的大小，始終能保持水平垂直居中的dialog。
<div class="c-pupup"> <div class="dialog"> <div class="content"> 我是內(nèi)容 </div> </div> </div>
css樣式
.c-pupup{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
}
.c-pupup:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
background-color: #fff;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
text-align: left;
white-space: normal;
width: 400px;
height: 250px;
}
這些CSS都是非常實(shí)用的，有興趣的可以收藏起來(lái)，沒(méi)準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了，因?yàn)槲覀円呀?jīng)放棄它了。
喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的，可以點(diǎn)擊一波關(guān)注哦！
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
