✨
HTML 網頁設計
  • HTML 簡介
  • 1.網站三兄弟
    • 環境設定
    • HTML 基本結構
      • 文件架構
      • 元素
      • 文章-使用的元素
      • 超連結
      • Form表單
      • 嵌入第三方服務
    • Css 基本使用
      • 使用方式 Background
        • before、after
      • Box-sizing 介紹
      • Reset Css
      • CSS - 排版
        • CSS - 定位器
        • 導覽列篇
        • 置中篇 - 範例
        • 三欄式 - 範例
        • 兩欄式
      • css命名規則
    • JS 基本使用
      • 基本語法
      • 參數/arguments
      • param() 方法
      • 定時器(timer)
  • 2.css 進階使用
    • Display
    • Position
      • z-index and stacking context
      • Table
    • CSS選擇器
  • 3.其他JS工具
    • jQuery 簡介
      • $.cookie()
      • .animate
      • scrollTop
      • 使用效果
    • BootStrap
    • NODE.JS
      • 安裝 Node.js
        • SVG - 可縮放向量圖形
      • webpack
    • React
      • React Native
  • 4.曲線圖
    • Chart 前端操作
      • Datasets Style
      • Line 設定
  • 4.DataTable
    • Bootstrap Table
  • 99.其他內容
    • Webpack
    • IIS - 網際網路資訊服務
      • 環境設定
      • WEB IIS架站
Powered by GitBook
On this page
  • 範例一、Float
  • 範例二、width
  • 範例三、clear
  • 範例四、after

Was this helpful?

  1. 1.網站三兄弟
  2. Css 基本使用
  3. CSS - 排版

三欄式 - 範例

範例一、Float

<body>
    <div class="wrapper">

        <div class="header">頁首</div>

        <div class="navi">
            <ul>
                <li><a href="javascript:;">導覽</a></li>
                <li><a href="javascript:;">導覽</a></li>
                <li><a href="javascript:;">導覽</a></li>
                <li><a href="javascript:;">導覽</a></li>
                <li><a href="javascript:;">導覽</a></li>
            </ul>
        </div>

        <div class="main">
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
            <p>內容</p>
        </div>

        <div class="sidebar">
            <p>側邊欄</p>
            <p>側邊欄</p>
            <p>側邊欄</p>
            <p>側邊欄</p>
        </div>

        <div class="footer">頁尾</div>
        
    </div>
</body>
*::before, *::after, * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.wrapper {
  width: 1030px;
  margin-left: auto;
  margin-right: auto;
  background-color: pink;
}

.header {
  background-color: aquamarine;
}

.navi, .main, .sidebar {
  float: left;
}

.navi {
  width: 20%;
  background-color: blanchedalmond;
}

.main {
  width: 60%;
  background-color: coral;
}

.sidebar {
  width: 20%;
  background-color: darkgray;
}

.footer {
  clear: both;
  background-color: darkkhaki;
}
/*# sourceMappingURL=all.css.map */

範例二、width

@charset "utf-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrapper {
    width: 1030px;
    margin-left: auto;
    margin-right: auto;
    background-color: pink;
}

.header {
    background-color: aquamarine;
}

.navi,
.main,
.sidebar {
    float: left;
}

.navi {
    width: 20%;
    background-color: blanchedalmond;
}

.main {
    width: 60%;
    background-color: coral;
}

.sidebar {
    width: 20%;
    background-color: darkgray;
}

.footer {
    background-color: darkkhaki;
    clear: both;
}

.container {
    overflow: hidden;
}

範例三、clear

@charset "utf-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrapper {
    width: 1030px;
    margin-left: auto;
    margin-right: auto;
    background-color: pink;
}

.header {
    background-color: aquamarine;
}

.navi,
.main,
.sidebar {
    float: left;
}

.navi {
    width: 20%;
    background-color: blanchedalmond;
}

.main {
    width: 60%;
    background-color: coral;
}

.sidebar {
    width: 20%;
    background-color: darkgray;
}

.footer {
    background-color: darkkhaki;
}

.clearFix{
    display: block;
    clear: both;
}

範例四、after

@charset "utf-8";
*,
*::before,
*::after {
    box-sizing: border-box;
}

.wrapper {
    width: 1030px;
    margin-left: auto;
    margin-right: auto;
    background-color: pink;
}

.header {
    background-color: aquamarine;
}

.navi,
.main,
.sidebar {
    float: left;
}

.navi {
    width: 20%;
    background-color: blanchedalmond;
}

.main {
    width: 60%;
    background-color: coral;
}

.sidebar {
    width: 20%;
    background-color: darkgray;
}

.footer {
    background-color: darkkhaki;
}

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
Previous置中篇 - 範例Next兩欄式

Last updated 4 years ago

Was this helpful?