kipalog.com-Tạo website layout cơ bản TIL 739 HTML5 25 CSS3 49 Tấn Huy viết ngày 04082018

8 3 0
kipalog.com-Tạo website layout cơ bản TIL 739 HTML5 25 CSS3 49 Tấn Huy viết ngày 04082018

Đang tải... (xem toàn văn)

Thông tin tài liệu

Tạo website layout TIL 739 HTML5 25 CSS3 49 Tấn Huy viết ngày 04/08/2018 kipalog.com/posts/Tao-website-layout-co-ban Website layouts Như biết, bố cục website chia thành nhiều phần, phần đáng ý là: Header: Tiêu đề trang web, thường chỗ logo website Navigation Menu: Đây phần menu điều hướng, giúp cho người đọc truy cập vào phần khác trang web Content: Đây phần chứa nội dung trang web, nơi hiển thị quảng cáo website (thường nằm hai bên website nội dung viết) Footer: Đây phần cuối website, thường nơi chứa tên cá nhân tổ chức sở hữu website nơi chứa thông tin quyền Một số website cho vào navigation link ví dụ About, Contact, Help vân vân mây mây Chúng ta xem hình ảnh để hiểu rõ cấu trúc trang web (nó có nhiều biến thể khác khơng tn theo trật tự xếp này, nhiên layout có nhiều website dùng) Tạo layouts a Định hình website Trước muốn tạo website với phần nội dung chia xẻ 7, phân trái bổ 1/8 phải cần xác định trước cấu cúc website mà cần tạo, cần phải vẽ xác định rõ vị trí cần bố trí nội dung nào, dài rộng (tốt vẽ giấy, xấu giúp ta nhìn theo code dễ dàng hơn) Ở thiết kế theo bố cục hình b Tạo "xương sống" cho trang web Con người cần phải có xương web cần có "bộ xương" HTML trước muốn tơ điểm thêm màu mè cho Chúng ta bắt đầu viết HTML cho web Header Như Header "Tiêu đề trang web, thường chỗ logo website", chọn hình ảnh hay chữ làm tiêu đề tùy thích, chọn chữ cho đơn giản This is my branding

Say something about website

Và kết thu được: trông ổn phết Tiếp tục tới phần Navigation Menu Tiếp theo tạo menu điều hướng cho người dùng dễ dàng thao tác Ở dùng nav thẻ chuẩn HTML5 để tạo navigation menu
  • Home
  • News
  • About
Ta dùng combo ul li để tạo mục có menu, muốn thêm mục cần thêm dòng li vào Kết quả: 2/8 Cũng xem menu Content Sau có phần "biển hiệu" menu, tiếp tục tạo nội dung cho trang web Ở ta dùng section để xác định phần nội dung trang web dùng article để chứa phần nội dung nhỏ bên bao gồm nội dung viết, quảng cáo, etc Giả sử có phần nội dung hình Vì tạo layouts nên tạo cột không chia nhỏ lớn hình (làm cho nhanh :v) Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit Maecenas sit amet pretium urna Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit Praesent scelerisque tortor sed accumsan convallis.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit Maecenas sit amet pretium urna Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit Praesent scelerisque tortor sed accumsan convallis.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit Maecenas sit amet pretium urna Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit Praesent scelerisque tortor sed accumsan convallis.

Đây kết đống code 3/8 Ơ lại khơng chia nhỉ? Đây khung xương cho thơi chỉnh hình CSS sau Footer Cuối phần cuối trang web " thường nơi chứa tên cá nhân tổ chức sở hữu website nơi chứa thông tin quyền"

HyHy © 2018

kết quả: Hãy xem lại sau tất đống code ngoằn ngoèo có 4/8 Nhìn thơ khơng, "xương" mà Chúng ta tiến hành gắn da thịt cho đỡ thơ thơi nào! c Làm đẹp CSS Header Đây phần biển hiệu, làm trở nên màu mè to lớn tí để dễ quản bá tên tuổi header{ background-color:lightgrey; padding:1.5em; text-align:center; } Và: Bằng việt thêm background-color đưa text "biển hiệu" nhìn trơng ổn :3 Navigation Menu Đây phần lằng nhằng (chủ yếu dài ) Để làm menu đơn giản từ list xí xấu hồi cần bỏ phần bullet phía trước đưa hàng ngang cộng thêm tí màu mè nửa 5/8 nav{ background-color:#1abc9c; } nav ul{ margin:0; padding:0; list-style-type:none; } nav li{ display:inline-block; } nav li a{ display:inline-block; text-decoration:none; color:white; padding:14px 16px; } xem list xí xấu lúc Tada! Đúng ta mong muốn, hàng, bỏ đống bullet phía trước cịn có thêm màu mè Ta cần thêm tí hiệu ứng lúc rê chuột vào (để cịn biết chọn nửa ==!) nav li:hover{ background-color:orange; } Content Như nói trên, chia cột thành cột nằm hàng 6/8 *{ box-sizing:border-box; } section{ background-color:lightgrey; } article{ width:33.33%; float:left; background-color:#f0f0f0; padding:1em; } section:after{ content:""; clear:both; display:table; } Kết quả: Footer Phần việc trang trí giống với phần Header footer{ background-color:black; padding:0.8em; color:white; text-align:center; } Kết quả: Và tổng quan lại sau trang điểm CSS website có chút thay đổi (không đẹp, thẩm mĩ quá) Trước 7/8 Và sau Chưa đẹp lắm, yêu cầu đề :v Chí kiến thức để làm cộng với sáng tạo làm nhiều layouts khác đẹp Link tham khảo Vì học HTML + CSS W3School nên link nha 8/8 ... xương" HTML trước muốn tơ điểm thêm màu mè cho Chúng ta bắt đầu viết HTML cho web Header Như Header "Tiêu đề trang web, thường chỗ logo website" , chọn hình ảnh hay chữ làm tiêu đề tùy thích, chọn... something about website< /p> Và kết thu được: trông ổn phết Tiếp tục tới phần Navigation Menu Tiếp theo tạo menu điều hướng cho người dùng dễ dàng thao tác Ở dùng nav thẻ chuẩn HTML5 để tạo... trang web dùng article để chứa phần nội dung nhỏ bên bao gồm nội dung viết, quảng cáo, etc Giả sử có phần nội dung hình Vì tạo layouts nên tạo cột không chia nhỏ lớn hình (làm cho nhanh :v)

Ngày đăng: 28/11/2019, 12:50

Mục lục

  • Tạo website layout cơ bản TIL 739 HTML5 25 CSS3 49 Tấn Huy viết ngày 04/08/2018

    • 1. Website layouts

    • 2. Tạo layouts cơ bản

      • a. Định hình website

      • b. Tạo "xương sống" cho trang web

        • Header

        • Navigation Menu

        • Content

        • Footer

        • c. Làm đẹp bằng CSS

          • Header

          • Navigation Menu

          • Content

          • Footer

          • 3. Link tham khảo

Tài liệu cùng người dùng

Tài liệu liên quan