文主要介紹了網頁布局中左側固定，右側自適應的兩種實現方法，相信對大家初學網頁布局會有很好的幫助！

第一種方法代碼如下：

第二種實現方法代碼如下：

想學習更多技術，請關注“恒星網絡”頭條號！

字加載...動畫

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); 
 } 
}

如果你看上圖代碼沒有看懂，請看下圖，我注釋掉一行代碼，你就明白了。原來是dot元素，沿著Y軸在循環位移，隱藏掉就讓你看到了加載的動畫效果。

border 實現邊框

當你需要這樣一個上傳文件，按鈕時，你考慮的是找設計弄個圖片，還是自己寫一個？？？

其實CSS寫，也很簡單的。

<a href="javascript：;" class="upload" title="繼續上傳">添加圖片</a>
.upload{ 
 position: relative; 
 display: inline-block; 
 width: 76px; 
 height: 76px; 
 color: #ccc; 
 border: 2px dashed; /*邊框虛線*/ 
 text-indent: -12em; /*使其文字看不到*/ 
 transition: color .25s; /*hover事件：顏色漸變動畫*/ 
 overflow: hidden; 
 margin: 50px 100px; 
} 
/*用before/after偽類做 + 號樣式*/ 
.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; 
}

不規則的投影 filter

當我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時，用 box-shadow 都可以解決，如下圖：

但是，當元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:

1、半透明圖像、背景圖像、或者 border-image(比如老式的金質像框);

2、元素設置了點狀、虛線或半透明的邊框，但沒有背景(或者當 background-clip 不是 border-box 時);

3、對話氣泡，它的小尾巴通常是用偽元素生成的;

4、幾乎所有的折角效果

5、通過 clip-path 生成的形狀。

下面來看看這個示例： html代碼

<div class="speech">不規則的投影</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); 此時是偽類是沒有陰影的*/ 
 -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給搞定了。這是為什么了？

可以很明顯的看出區別，為什么會這樣呢？在這里我用的是div標簽，大家都知道，div標簽是個塊標簽，說白了是個盒模型，指的是一塊區域，box-shadow的屬性只能添加到盒模型外面，因此內部的東西是不會添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區域都做了陰影效果，就相當于一種真正的投影。

css 實現自適應的彈框

經常在網頁中看到一些Dialog，例如有些網頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面，下面就使用 css 完成一個可以自適應，無論窗口的大小，始終能保持水平垂直居中的dialog。

<div class="c-pupup"> 
 <div class="dialog"> 
 <div class="content"> 
 我是內容 
 </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都是非常實用的，有興趣的可以收藏起來，沒準以后能用上。然后drop-shadow就不用去糾結IE能不能用了，因為我們已經放棄它了。

喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！

天下數據是國內屈指可數的擁有多處海外自建機房的新型IDC服務商，被業界公認為“中國IDC行業首選品牌”。

天下數據與全球近120多個國家頂級機房直接合作，提供包括香港、美國、韓國、日本、臺灣、新加坡、荷蘭、法國、英國、德國、埃及、南非、巴西、印度、越南等國家和地區的服務器、云服務器的租用服務，需要的請聯系天下數據客服！

除提供傳統的IDC產品外，天下數據的主要職責是為大中型企業提供更精細、安全、滿足個性需求的定制化服務器解決方案，特別是在直銷、金融、視頻、流媒體、游戲、電子商務、區塊鏈、快消、物聯網、大數據等諸多行業，為廣大客戶解決服務器租用中遇到的各種問題。

站對于每個企業而言是展現品牌的重要渠道。

當你在為你的用戶設計網站的時候，一定要控制好網站的內容量。用戶并沒有必要在塞滿屏幕的大量信息當中，費勁巴拉地去找自己想要的那一條。極簡主義風格的流行并不是沒有道理的。

有針對性地呈現內容，為品牌進行合理的適配，提供清晰且扣人心弦的視覺設計，這樣的網站是令人印象深刻的。

極簡的設計并不意味著你無法和用戶進行更多的溝通，也許你覺得當前的設計還不足以滿足你的品牌和用戶進行溝通的需求，好在還有許多方法和技巧幫你做到這一點。

彈出框就是為此而出現的。在幾年前，這種設計被作為一種不影響當前網站內容的信息呈現方式而廣泛應用，隨后又因為大量的、無節制且毫無美感的濫用，被設計師和用戶廣泛吐槽。Google 認為彈出框對于用戶體驗造成了明顯的干擾，同時，需要借助彈出框提升信息交互的設計師和開發者因此也困擾不已。

那么，這是不是意味著彈出框已經被淘汰了？并非如此。進入的文章我們將會詳細為你分析彈出框在如今UI/UX設計當中的真實情況，并且提供一些可供參考的最佳實踐。

彈出框的設計現狀

首先我們應該聊聊彈出框的類型，正確用法。

