Giao diện với CSS – Phần 1
- September 2, 2009
- 17 comments
Tạo giao diện trong CSS là điều cuối cùng mà bạn muốn làm khi học CSS để hoàn toàn thoát khỏi bảng như những cách thường làm trước đây. CSS cho phép bạn tạo ra rất nhiều loại giao diện khác nhau như 2 cột, 3 cột, cố định, co giãn … Trong video tutorial này, tôi sẽ hướng dẫn bạn cách tạo ra giao diện bằng CSS. Tuy chúng ta sẽ không sử dụng hình ảnh mà chỉ tập trung vào phần chính là các thành phần trong giao diện. Nhưng nó sẽ là khung sường cho những giao diện phức tạp hơn sau này.
Thời lượng:16:44
Link Download định dạng .avi chất lượng cao: MegaUpload, MediaFire
File Size: 58.89MB
Get the Flash Player to see this content.
« Giao diện liquid với CSS – Phần 2
Anh thử dùng cái camasiastudio để quay màn hình nó giúp hiện thị toàn bộ màn hình đấy
Uhm, nhưng nếu để màn hình to quá thì dung lượng file cũng lớn hơn cho nên anh mới để cỡ nhỏ.
thanks anh Demon Warlock, e học được từ a nhiều quá.
Anh ơi, anh có thể nói thêm cho em sự khác nhau của Margin và Padding (2 cái này em hay nhầm quá…). Nếu mình design giao diện 3 cột Width: 960px thì width các cột thể nào cho phù hợp để không bị vỡ khung ạ ?
Về phần margin và padding thì em đọc thêm bài Box model để hiểu nhé
http://www.izwebz.com/css/css-box-model/
Còn về giao diện của em thì có bài này nè
http://www.izwebz.com/video-tutorials/giao-dien-voi-css/
Em cảm ơn anh rất nhiều. Hãy có những Tutorials tuyệt vời hơn nữa anh nhé !!!
Có 1 thắc mắc nhỏ như sau có gì DW trả lời giúp nha :
Tại sao ở mỗi div mình sẽ biết sử dụng giá trị nào cho phù hợp nhỉ ? ví dụ như annh trái canh phải, màu sắc , phông chữ, ….etc ~ vẫn chưa hiểu lắm chỗ này -
Vẫn không hiểu rõ ý của em lắm, em có thể nói rõ hơn được không?
hmm ví dụ như”
Trong 1 Div căn bản
Đại loại là trong 1 div khi mình xây dựng trong HTLM và các images khi mình cắt ra . Thì xài các syntax ra sao để không thiếu , không thừa
Hix không biết nói sao đây ….
Nếu anh hiểu đúng ý chú thì chú hỏi tại sao lại có những property đó trong thẻ div mà thẻ div khác lại không có đúng không?
Bởi vì CSS có rất nhiều rules, mỗi rule nó làm một việc. Ví dụ trong cái
<div id="mainContent">mình cần nó cách lề trên là 20px thì mình xàimargin: 20pxcòn nếu mình muốn nó có màu nền xanh thì mình xàibackground: blue;.Cần cái gì thì xài cái đó thôi, chứ không bắt buộc phải xài hết các rule vào một thành phần.
Hy vọng là hiểu đúng ý của chú.
um đại loại là các property trong các div.
Cái em chưa hiểu là: mình nên sử dụng các property khi viết css sao cho hợp lý phù hợp với cái template mình vẽ
Do chưa thể hình tượng mỗi thẻ div phải sử dụng ra sao để phù hợp và giống với cái template mình vẽ ra ( cái này chắc anh DW khi viết hình tượng ra cái template nó ra sao sẳn rồi nên thấy viết lèo lèo )
Chứ em thì kô vẽ ra hoặc không nhìn cái template thì chả biết là viết ra sao luôn. Nên hôm qua khi vẽ thử cái template đơn giản xong – viết HTML cũng khá basic chỉ có
‘#wrapper
và#header #logo #bannervà#main-content #sidebar #main-postvà#footer# . Nhưng khi bất đầu viết Css thì không thể viết được với cái đống images cắt ra ( khoảng 15 images ) do không biết là sử dụng property ra sao cho hợp lýEm thấy những video trước kia thì Bác hay sài một đoạn code rất dài để reset css
Nhưng những video gần đây thì Bác chỉ sài một đoạn code nho nhỏ:
* {margin: 0; padding: 0;}Thế thì sài cái nào ưu thế hơn vậy Bác DW
- Cám ơn bài viết của a nhiều lém !
Anh ơi, sao chia 3 cột lại phải chia cột Content thành maincontent (float:left) và cột Sidebar. Sao không chia từ đầu là: Header, Nav, Content, Sidebar, Footer luôn?? em hơi khó hiểu
Anh co the lam mot tutorial ve php de tao 1 giao dien 1 trang web ko ah?
Em van chua hieu lam ve cach thu trinh duyet cac file php khi ma ho thiet ke giao dien thanh cac trang con va index no lai.khong nhu htm co doi luc minh ke bang dua anh vao la da co mot giao dien trang web! cac anh giup em voi !Em cam on rat nhiu ? Chao cac anh
Cac anh phan hoi giup em voi !
Rất cám ơn anh về tut này
that tuyet nho co tut nay cua anh em moi biet cach tao giao dien mot cach chuan nhat cam on anh demon nhieu