Chào mọi người !
Hôm nay Phong365 sẽ hướng dẫn đầu tiên về wapego về cách tạo giao diện phân cột cho phiên bản web wapego bằng css.
Thì việc tạo ra một bố cục phân cột không hề khó nhưng việc tính toán mọi thứ cho nó cân đối là một cái mà không phải một người tay ngang nào cũng làm được vì bố cục wapego thật sự rất khó để phân bố đúng theo ý thích.
Nên việc kết hợp giữa kỹ năng và óc sáng tạo không thể nào tạo ra được đâu bạn cần phải đầu tư thời gian và thủ thuật để làm được nó. :) Không nói dài vòng nữa mình sẽ đi vào vấn đề chính đây.
Bạn cần có
1. Một máy tính có Trình duyệt Opera PC hoặc cốc cốc, google chrome, fx...
2. Tài khoản wapego đăng trên 30 ngày hoặc ít hơn cũng được.
Và kiến thức kha khá về Css.
Bắt đầu nào :)
Trước tiên bạn sẽ tạo 1 tập tin là đầu trang nó sẽ chứa các bố cục của phần main_left cũng như main_all và tiêu đề.
Ở đây bạn sẽ có code html như sau.
Lung tung..
Code tập tin này sẽ là.
Và việc tiếp theo là tạo bố cục trên nền css bạn vào Thiết kế > Cài đặt phong cách và màu sắc của trang web > Phiên bản WEB dành cho máy tính cá nhân > Sửa toàn bộ mã CSS ( yêu cầu phải có kiến thức hiểu biết về CSS ) và bắt đầu viết css.
Hôm nay Phong365 sẽ hướng dẫn đầu tiên về wapego về cách tạo giao diện phân cột cho phiên bản web wapego bằng css.
Thì việc tạo ra một bố cục phân cột không hề khó nhưng việc tính toán mọi thứ cho nó cân đối là một cái mà không phải một người tay ngang nào cũng làm được vì bố cục wapego thật sự rất khó để phân bố đúng theo ý thích.
Nên việc kết hợp giữa kỹ năng và óc sáng tạo không thể nào tạo ra được đâu bạn cần phải đầu tư thời gian và thủ thuật để làm được nó. :) Không nói dài vòng nữa mình sẽ đi vào vấn đề chính đây.
Tạo Bố cục phân cột cho wapego.
Công Cụ Bao Gồm.Bạn cần có
1. Một máy tính có Trình duyệt Opera PC hoặc cốc cốc, google chrome, fx...
2. Tài khoản wapego đăng trên 30 ngày hoặc ít hơn cũng được.
Và kiến thức kha khá về Css.
Bắt đầu nào :)
Trước tiên bạn sẽ tạo 1 tập tin là đầu trang nó sẽ chứa các bố cục của phần main_left cũng như main_all và tiêu đề.
Ở đây bạn sẽ có code html như sau.
Lung tung..
<div class="main_all">
<div class="main_left">
Ok tiếp theo bạn tạo 1 tập tin nữa với tên giữa trang. Tập tin này có chức năng là đóng </div> main_left và thêm code cho main_right.Code tập tin này sẽ là.
</div><!-- end main_left-->
<div class="main_right">
Và cuối cùng bạn tạo 1 tập tin là cuối trang và thêm code html.
</div><!-- end main_right-->
</div><!-- end main_all-->
cách xấp xếp bạn vào thêm phần tử chọn "Bao gồm các tập tin khác" dán 3 tập tin đó vào theo thứ tự đầu giữa và cuối. |
| Bao gồm phần tử khác |
Phần này mình sẽ viết biểu trưng thôi cho các bạn tạm biết chứ không quá rập khuôn vì kích thước là do các bạn tự quyết định lấy.
Đầu tiên là chỉnh body trước nhé.
body{
color:#000;
width:100%;
margin: 0 auto;
}
tiếp theo là main_all
.main_all{
width:980px;
}
và main_left
.main_left{
float: left; /*nằm thiên về bên trái*/
width: 600px;
height: auto;
margin:10px;
}
tương tự main_right cũng vậy.
.main_right{
float: right; /*nằm thiên về bên phải*/
width: 310px;
height: auto;
margin: 10px;
}
width của 2 class main_left và main_right là tổng của width class main_all = 980px nhưng main_right chỉ có 310px vì chúng ta cần phải có 40px cho margin 2 class.
Lời cuối cùng
Công đoạn cuối cùng là bạn sẽ đặt các class khác và nội dung trong khoảng đầu trang đến giữa trang và giữa trang đến cuối trang thiết lập giao diện hoàn chỉnh và sử dung nhé :)
body margin mình có tô đỏ vì nó quan trọng lắm giúp cho web bạn không bị float về trái.
Mẹo!
Nếu các class không nằm đúng theo vị trí bạn có thể sử dụng chức năng "Kiểm tra phần tử " trình duyệt để sữa lại Như đoạn video sau.
Sau khi bạn cảm thấy ưng ý với kích thước đó bạn hãy vào trang sữa css với kích thước đó là được!