摘要:傳統(tǒng)布局盒狀模型結(jié)合屬性浮動以及定位屬性設(shè)計的各式傳統(tǒng)布局形式。
1、傳統(tǒng)布局
盒狀模型結(jié)合 display 屬性、float 浮動以及 position 定位屬性設(shè)計的各式傳統(tǒng)布局形式。
2、說再多不如動手實踐,下面舉三個例子
html 部分代碼:
1 <section> 2 3 <div class="layout-one"> 4 <div class="header">headerdiv> 5 <div class="banner">bannerdiv> 6 <div class="content">main-contentdiv> 7 <div class="footer">footerdiv> 8 div> 9 10 11 <div class="layout-two"> 12 <div class="header">headerdiv> 13 <div class="banner">bannerdiv> 14 <div class="content"> 15 <div class="content-left">content-leftdiv> 16 <div class="content-right">content-rightdiv> 17 div> 18 <div class="footer">footerdiv> 19 div> 20 21 22 <div class="layout-three"> 23 <div class="header">headerdiv> 24 <div class="main-banner">bannerdiv> 25 <div class="main-content"> 26 <div class="content1">content1div> 27 <div class="content2">content2div> 28 div> 29 <div class="footer">footerdiv> 30 div> 31 section>
css樣式部分代碼:
1 /* 基本樣式 */ 2 section { 3 width: 1200px; 4 height: 300px; 5 margin: 0 auto; 6 padding: 10px; 7 } 8 .layout-one, .layout-two, .layout-three { 9 float: left; 10 margin-left: 20px; 11 } 12 div { 13 width: 300px; 14 } 15 16 /* 可復用樣式 */ 17 .header { 18 height: 25px; 19 text-align: center; 20 background-color: bisque; 21 line-height: 25px; 22 } 23 .banner { 24 height: 50px; 25 text-align: center; 26 line-height: 50px; 27 background-color: aquamarine; 28 } 29 .footer { 30 height: 25px; 31 text-align: center; 32 line-height: 25px; 33 background-color: black; 34 color: #ffffff; 35 } 36 37 /* 結(jié)構(gòu)1 基礎(chǔ)樣式 */ 38 .layout-one .content { 39 height: 60px; 40 text-align: center; 41 line-height: 60px; 42 background-color: aqua; 43 } 44 45 /* 結(jié)構(gòu)2 基礎(chǔ)樣式 */ 46 .layout-two .content { 47 height: 60px; 48 text-align: center; 49 line-height: 60px; 50 background-color: aqua; 51 } 52 .layout-two .content-left { 53 width: 100px; 54 float: left; 55 border-right: 1px solid #000000; 56 } 57 .layout-two .content-right { 58 width: 199px; 59 float: left; 60 } 61 62 /* 結(jié)構(gòu)3 基礎(chǔ)樣式 */ 63 .main-banner { 64 width: 200px; 65 height: 50px; 66 margin: 0 auto; 67 background-color: aquamarine; 68 text-align: center; 69 line-height: 50px; 70 } 71 .main-content { 72 position: relative; 73 width: 200px; 74 height: 60px; 75 margin: 0 auto; 76 text-align: center; 77 line-height: 60px; 78 } 79 .content1 { 80 width: 60px; 81 height: 60px; 82 position: absolute; 83 top: 0px; 84 left: 30px; 85 background-color: aqua; 86 } 87 .content2 { 88 width: 60px; 89 height: 60px; 90 position: absolute; 91 top: 0px; 92 right: 30px; 93 background-color: aqua; 94 }
頁面效果:
通過上述的三個例子,我們可以發(fā)現(xiàn):
為了更近時代的進步,所以我們需要更深入的去學習,如:響應式設(shè)計中的,流式布局,彈性布局等等!加油吧,騷年!
?
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/1148.html
摘要:實戰(zhàn)之微信錢包騰訊服務界面網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。對于移動端適配,不同的公司不同的團隊有不同的解決方案。柵格系統(tǒng)用于處理頁面多終端適配的問題。 grid實戰(zhàn)之微信錢包 騰訊服務界面 CSS3網(wǎng)格布局是讓開發(fā)人員設(shè)計一個網(wǎng)格并將內(nèi)容放在這些網(wǎng)格內(nèi)。而不是使用浮動制作一個網(wǎng)格,實際上是你將一個元素聲明為一個網(wǎng)格容器,并把元素內(nèi)容置于網(wǎng)格中。 移動端頁面適配—...
摘要:絕對底部前端掘金來自國外的設(shè)計達人,純,可以實現(xiàn)當正文內(nèi)容很少時,底部位于窗口最下面。有效解決圖片使用單位邊角缺失的問題前端掘金起因在移動端使用布局時圖片也需要用單位。 CSS 絕對底部 - 前端 - 掘金來自國外的設(shè)計達人,純CSS,可以實現(xiàn): 當正文內(nèi)容很少時,底部位于窗口最下面。當改變窗口高度時,不會出現(xiàn)重疊問題。甚至,創(chuàng)造該CSS的人還專門成立一個網(wǎng)站介紹這個CSS底部布局方案...
摘要:前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點分為新聞熱點開發(fā)教程工程實踐深度閱讀開源項目巔峰人生等欄目。它能夠為我們提供類似于預處理器命名空間等多方面的輔助。 前端每周清單專注前端領(lǐng)域內(nèi)容,以對外文資料的搜集為主,幫助開發(fā)者了解一周前端熱點;分為新聞熱點、開發(fā)教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關(guān)注【前端之巔】微信公眾號(ID:f...
閱讀 2401·2021-09-08 09:45
閱讀 3340·2021-09-08 09:45
閱讀 3097·2019-08-30 15:54
閱讀 3348·2019-08-26 13:54
閱讀 1405·2019-08-26 13:26
閱讀 1384·2019-08-26 13:23
閱讀 909·2019-08-23 17:57
閱讀 2178·2019-08-23 17:14