Thiết lập reset css, body, a cho file style và layout phần header của trang index

loading...

Hôm nay chúng ta bắt đầu layout tổng thể cho trang chủ nhé bạn, sau nhiều lần nghiên cứu làm sao để bạn hiểu và nắm nhanh, tôi nghĩ rằng lấy sản phẩm có sẳn để làm ví dụ chắc bạn sẽ dễ nắm bắt hơn, đồng thời để bạn thấy được thành quả bạn sẽ đạt được nếu chăm chỉ đọc các bài viết chia sẽ của tôi

hướng dẫn thiết kế theme wordpress

Bạn theo đường link sau để vào trang chủ mà tôi đã làm sẵn để xem sơ qua: http://testcodehtml.fcwordpress.net/simplepro/
Bạn a, mấu chốt của trang chủ của chúng ta là phần css, phần này trước hết bạn đi vào reset là các thuộc tính của các đối tượng css, có nghĩa là đưa các giá trị về 0 và thiết lập các giá trị font, margin, backgroud cho body, a

@import “css/reset.css”;// cái này là code có sẵn, nó sẽ đưa tất cả các đối tượng của css về 0, bạn không cần quan tâm nhiều chỉ gọi vào và sử dụng thôi

Trên đây chung ta vừa đi vào phần cơ bản của bất ký mọt file css nào, như trong bài kế hoạch html cho dự án này, chúng ta đã đi tạo cấu trúc file và css thì bạn chứa trong file style.css nhé
Dể sử dụng nó bạn sử dụng dòng lệnh sau: <link rel=”stylesheet” href=”style.css” media=”screen” />

Đầu tiên chúng ta sẽ đi gặm dần từ phần của trang chủ này, có lẽ phần đầu tiên là phần đầu mà chúng ta thường gọi là header. Phần header của chúng ta sẽ đi đến phần menu nhé bạn. Sau  đây tôi sẽ layout phần header như sau. Nhìn vào chúng ta thấy cần 3 div lớn để làm công việc này

Phần html:

Phần css:

Bạn đọc đoạn code trên thì sẽ hiểu, nếu rành tiếng anh, có lẽ tôi không có nhiều thời gian để đi giải thích từ dòng tôi chỉ lưu ý những thuộc tính quang trọng
Để canh giữa một div bạn sử dụng margin: 0 auto, để các div nằm theo vị trí mong muốn bạn xài float: left hoặc right, sử dụng thuộc tín này cộng với độ rộng của nó nó sẽ không chồng lên nhau và sắp xếp các div theo đúng thứ tự(div để bao, chứa các đối tượng khác của css)
p: khi nào xài nó, khi chúng ta cần sắp xắp nhiều đối thượng theo đoạn
a : đối tượng liên kết
img: đối tượng hình ảnh
Tổi giải thích thêm một số đối tượng css, vì bài này tôi hướng đến bạn chưa biết gì về css. Như vậy phần header của chung ta sẽ có 3 div, một div bao ngoài, một div bên trái chứa logo, slogan và một div chưa banner quảng cáo, tôi muốn đi thêm phần menu nhưng bài hôm nay quá dài rồi, thôi tạm dừng nhé.
Hẹn gặp lại ở phần menu

 

Cập nhật bài viết mới qua Email


Theo dõi tôi
Đăng ký nhận tin mới
đăng ký nhận tin mới

Hướng dẫn thiết kế theme

Các functions thường dùng

  • Hotline: 0912 889 416

Mọi sự sao chép xin ghi rõ nguồn là fcwordpress.net

Chuyên trang về wordpress: hướng dẫn thiết kế theme, plugin, thủ thuật wordpress