整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          Bootstrap4 教程—安裝使用—網(wǎng)格系統(tǒng)—文字

          Bootstrap4 教程—安裝使用—網(wǎng)格系統(tǒng)—文字排版—顏色(一)章

          ootstrap4 教程

          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。

          Bootstrap4 安裝使用

          我們可以通過(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類。

          1.1 主按鈕

          在日常場(chǎng)景中,主按鈕是頁(yè)面中按鈕區(qū)最為核心的操作按鈕,通過(guò)使用主題色填充容器吸引用戶視線聚焦,引導(dǎo)用戶去關(guān)注、操作主流程,強(qiáng)調(diào)性較高。

          常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)

          1.2 次按鈕

          次按鈕是在日常場(chǎng)景中運(yùn)用最廣泛的的一種按鈕,由此也被稱為默認(rèn)按鈕,視覺(jué)呈現(xiàn)上相較于主按鈕較“弱”。通常有描邊和文字組成的字線型、背景填充(中性色或較淺的主題色)和文字組成的字面型兩種,用于按鈕區(qū)沒(méi)有主次之分的平級(jí)按鈕,強(qiáng)調(diào)性中等。

          常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)

          1.3 虛線按鈕

          虛線按鈕在日常場(chǎng)景中屬于低頻操作按鈕,容器內(nèi)只有簡(jiǎn)單的虛線邊框,視覺(jué)上弱于次按鈕,常用于場(chǎng)景中的添加操作,強(qiáng)調(diào)性較低。

          常見(jiàn)有純文字、圖標(biāo)+文字兩種類型,5種不同狀態(tài)

          1.4 文字按鈕

          文字按鈕在日常場(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ì)填充背景色。

          1.5 圖標(biāo)按鈕

          圖標(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í)間成本。

          二、按鈕應(yīng)用細(xì)節(jié)

          2.1 按鈕拆解

          通過(guò)對(duì)一個(gè)按鈕的拆解,可以將按鈕分為容器、背景、圖標(biāo)、文本、描邊、圓角等基本元素,每種元素的視覺(jué)呈現(xiàn)都會(huì)反過(guò)來(lái)影響按鈕的外觀。不同風(fēng)格、不同氣質(zhì)的產(chǎn)品,需要相應(yīng)的處理的影響按鈕視覺(jué)呈現(xiàn)的各個(gè)元素。

          2.2 按鈕圓角

          圓角按鈕所帶來(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ì)受到大圓角(全圓角)的局限,使下拉菜單和按鈕的組合適配顯得比較突兀。

          2.3 按鈕loading狀態(tài)

          按鈕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)景中。

          三、按鈕應(yīng)用技巧

          通過(guò)以上對(duì)按鈕了解,應(yīng)該對(duì)按鈕有個(gè)大概的認(rèn)識(shí),接下來(lái)就去看看在實(shí)際工作中是怎么制作按鈕。

          3.1 按鈕寬度尺寸

          在實(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

          3.2 按鈕大小

          實(shí)際項(xiàng)目需求中,不同場(chǎng)景用到的按鈕大小(按鈕的高度)也會(huì)有所不同。在我們的項(xiàng)目中我們將通用按鈕劃分為大(large)、正常(normal)、?。╯mall)、超小(extra small),按鈕高度分別對(duì)應(yīng)著36px、32px、24px、20px。

          3.3 按鈕顏色

          若品牌色定義了從淺到深不同層級(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í)操作反饋。

          3.4 按鈕區(qū)

          按鈕區(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é)流程”意義的操作。

          3.5 一個(gè)按鈕區(qū)一個(gè)主按鈕

          一個(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í)混亂。

          3.6 按鈕的排列

          最常見(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è)。

          3.7 按鈕響應(yīng)式規(guī)則

          按鈕區(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)

          文字加載...動(dòng)畫

          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)畫效果。

          border 實(shí)現(xiàn)邊框

          當(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; 
          }
          

          不規(guī)則的投影 filter

          當(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)于一種真正的投影。

          css 實(shí)現(xiàn)自適應(yī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; 
          }
          

          總結(jié)

          這些CSS都是非常實(shí)用的,有興趣的可以收藏起來(lái),沒(méi)準(zhǔn)以后能用上。然后drop-shadow就不用去糾結(jié)IE能不能用了,因?yàn)槲覀円呀?jīng)放棄它了。

          喜歡小編或者覺(jué)得小編文章對(duì)你有幫助的,可以點(diǎn)擊一波關(guān)注哦!


          主站蜘蛛池模板: 精品亚洲一区二区三区在线播放| 日韩精品无码中文字幕一区二区| 精品无码成人片一区二区| 无码日韩精品一区二区免费| 亚洲日韩国产欧美一区二区三区| 国产一区在线观看免费| 国99精品无码一区二区三区| 亚洲av无码成人影院一区| 国产一区二区三区久久| 午夜视频久久久久一区| 男人的天堂精品国产一区| 精品无码人妻一区二区三区18| 日韩人妻精品无码一区二区三区| 色综合一区二区三区| 日本在线视频一区| 一区二区三区www| 中文字幕一区二区三区精华液| 日本一区二区三区四区视频| 国产精品乱码一区二区三| 久久伊人精品一区二区三区| 亚洲综合一区二区精品久久| 亚洲综合无码一区二区| 亚洲Av无码一区二区二三区| 亚洲AV无码一区二区三区人| 久久人妻无码一区二区| 精品中文字幕一区在线| 亚洲熟妇av一区二区三区 | 人妻体内射精一区二区| 精品免费AV一区二区三区| 中文字幕一区二区人妻| 亚洲一区中文字幕久久| 麻豆va一区二区三区久久浪| 无码人妻久久一区二区三区蜜桃| 中文字幕无线码一区| 久久久av波多野一区二区| 精品免费国产一区二区三区| 亚洲一区二区三区国产精品| 亚洲天堂一区二区三区四区| 国产成人高清亚洲一区91| 一区二区三区四区精品视频| 亚洲AV无码一区二区三区牲色|