彈出框的類型

彈出框遵循著一系列模式而存在。它會在打開網頁的時候彈出，滑入網頁，或者干脆就在網頁加載的時候就直接加載進去了。雖然有的網頁會將它置于頁面的正中間，不過也有許多設計師將它置于頁面的底部或者角落。

插頁式和覆蓋式的彈出框會覆蓋住整個屏幕，通常會出現在一打開網頁的時候，

另外一種是通知欄式的彈出框，它會緊貼在頁面的頂部或者底部，甚至是常駐式的存在。

使用彈出框的5個原因

彈出框有的時候確實令人頭疼，作為設計師你總想遠離它。但是，它依然存在于許多網頁當中，并且發揮著巨大的作用。下面的5個理由，讓設計師真正離不開它。

1. 彈出框能夠讓人集中注意力

越來越多的用戶無法集中注意力閱讀，彈出框這種打斷式的信息呈現方式，非常抓人眼球，能夠快速直接地傳遞信息。

2. 讓用戶注意到最重要的信息

彈出框讓其中所呈現的信息擁有了額外的價值，當彈出框出現的時候，其中所展現的信息擁有了超過其他信息的重要性，至少感覺上是這樣。

3. 彈出框是多用途的

如今的彈出框擁有多種多樣的玩法和呈現方式，不會將用戶推開，也不再使用廣告讓用戶頭疼不已。彈出框的觸發機制也非常的多變：

在進入時彈出

滾動到特定的位置時彈出

通過特定操作

觸發在離開時候觸發

4. 保持頁面干凈整潔

正如我之前所提到的，極簡主義的設計讓網站足夠美觀，但是想要順暢地傳遞信息，彈出框能夠作為不錯的載體，確保不會占用頁面位置，影響整體風格。

5. 提升轉化率

根據 Sumo 的研究，彈出框和轉化率之間有著清晰的關系。他們發現，彈出框讓轉化率的平均轉化速度提升了大概3%，而設計得好的彈出框能夠將轉化率提升到9%，對于許多網站而言，這個轉化率的意義是非同凡響的。

彈出框提升了網站的參與度。

移動端UI中的彈出框

值得一提的是，Google 在分析報告中并不反感移動端的彈出框，而是建議讓設計師和開發者盡可能巧妙地進行移動端彈出框的設計，降低彈出框對于用戶體驗的損害，而是盡量去提升用戶體驗。

因此，Google 將會對采用下面3種彈出框的網站予以處罰：

當用戶一打開首頁就彈出的彈出框

彈出框蓋住了幾乎全部頁面

彈出框廣告

明白了吧？現在，我們要聊聊彈出框的設計技巧了。

18個彈出框設計的最佳實踐

不要為了跟隨某個趨勢，展現某種設計元素而使用彈出框，它一定要是功能性的，不要浪費用戶的時間，這樣會降低用戶對你的信任。

彈出框的設計應該和網站本身保持一致，無論是風格還是素質上。

確保彈出框是可交互，有響應的。

確保彈出框中的文案是簡短而重點突出的。

不要使用被動的或者過于生硬的「是/否」式的行為召喚文案，除非你的品牌個性本就如此。如果彈出框中包含兩個 CTA，請盡量采用積極的方式來展現。

如果你在搜集用戶的聯系信息，最好只讓他們提供電子郵件地址。

確保彈出框的內容和對應的頁面保持一致。

如果可以，盡量避免在首頁上就使用彈出框。盡量讓用戶先適應所處的頁面環境。這是 Google 所允許的彈出框設計之一。

遵循 Google 對于移動端網頁的設計規則：不要有插頁式的廣告，不要設置首頁彈出框。

不要讓移動端彈出框和桌面端的完全一樣，有針對性地進行設計。

總是使用簡單統一的方式來關閉彈出框，即在右上角設置一個X關閉按鈕。

讓所有的彈出框都在恰當的時候才彈出，比如關閉頁面的時候。

設置頻率規則，確保訪客不會在每個頁面或者每次訪問的時候都會碰到彈出框。

將彈出框設置在正確的位置，根據網站的狀況和體驗的度量來進行判斷。

如果你想讓彈出框醒目，盡量讓它出現在屏幕的正中心。

如果你想推送優惠信息，可以使用頂部懸浮式的彈出框。

如果你想在用戶瀏覽的時候推送信息，彈出框盡量出現在屏幕的一側。

根據用戶類型細分來自定義彈出框信息。

結語

如果你真的希望用戶知悉一些關鍵的、重要的信息，不要吝嗇使用彈出框，你可以盡量讓彈出框體驗更好，提供更加有用的、他們需要的內容。不要害怕 A/B測試，這樣的方法會讓彈出框更加優秀。一個優質的彈出框需要你考慮很多因素，包括整體的設計，文案、位置、CTA等等。