簡(jiǎn)單的布局套路

wuyangchun 發(fā)布于2019-08-29 15:18 / 2273人閱讀

摘要：布局給子元素加上給父元素加上布局給父元素加上給父元素加上發(fā)現(xiàn)兩個(gè)小游戲感覺(jué)好腦殘不過(guò)挺適合新人學(xué)習(xí)的簡(jiǎn)單的布局做定位的的元素上面不要加任何屬性，需要加屬性，在它里面做，最少。

Float 布局

給子元素加上float:left

給父元素加上clearfix

 .clearfix::after{
            content: "";
            display: block;
            clear:both;
        }

Flex 布局

給父元素加上 display:flex;

給父元素加上 justify-content:space-between;

發(fā)現(xiàn)兩個(gè)Flex 小游戲（感覺(jué)好腦殘）不過(guò)挺適合新人學(xué)習(xí)的：
http://flexboxfroggy.com/#zh-cn
http://www.flexboxdefense.com/

簡(jiǎn)單的布局：做定位的的元素上面不要加任何屬性，需要加屬性，在它里面做，bug最少。


    



    
        
            LOGO
        
        
            
                導(dǎo)航1
                導(dǎo)航2
                導(dǎo)航3
                導(dǎo)航4
                導(dǎo)航5

1、單欄布局


  
    eee    
  
    eee
  
    eee

2、兩欄布局



    aside
    main

footer

3、三欄布局



    aside
    aside
    main

footer

GPU云服務(wù)器云服務(wù)器 html簡(jiǎn)單布局網(wǎng)站套路 CDN套路云服務(wù)商套路

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113235.html

相關(guān)文章

Sticky footers實(shí)現(xiàn)套路

摘要：第二種方式首先提一個(gè)概念相對(duì)于視窗的高度視窗高度是。這種需求剛好符合。提供一種增加包裹層實(shí)現(xiàn)方式。無(wú)論是pc還是移動(dòng)端，有一種布局叫做Sticky footers，何為Sticky footers？百度翻譯：粘粘的頁(yè)腳[笑哭],不過(guò)意思也算對(duì)吧，就是如果頁(yè)面內(nèi)容不夠長(zhǎng)的時(shí)候，頁(yè)腳粘貼在視窗底部；如果內(nèi)容足夠長(zhǎng)時(shí)，頁(yè)腳塊會(huì)附在內(nèi)容區(qū)塊下面。那么如何來(lái)實(shí)現(xiàn)這種效果呢，今天來(lái)用兩種方式聊一...

sushi 2019-08-29 11:33 評(píng)論0 收藏0
CSS1:CSS難學(xué)與好學(xué),CSS學(xué)習(xí)方法

摘要：只需要熟悉常用套路，足以應(yīng)付日常工作包括阿里巴巴騰訊這些公司的日常工作現(xiàn)在的公司更喜歡好的程序員，對(duì)要求不高，面試題也很基礎(chǔ)。 CSS1:CSS難學(xué)與好學(xué),CSS學(xué)習(xí)方法 1.CSS難學(xué)與好學(xué) 1.1CSS為什么難學(xué) CSS 屬性很多，難以一次性記下來(lái) CSS 屬性之間互相影響，難以完全掌握 CSS 核心概念都寫(xiě)在文檔中，但是如果不熟悉一些英文詞匯，很難短時(shí)間看完 CSS 文檔 CS...

劉明 2019-08-29 15:43 評(píng)論0 收藏0
webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)

摘要：本文首發(fā)于的技術(shù)博客實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里這系列文章講什么本系列文章主要介紹如何用這一當(dāng)前流行的構(gòu)建工具來(lái)設(shè)計(jì)一個(gè)多頁(yè)應(yīng)用的架構(gòu)。本文首發(fā)于A(yíng)rray_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。原文地址：https://segmentfault.com/a/1190000006843916如果您對(duì)本系列文章...

Lowky 2019-08-20 10:50 評(píng)論0 收藏0
分享一下軟件測(cè)試面試歷程和套路，真的很實(shí)在

摘要：軟件測(cè)試自學(xué)秘訣面試失敗一天，心態(tài)穩(wěn)的一批，因?yàn)槊嬖嚨娜峭獍耸聨臀衣?lián)系的公司，工資全都是一萬(wàn)以上，之前只有四五千的自己根本不覺(jué)得自己能勝任。個(gè)人是去年年底零基礎(chǔ)轉(zhuǎn)行，兩三千培訓(xùn)費(fèi)學(xué)出來(lái)，學(xué)完后也是稀里糊涂，僅是知道功能測(cè)試就是找問(wèn)題，其他接口，性能，數(shù)據(jù)庫(kù)，python基礎(chǔ)，虛擬機(jī)搭建網(wǎng)站都實(shí)現(xiàn)了課程展示那樣。面試資...

Lyux 2021-11-23 09:51 評(píng)論0 收藏0
CSS2:寬度與高度疑難點(diǎn)解析

摘要：寬度與高度如果你的代碼里經(jīng)常出現(xiàn)和屬性說(shuō)明你對(duì)寬度與高度理解的不夠深文檔流翻譯很爛應(yīng)該為普通流或者常規(guī)流的高度字體高度與行高字和字之間是通過(guò)基線(xiàn)對(duì)齊的行高與默認(rèn)行高是字體設(shè)計(jì)室寫(xiě)進(jìn)去的不同字體行高不一樣跟字體設(shè)計(jì)有關(guān)系字體的建議行高寫(xiě)在了 CSS2:寬度與高度如果你的CSS代碼里經(jīng)常出現(xiàn)height和width屬性,說(shuō)明你對(duì)寬度與高度理解的不夠深 1.文檔流(Normal Flow)...

raledong 2019-08-29 15:43 評(píng)論0 收藏0