<font id="zqva1"></font>
<rt id="zqva1"></rt>
  • <tt id="zqva1"></tt>
    <cite id="zqva1"></cite>

    <cite id="zqva1"><noscript id="zqva1"></noscript></cite>
      <rp id="zqva1"><meter id="zqva1"></meter></rp>

        <cite id="zqva1"></cite>
          <b id="zqva1"></b>
          <rp id="zqva1"></rp>
          <cite id="zqva1"></cite>

          <rt id="zqva1"></rt>

        1. <rp id="zqva1"></rp>

          使用flex實現5種常用布局

          時間:?2017-12-05閱讀:?3776標簽:?布局

          Sticky Footer

          經典的上-中-下布局。

          當頁面內容高度小于可視區域高度時,footer 吸附在底部;當頁面內容高度大于可視區域高度時,footer 被撐開排在 content 下方

          demo link


          <body>
            <header>HEADER</header>
            <article>CONTENT</article>
            <footer>FOOTER</footer>
          </body>
          body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
          }
          article {
            flex: auto;
          }


          Fixed-Width Sidebar

          在上-中-下布局的基礎上,加了左側定寬 sidebar。

          demo link


          <body>
            <header>HEADER</header>
            <div class="content">
              <aside>ASIDE</aside>
              <article>CONTENT</article>
            </div>
            <footer>FOOTER</footer>
          </body>
          body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
          }
          .content {
            flex: auto;
            display: flex;
          }
          .content article {
            flex: auto;
          }


          Sidebar

          左邊是定寬 sidebar,右邊是上-中-下布局。

          demo link


          <body>
            <aside>ASIDE</aside>
            <div class="content">
              <header>HEADER</header>
              <article>CONTENT</article>
              <footer>FOOTER</footer>
            </div>
          </body>
          body {
            min-height: 100vh;
            display: flex;
          }
          aside {
            flex: none;
          }
          .content {
            flex: auto;
            display: flex;
            flex-direction: column;
          }
          .content article {
            flex: auto;
          }


          Sticky Header

          還是上-中-下布局,區別是 header 固定在頂部,不會隨著頁面滾動。

          demo link


          <body>
            <header>HEADER</header>
            <article>CONTENT</article>
            <footer>FOOTER</footer>
          </body>
          body {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            padding-top: 60px;
          }
          header {
            height: 60px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 0;
          }
          article {
            flex: auto;
            height: 1000px;
          }


          Sticky Sidebar

          左側 sidebar 固定在左側且與視窗同高,當內容超出視窗高度時,在 sidebar 內部出現滾動條。左右兩側滾動條互相獨立。

          demo link


          <body>
            <aside>
              ASIDE
              <p>item</p>
              <p>item</p>
              <!-- many items -->
              <p>item</p>
            </aside>
            <div class="content">
              <header>HEADER</header>
              <article>CONTENT</article>
              <footer>FOOTER</footer>
            </div>
          </body>
          body {
            height: 100vh;
            display: flex;
          }
          aside {
            flex: none;
            width: 200px;
            overflow-y: auto;
            display: block;
          }
          .content {
            flex: auto;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
          }
          .content article {
            flex: auto;
          }
          


          來源:https://github.com/meikidd/flex-layout


          站長推薦

          1.阿里云: 本站目前使用的是阿里云主機,安全/可靠/穩定。點擊領取2000元代金券、了解最新阿里云產品的各種優惠活動點擊進入

          2.騰訊云: 提供云服務器、云數據庫、云存儲、視頻與CDN、域名等服務。騰訊云各類產品的最新活動,優惠券領取點擊進入

          3.廣告聯盟: 整理了目前主流的廣告聯盟平臺,如果你有流量,可以作為參考選擇適合你的平臺點擊進入

          鏈接: http://www.modern-decoration.com.cn/article/detial/218

          CSS五種方式實現 Footer 置底

          頁腳置底(Sticky footer)就是讓網頁的footer部分始終在瀏覽器窗口的底部。當網頁內容足夠長以至超出瀏覽器可視高度時,頁腳會隨著內容被推到網頁底部;但如果網頁內容不夠長,置底的頁腳就會保持在瀏覽器窗口底部。

          響應式布局和自適應布局詳解

          自適應布局給了你更多設計的空間,因為你只用考慮幾種不同的狀態。而在響應式布局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小,但仍然也算做差異。它使得把握設計最終效果變得更難,同樣讓響應式布局更加的難以測試和預測

          前端響應式布局

          Responsive design,意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

          彈性(Flex)布局的使用

          最近我參與實施的兩個項目中,一個頁面交互復雜,而另一個相對傳統,兩個項目相比之下凸顯出了頁面布局樣式的時間占比不可忽視,使用了彈性布局代碼量精簡了不少

          CSS:BFC規則的應用自適應兩欄布局

          兩欄布局是寫頁面時經常用到的,要想實現兩欄布局,就需要明白BFC規則,Block formatting context,直譯為“塊級格式化上下文”,可以簡單的理解它為一個獨立的區域,把區域內部元素與外部元素區分開,兩者互不干擾。

          css怎么讓文字豎著排列?

          css可以使用css樣式writing-mode:tb-rl來設置文字豎著排列。writing-mode屬性設置或檢索對象的內容塊固有的書寫方向。

          css3 彈性盒布局的使用-Flex

          css3 的Flex彈性盒的布局是一個用于頁面布局的全新CSS3模塊功能。它可以把列表放在同一個方向(從左到右或從上到下排列),并且讓這些列表能延伸到占用可用的空間。較為復雜的布局可以通過嵌套一個伸縮容器

          CSS實現自適應兩欄布局方法

          浮動+margin第一種: 左側欄固定寬度向左浮動,右側主要內容則用margin-left留出左側欄的寬度,默認寬度為auto,自動填滿剩下的寬度。 第二種:左邊絕對定位(脫離文檔流,不占位置)

          CSS中的圣杯布局與雙飛翼布局

          什么是圣杯布局?所謂圣杯布局就是用于實現一個兩側寬度固定,中間寬度自適應的三欄布局;什么是雙飛翼布局?和圣杯布局一樣,雙飛翼布局也是用于實現一個兩側寬度固定,中間寬度自適應的三欄布局,就是布局的形式上存在差異 

          網站設計和布局的重要性和過程

          網站的設計是吸引客戶的非常重要的因素。如今,互聯網上存在著很多競爭,每個人都可以點擊其客戶,但是只有少數人能吸引他們。這通常是由于網站給人的第一印象。

          內容以共享、參考、研究為目的,不存在任何商業目的。其版權屬原作者所有,如有侵權或違規,請與小編聯系!情況屬實本人將予以刪除!

          文章投稿關于web前端網站點搜索站長推薦網站地圖站長QQ:522607023

          小程序專欄: 土味情話心理測試腦筋急轉彎幽默笑話段子句子語錄成語大全運營推廣

          国产精品高清视频免费 - 视频 - 在线观看 - 影视资讯 - 唯爱网