用三層盒子結構實現多邊框

guyan0319 發布于2019-04-23 13:38 / 429人閱讀

摘要：代碼如下消除多個邊緣的溢出的邊界消除觸發就可以在瀏覽器看到使用三層盒子模型做出效果給消除右邊和下面的總邊距拿來撐開以便一行能容納個拿來給

　　如圖為jd的廣告頁面

　　如果想給每個盒子加上美觀的border，實現如下效果

　　如果給每個li加border的話盒子就會被撐開，則依照浮動特性一行就容納不下4個li,li會自動掉下來。這時，可以給ul一個寬度，li就不會掉下來，如下圖所示

　　這時，剛好ul會比外面的盒子高幾像素和幾及像素（如果不清除浮動ul的高度是0），這時再給最外面的盒子overflow-hidden就能達到目的。如圖所示

　　把最外面盒子的border去掉就能得到想要的效果了。

?　　代碼如下


"en">

    "UTF-8">
    消除多個邊緣的margin
    


    class="box">

GPU云服務器云服務器三層結構 html 盒子邊框多文件結構 java實現樹形結構

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2150.html

純干貨！jQuery之DOM操作解析

摘要：本人的兩篇原創文章純干貨一切關于選擇器和純干貨之操作解析，發布不到個月，就被博客園某賬號認領為他的原創，并且他還精心地將慕課網原創文章的版權聲明和文章中關于我的點點滴滴，刪除地干干凈凈，很專業。　　本人的兩篇原創文章純干貨！一切關于jquery選擇器和純干貨！jQuery之DOM操作解析，發布不到1個月，就被博客園某賬號認領為他的原創，并且他還精心地將慕課網原創文章的版權聲明和文...

yzd 2019-08-21 11:17 評論0 收藏0
HTML補充+CSS基礎

摘要：文件的編碼格式頁面的編碼格式設置當前頁面的編碼格式在瀏覽器運行當前頁面時，告訴瀏覽器當前的編碼格式字符集概念存放所使用的所有的字符漢字分類美國歐洲中國萬國碼主要使用計算機的存儲方式利用二進制方式和中國存儲將文件的編碼格式 - UTF-8 HTML頁面的編碼格式 - UTF-8 設置當前HTML頁面的編碼格式在瀏覽器運行當前HTML頁面時，告訴瀏覽器當前的編碼格式字符...

CoorChice 2019-08-29 12:39 評論0 收藏0
深入理解line-height

摘要：初學者也許會對這句話嗤之以鼻，但隨著我學習的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設你已經讀完了這篇文章并且已經大致理解那么這張圖應該能看懂了。 HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標簽嗎！CSS3不就是加了些花哨的特效...

Java3y 2019-08-02 15:55 評論0 收藏0
深入理解line-height

摘要：初學者也許會對這句話嗤之以鼻，但隨著我學習的深入，漸漸意識這句話還是有一定道理的。然而，我們真的了解它嗎又是由什么來決定的首先推薦一篇文章，深入了解的行高屬性假設你已經讀完了這篇文章并且已經大致理解那么這張圖應該能看懂了。 HTML和CSS因為其所見即所得的直觀特性，往往被冠上簡單易學的名號。我一開始也是這么想的，不就是那幾個控制浮動、顏色、位置的標簽嗎！CSS3不就是加了些花哨的特效...

chemzqm 2019-08-30 13:04 評論0 收藏0
CSS 布局方式

摘要：中間左欄右欄清除浮動如下圖缺點結構不正確多了一層標簽布局左欄中間右欄如下圖缺點兼容性問題參考文章 W3C標準由萬維網聯盟制定的一系列標準，包括：結構化標準語言（HTML和XML）表現標準語言（CSS）行為標準語言（DOM和ECMAScript） CSS中的定位機制在CSS中存在三種定位機制：標準文檔流（Normal flow）浮動（Floats）絕對定位（Abs...

LancerComet 2019-08-29 15:27 評論0 收藏0