Giao diện với CSS – Phần 1
- September 2, 2009
- 63 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
video của anh hay quá.cám ơn anh nhiều nha
Video của anh rất là hay tks anh về tất cả các video này nha. Em có tí xíu vấn đề mún hỏi anh là .Anh có thể lướt sơ qua về giao diện của trag web http://onl.ladykillah.com/#Home được ko a.E dùng FireBug mà nhòm chả ra cái khỉ j hết … Anh có thể lướt qua tí về các thẻ Div với lại anh địh dạng CSS căn bản lun giúp e cái ..
Cảm ơn anh nhìu nhìu
Anh àh, TUT của anh rất hay
Nhưng còn thiếu chỗ này
Anh có nói là sẽ chỉnh sao cho cột bên trái, nó sẽ kéo xuống đụng với bottom, Nhưng cả 2 tut anh ko nhắc lại. Mong anh hướng dẫn chỗ ấy luôn
Em search bài faux column nhé
Vâng cám ơn anh rất nhiều, em đã học dc cách tạo 2-3 cột từ bài này của anh.
#content { }
#content div#maincontent { } // cái này có nghĩa sao vậy anh
nếu em viết #maincontent có được không
cảm ơn anh
cái đó chỉ là bạn muốn hướng đến chính xác div#maincontent nằm trong div#content thui , nếu như không có tên trùng thì bạn để #maincontent cũng đc
Anh ơi trong cái video này anh có nhắc đến cái video mà tạo giao diện co giản sao em không thấy vậy……..Anh có thể cho em cái link với
@X-Jinger
Đây mà bác, tìm trong mục video css/html là có ngay thôi mà. Mắc công hỏi làm chi
http://www.izwebz.com/video-tutorials/css-html/giao-dien-css-liquid/
@binh: Bạn xem qua FAQs các câu hỏi thường gặp nha http://www.izwebz.com/faqs/
cho em hỏi cái tool anh dùng edit css là gì vậy ah.em mới học thiết kế thì cần dùng những tool nào.em xin chân thành cảm ơn.
mấy anh ơi thiết kế dùm em một giao diện web bằng css nha.chỉ giao diện thôi không cần chức năng.
phải có ít nhất một style.css và index.html
chủ đè là:
tùy chọn
bán điện thoại
tin tức
trang phim
……………………………..
làm ùi gửi ve địa chỉ mail : tochithien@yahoo.com.vn dùm hè
cảm ơn các anh chị nhiều
Vãi hàng chú em lol
@tochithien: bạn vào lộn địa chỉ rồi, izwebz chỉ hướng dẫn và hỗ trợ các bạn học thiết kế và phát triển web. Những yêu cầu thế này bạn cố gắng lên google tìm kiếm xem sao? Kiên trì một chút bạn nhé!
Dạo này mới thấy Kaylaximuoi online nhỉ ^^
hi CS, dạo này mình có chút việc bận, sẽ cố gắng online thường xuyên hơn ^-^
thuê mấy anh ý làm thì còn tạm xem xét được
cảm ơn website, mới xem 1 clip của anh DW hay quá :X
đòi hỏi quá đáng thế
rất hay. nhưng em nghĩ anh lên hệ thống lại các bài giảng của mình. em tìm mấy phần tiếp theo hơi khó. cuối cùng là cám ơn anh rất nhiều.
@Dang Quoc Anh: Anh DW cũng dùng camtasia để quay đấy chứ, cả tớ cũng thế. Nhưng mà ngặt nổi nếu quay toàn màng hình thì khi render ra file phim dung lượng sẽ cực lớn. Nên thường chỉ để màng hình có giá trị nhỏ thui, như 1024×720,v.v…Dung lượng render ra sẽ vừa phải.
ai cho em xin code html trong chõ định dạng css này với.em chỉ có code html ở video tao trang web đầu tiên mà không có code html trong video này.hic .xem video nhưng không có code html khó hiểu quá ah
thanks các bác nhé
thân
Nho anh ma e biet dung div thay table .Cam on anh nhieu lam .
Anh Demon Warlock ơi em hỏi chút ? em có làm theo bài lab tạo giao diện 2 cột như anh chỉ nhưng sao em test trên 2 trình duyệt fire fox và chrome thì ok không bị vỡ khung khi zoom lớn lên còn thèn IE em zoom lên thì bị vỡ ra 1 ít không hiểu lí do gì . sau đây là link demo của em anh xem code và cho em ý kiến nhá . thanks anh đã có những tuts hay .
thiếu mất link demo hihi :http://vuhoanghp.net/div_block_css.htm
Chào bạn,
Mình muốn hỏi tại sao bạn không chia làm 3 cột theo cách cách để left col và main content đều float left và right col float right? Cách này có nhược điểm gì so với cách bạn sử dụng?
Mình cũng là người ngoại đạo, cũng chỉ học CSS vì yêu thích thiết kế giống bạn thôi
Rất cảm ơn những chia sẻ của bạn.
that tuyet nho co tut nay cua anh em moi biet cach tao giao dien mot cach chuan nhat cam on anh demon nhieu
Rất cám ơn anh về tut này
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 !
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
- Cám ơn bài viết của a nhiều lém !
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
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 #banner`và`#main-content #sidebar #main-post`và`#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ý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 `
__abENT__lt;div id=__abENT__quot;mainContent__abENT__quot;__abENT__gt;` mình cần nó cách lề trên là 20px thì mình xài `margin: 20px` còn nếu mình muốn nó có màu nền xanh thì mình xài `background: 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ú.
hmm ví dụ như”
Trong 1 Div căn bản
`
#main-content {`margin:
padding:
font-size:
border:
corlor:
background:
__abENT__#46;__abENT__#46;etc__abENT__#46;__abENT__#46;__abENT__#46;__abENT__#46;
}
Đạ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 ….
Vẫn không hiểu rõ ý của em lắm, em có thể nói rõ hơn được không?
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 -
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é !!!
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/
thanks anh Demon Warlock, e học được từ a nhiều quá.
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ỏ.
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