Layout trong HTML

  • Nguyễn Lê Điệp
  • 03-01-2017
  • 271
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Giao diện trong HTML

    Các trang web thường hiển thị nội dung trong nhiều cột và được gọi là giao diện của một trang web (layout). Trong HTML5 cung cấp các phần tử xác định những phần trong giao diện của trang web.

    <header>
    <nav>
    <section> <aside>
    <article>
    <footer>

    • Thẻ <header> - Thường định nghĩa phần đầu trang web
    • Thẻ <nav> - Thường được định nghĩa cho phần menu trang web
    • Thẻ <section> - Được định nghĩa một phần văn bản trang web.
    • Thẻ <article> - Xác định một văn bản độc lập của trang web
    • Thẻ <aside> - Xác định một sidebar của trang web
    • Thẻ <footer> - Thường được xác định phần chân trang
    • Thẻ <details> - Xác định phần chi tiết của một văn bản
    • Thẻ <summary> - Xác định tiêu đề cho các thẻ <details>

    Kỹ thuật giao diện

    Chúng ta có bốn cách khác nhau để bố trí cho một trang web

    • Bảng trong HTML
    • Thuộc tính float của CSS
    • Framework của CSS
    • Flexbox của CSS

    Kỹ thuật bảng


    Trong HTML phần tử <table> không được thiết kế tạo thành một trang web. Đối với phần tử <table> nó thường được dùng để hiển thị dữ liệu dưới dạng bảng. Nếu bạn sử dụng phần tử <table> để thiết kế ra trang web thì bạn sẽ khó khăn trong việc chỉnh sửa lại trang ở tương lai.

    Kỹ thuật Framework


    Nếu bạn muốn thiết kế web của bạn một cách nhanh chóng, bạn có thể sử dụng sự hỗ trợ của Bootstrap.

    Kỹ thuật float


    Trong quá trình thiết kế ra một trang web chúng ta cũng thường sử dụng thuộc tính float của CSS. Nhược điểm: Có đôi khi vô tình nó làm sẽ gây ra sự sai lệnh về cách bố trí của một trang web.
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    div.frame {
        width: 100%;
        border: 1px solid gray;
    }
    header, footer {
        padding: 1em;
        color: white;
        background-color: blue;
        clear: left;
        text-align: center;
    }
    nav {
        float: left;
        max-width: 160px;
        margin: 0;
        padding: 1em;
    }
    nav ul {
        list-style-type: none;
        padding: 0;
    } 
    nav ul a {
        text-decoration: none;
    }
    article {
        margin-left: 170px;
        border-left: 1px solid gray;
        padding: 1em;
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div class="frame">
      <header>
         <h1>Kennis.vn</h1>
      </header>
      <nav>
        <ul>
          <li><a href="/list/lesson">Bài học</a></li>
          <li><a href="/other/introduce">Giới thiệu</a></li>
          <li><a href="/other/contact">Liên hệ</a></li>
        </ul>
      </nav>
      <article>
        <h1>Kennis</h1>
        <p>Kennis.vn là nơi chia sẻ những kiến thức miễn phí dành cho mọi lứa tuổi</p>
        <p>cung cấp các bài hướng dẫn học tập miễn phí và trực tuyến theo từng bước về các ngôn ngữ PHP, MySQL, SQL, C, C#, HTML, CSS, Wordpress, SEO, Powerpoint, Word, Excel, Hệ điều hành, Công nghệ,...</p>
      </article>
      <footer>Copyright &copy; 2016 Kennis.vn</footer>
    </div>
    </body>
    </html>
    Xem ví dụ

    Kỹ thuật Flexbox

     

    Flexbox là một cách thiết kế trang wbe với chế độ trong CSS3. Sử dụng flexbox phải thiết kế với các chế độ hiển thị của từng màn hình hác nhau. Nhược điểm: Với Flexbox nó không hoạt động trên trình duyệt IE10 trở về trước.

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    .flex-frame {
        display: -webkit-flex;
        display: flex;  
        -webkit-flex-flow: row wrap;
        flex-flow: row wrap;
        text-align: center;
    }
    .flex-frame > * {
        padding: 15px;
        -webkit-flex: 1 100%;
        flex: 1 100%;
    }
    .article {
        text-align: left;
    }
    header {
      background: blue;
      color:white;
    }
    footer {
      background: red;
      color:white;
    }
    .nav {
      background:yellow;
    }
    .nav ul {
        list-style-type: none;
        padding: 0;
    }
    .nav ul a {
        text-decoration: none;
    }
    @media all and (min-width: 768px) {
        .nav {
          text-align:left;
          -webkit-flex: 1 auto;
          flex:1 auto;
          -webkit-order:1;
          order:1;
        }
        .article {
          -webkit-flex:5 0px;
          flex:5 0px;
          -webkit-order:2;
          order:2;
        }
        footer {
          -webkit-order:3;
          order:3;
        }
    }
    </style>
    </head>
    <body>
    <div class="flex-frame">
      <header>
        <h1>Kennis.vn</h1>
      </header>
      <nav class="nav">
      <ul>
        <li><a href="list/lesson">Bài học</a></li>
            <li><a href="other/introduce">Giới thiệu</a></li>
            <li><a href="other/contact">Liên hệ</a></li>
      </ul>
      </nav>
      <article class="article">
        <h1>Kennis</h1>
          <p>Kennis.vn là nơi chia sẻ những kiến thức miễn phí dành cho mọi lứa tuổi</p>
          <p>cung cấp các bài hướng dẫn học tập miễn phí và trực tuyến theo từng bước về các ngôn ngữ PHP, MySQL, SQL, C, C#, HTML, CSS, Wordpress, SEO, Powerpoint, Word, Excel, Hệ điều hành, Công nghệ,...</p>
      </article>
      <footer>Copyright &copy; 2016 Kennis.vn</footer>
    </div>
    </body>
    </html>
    Xem ví dụ
    Chúc các bạn thành công!devil
    Từ khóa:

    Layout trong HTML

    Layout trong HTML

    Layout trong HTML

    Layout trong HTML
    Layout trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    435
    - Hôm qua:
    643
    - Tuần này:
    4.699
    - Tuần trước:
    4.927
    - Tháng này:
    13.808
    - Tháng trước:
    42.741
    - Năm này:
    196.602
    - Năm trước:
    17.373
    - Tổng cộng:
    213.975