Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPTMasterCode.vn
Bố cục website với CSS:
Mô hình CSS Box
Làm việc với div và AP div
Xếp chồng và xếp gối các thành phần
Tạo style cho nội dung hộp
Điều chỉnh vị trí
Tổ chức và phác thảo website
Cách làm việc với bảng (table) trên trang web:
Khởi tạo bảng với HTML
Định dạng style cho bảng với CSS/ HTML
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
BÀI 3 Bố cục trang web & bảng (TABLE) trên trang web - Giáo trình FPTMasterCode.vn
Bố cục website với CSS:
Mô hình CSS Box
Làm việc với div và AP div
Xếp chồng và xếp gối các thành phần
Tạo style cho nội dung hộp
Điều chỉnh vị trí
Tổ chức và phác thảo website
Cách làm việc với bảng (table) trên trang web:
Khởi tạo bảng với HTML
Định dạng style cho bảng với CSS/ HTML
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTMasterCode.vn
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...MasterCode.vn
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTMasterCode.vn
Làm việc với web form:
Giao diện và chức năng của form
Phương pháp submit thông tin của form lên server
Xác nhận các thông tin đầu vào của form
Khởi tạo và sửa đổi form trên Dreamweaver CS4
Lưu ý khi làm việc với form
Hiểu về các khái niệm liên quan tới web:
Web động phía client
XML, AJAX, RIA
Spry và cách làm việc với spry trong Dreamweaver
CS4
Làm việc với web form:
Giao diện và chức năng của form
Phương pháp submit thông tin của form lên server
Xác nhận các thông tin đầu vào của form
Khởi tạo và sửa đổi form trên Dreamweaver CS4
Lưu ý khi làm việc với form
Hiểu về các khái niệm liên quan tới web:
Web động phía client
XML, AJAX, RIA
Spry và cách làm việc với spry trong Dreamweaver
CS4
Giáo trình thiết kế web - Thiết kế web với DreamweaverKhanhPham
Giáo trình thiết kế web - Thiết kế web với Dreamweaver
Để tìm hiểu kỹ hơn các bạn hãy truy cập:
Website: www.zend.vn
Facebook: https://www.facebook.com/zendvngroup
Youtube: www.youtube.com/user/luutruonghaila
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...MasterCode.vn
Điều chỉnh môi trường làm việc trên Dreamweaver
CS4
Làm việc với những thành phần đa phương tiện
(multimedia) trên webpage:
Chèn file flash, video, âm thanh
Sử dụng panel Assets
Làm việc với plug-in
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...MasterCode.vn
Sử dụng thư viện và các mẫu có sẵn:
Thiết kế dựa trên module
Các thành phần module trong Dreamweaver:
• Snippets
• Thành phần thư viện
• Mẫu (template)
Soạn thảo HTML trong môi trường Code
Sử dụng thư viện và các mẫu có sẵn:
Thiết kế dựa trên module
Các thành phần module trong Dreamweaver:
• Snippets
• Thành phần thư viện
• Mẫu (template)
Soạn thảo HTML trong môi trường Code
Bài 2 Cơ chế làm việc của CSS - Giáo trình FPTMasterCode.vn
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Cách áp dụng CSS cho trang web
Cấu trúc & Quy tắc khai báo CSS
Pseudo-Class (lớp giả)
Tính kế thừa trong CSS
Khai báo giá trị màu sắc và số trong CSS
Tìm hiểu về box (hộp), cấu trúc box trên một trang
của website:
Tầm quan trọng
Kích thước
Vị trí
Thuộc tính của box:
Thuộc tính về nội dung
Thuộc tính về vị trí
Thuộc tính về hiển thị
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
Làm việc với dự án website
Cấu trúc thư mục khi tiến hành dự án website
Tạo kiến trúc website
@import css
Background & màu nền
Text & màu văn bản
Menu
Khung Sidebar
Form
Đánh dấu trang
Vùng nội dung
Bài 1 XHTML: Cấu trúc nội dung web - Giáo trình FPTMasterCode.vn
Nhắc lại về HTML
Định nghĩa XHTML, CSS
Cách thiết kế layout trang web
Làm quen với cấu trúc một trang web
Làm quen với những plugin kiểm tra mã XHTML và
CSS trên những trình duyệt khác nhau
BÀI 1 Bước đầu làm quen với ADOBE DREAMWEAVER CS4 và những thao tác cơ bản tr...MasterCode.vn
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
Những khái niệm về website:
Thành phần của trang web
Tên miền, địa chỉ IP
Client – server
Công việc thiết kế website
Những kiến thức cơ bản về HTML & XHTML
Làm quen với Adobe Dreamweaver CS4
Khởi tạo một trang web và làm việc với những thành
phần trên trang web: văn bản, hình ảnh
BÀI 6 Làm việc với thành phần FORM, SPRY trong DREAMWEAVER CS4 - Giáo trình FPTMasterCode.vn
Làm việc với web form:
Giao diện và chức năng của form
Phương pháp submit thông tin của form lên server
Xác nhận các thông tin đầu vào của form
Khởi tạo và sửa đổi form trên Dreamweaver CS4
Lưu ý khi làm việc với form
Hiểu về các khái niệm liên quan tới web:
Web động phía client
XML, AJAX, RIA
Spry và cách làm việc với spry trong Dreamweaver
CS4
Làm việc với web form:
Giao diện và chức năng của form
Phương pháp submit thông tin của form lên server
Xác nhận các thông tin đầu vào của form
Khởi tạo và sửa đổi form trên Dreamweaver CS4
Lưu ý khi làm việc với form
Hiểu về các khái niệm liên quan tới web:
Web động phía client
XML, AJAX, RIA
Spry và cách làm việc với spry trong Dreamweaver
CS4
Giáo trình thiết kế web - Thiết kế web với DreamweaverKhanhPham
Giáo trình thiết kế web - Thiết kế web với Dreamweaver
Để tìm hiểu kỹ hơn các bạn hãy truy cập:
Website: www.zend.vn
Facebook: https://www.facebook.com/zendvngroup
Youtube: www.youtube.com/user/luutruonghaila
BÀI 4 Tinh chỉnh môi trường làm việc và làm việc với cách thành phần trên web...MasterCode.vn
Điều chỉnh môi trường làm việc trên Dreamweaver
CS4
Làm việc với những thành phần đa phương tiện
(multimedia) trên webpage:
Chèn file flash, video, âm thanh
Sử dụng panel Assets
Làm việc với plug-in
BÀI 5 Tối ưu hóa thiết kế web và cách làm việc cơ bản trong chế độ hiển thị C...MasterCode.vn
Sử dụng thư viện và các mẫu có sẵn:
Thiết kế dựa trên module
Các thành phần module trong Dreamweaver:
• Snippets
• Thành phần thư viện
• Mẫu (template)
Soạn thảo HTML trong môi trường Code
Sử dụng thư viện và các mẫu có sẵn:
Thiết kế dựa trên module
Các thành phần module trong Dreamweaver:
• Snippets
• Thành phần thư viện
• Mẫu (template)
Soạn thảo HTML trong môi trường Code
BÀI 1 Những khái niệm đầu tiên về HTML5 - Giáo trình FPTMasterCode.vn
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
Định nghĩa về HTML5
Tổng quát về cú pháp của HTML5
Một số thành phần mới của HTML5
Tổng quan về HTML5 API (giao diện lập trình ứng
dụng) và công nghệ hỗ trợ
Giới thiệu CSS3
Huong dan thiet ke website bang photoshop
Hôm nay chúng ta sẽ tìm hiểu làm thế nào để tạo một Web Layout (bố cục web) một cách chuyên nghiệp và gọn gàng. ở bài Tut này, chúng ta sẽ tìm hiểu cách sử dụng Gradients, bộ lọc Noise và một số đường Line 1px để tạo chiều sâu một cách tinh tế cho website.
Bài Tut được chia thành 2 phần: phần đầu tiên, ta sẽ thiết kế bố cục web trong Photoshop sau đó ta sẽ chuyển file PSD vừa tạo thành những thành phần được hiển thị trong HTML/CSS.
Qua từng bước thưc hiện bằng chính đôi tay của bạn, bạn sẽ thấy được toàn bộ quá trình thực hiện một trang web và làm thế nào để thiết kế và mã hóa một trang web chuyên nghiệp.
Để xem full tài liệu Xin vui long liên hệ page để được hỗ trợ
:
https://www.facebook.com/garmentspace/
https://www.facebook.com/thuvienluanvan01
HOẶC
https://www.facebook.com/thuvienluanvan01
https://www.facebook.com/thuvienluanvan01
tai lieu tong hop, thu vien luan van, luan van tong hop, do an chuyen nganh
GIÁO TRÌNH 2-TÀI LIỆU SỬA CHỮA BOARD MONO TỦ LẠNH MÁY GIẶT ĐIỀU HÒA.pdf
https://dienlanhbachkhoa.net.vn
Hotline/Zalo: 0338580000
Địa chỉ: Số 108 Trần Phú, Hà Đông, Hà Nội
2. NHẮC LẠI BÀI TRƯỚC
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Tìm hiểu về một số Layout phổ biến
Layout nổi (float) & Layout tuyệt đối (absolute)
Ngăn tràn bố cục
Một số vấn đề khi căn chỉnh cột Layout
Bài 7 - Thiết kế các thành phần giao diện
3. MỤC TIÊU BÀI HỌC
Làm quen với các thành phần trên trang web
Định nghĩa CSS cho những thành phần:
Table
Form
Lists & Menu
Làm việc với drop-down menu
Làm quen với các thành phần trên trang web
Định nghĩa CSS cho những thành phần:
Table
Form
Lists & Menu
Làm việc với drop-down menu
Bài 7 - Thiết kế các thành phần giao diện
5. THÀNH PHẦN (COMPONENT)
Là thành phần mở rộng
Là một ứng dụng trên trang web
Được sử dụng trên trang web để thể hiện những
chức năng nhất định:
Hiển thị danh sách
Menu
…
Được trình bày trong những box trên trang web
Bài 7 - Thiết kế các thành phần giao diện
Là thành phần mở rộng
Là một ứng dụng trên trang web
Được sử dụng trên trang web để thể hiện những
chức năng nhất định:
Hiển thị danh sách
Menu
…
Được trình bày trong những box trên trang web
8. BẢNG MẶC ĐỊNH
<table border="1">
<tr>
<td> </td>
<td>Styling</td>
<td>Coding</td>
</tr>
<tr>
<td>Ngôn ngữ</td>
<td>XHTML & CSS</td>
<td>PHP & SQL</td>
</tr>
<tr>
<td>Focus</td>
<td>Interface design</td>
<td>Back-end code</td>
</tr>
</table>
Bài 7 - Thiết kế các thành phần giao diện
<table border="1">
<tr>
<td> </td>
<td>Styling</td>
<td>Coding</td>
</tr>
<tr>
<td>Ngôn ngữ</td>
<td>XHTML & CSS</td>
<td>PHP & SQL</td>
</tr>
<tr>
<td>Focus</td>
<td>Interface design</td>
<td>Back-end code</td>
</tr>
</table>
9. CÁC THẺ THÀNH PHẦN CỦA BẢNG
tr
td
th
Bài 7 - Thiết kế các thành phần giao diện
table
tr th
10. THUỘC TÍNH CỦA BẢNG
Những thành phần định nghĩa trong CSS khi làm
việc với table:
Background
Border
Text
Kích thước
Bài 7 - Thiết kế các thành phần giao diện
Những thành phần định nghĩa trong CSS khi làm
việc với table:
Background
Border
Text
Kích thước
11. ĐỊNH STYLE CHO BẢNG
table.basic_lines {width:300px; border-top:3px solid #069;}
table.basic_lines th { border-bottom:2px solid #069;} /* định nghĩa vùng header cho
bảng*/
table.basic_lines td {border-bottom:1px solid #069;}/*định nghĩa style cho các ô của
bảng*/
Bài 7 - Thiết kế các thành phần giao diện
13. FORM
Dùng để lấy dữ liệu của người dùng để gửi tới máy
chủ
Sử dụng để nhập dữ liệu từ người dùng:
Form đăng ký
Form đăng nhập
Form xác thực
Sử dụng như dạng biểu mẫu
Bài 7 - Thiết kế các thành phần giao diện
Dùng để lấy dữ liệu của người dùng để gửi tới máy
chủ
Sử dụng để nhập dữ liệu từ người dùng:
Form đăng ký
Form đăng nhập
Form xác thực
Sử dụng như dạng biểu mẫu
14. FORM
Trong form chứa những thành phần điều khiển
(control)
Thành phần điều khiển nhập
liệu
Bài 7 - Thiết kế các thành phần giao diện
Thành phần lựa chọn
Thành phần submit
15. ĐỊNH STYLE CHO THÀNH PHẦN FORM
CSS:
input {font-size:.8em;}
label {display:block; clear:both; font-size:85%;font-weight:bold; margin:.5em
0 0; padding-bottom:.5em;}
XHTML:
<label for="user_name">UserName</label>
<inputtype="text" id="user_name" name="user_name" size="18"
maxlength="36"tabindex="1" />
Bài 7 - Thiết kế các thành phần giao diện
16. Định dạng style cho nút submit:
ĐỊNH STYLE CHO THÀNH PHẦN FORM
CSS:
input[type="submit"] { float:right; margin:.5em 0; }
XHTML:
<div>
<input type="submit" value="Submit this Form" />
</div>
Bài 7 - Thiết kế các thành phần giao diện
CSS:
input[type="submit"] { float:right; margin:.5em 0; }
XHTML:
<div>
<input type="submit" value="Submit this Form" />
</div>
17. ĐỊNH STYLE CHO FORM
form {
float:left;
width:24em;
margin:20px 0 0 50px;
padding:1em .75em .5em;
border:1px solid #AAA;
}
input { font-size:.8em;}
input:focus, textarea:focus, select:focus {border:2px solid #7AA;}
label {display:block; clear:both; font-size:85%;font-weight:bold; margin: .5em 0 0;
padding-bottom: .5em;}
input[type="submit"] { float:right; margin: .5em 0;}
Bài 7 - Thiết kế các thành phần giao diện
form {
float:left;
width:24em;
margin:20px 0 0 50px;
padding:1em .75em .5em;
border:1px solid #AAA;
}
input { font-size:.8em;}
input:focus, textarea:focus, select:focus {border:2px solid #7AA;}
label {display:block; clear:both; font-size:85%;font-weight:bold; margin: .5em 0 0;
padding-bottom: .5em;}
input[type="submit"] { float:right; margin: .5em 0;}
19. DANH SÁCH (LIST) & MENU
List: là những nhóm mục văn bản liên quan tới đối
tượng. Cơ sở của việc điều hướng trên trang web
Menu: danh sách lựa chọn để chuyển hướng lựa
chọn
Bài 7 - Thiết kế các thành phần giao diện
20. LIST
3 loại list:
Không thứ tự: được gạch đầu dòng
Thứ tự: đánh số theo thứ tự
Định nghĩa: có chứa những mục con (subitem),
thường được sử dụng làm chú giải
Bài 7 - Thiết kế các thành phần giao diện
23. ÁP STYLE CHO LIST
Áp dụng CSS để định dạng kiểu cho thẻ ul, li:
Thay đổi được kiểu hiển thị (thả xuống, thả sang
ngang)
Thay đổi kiểu bullet
CSS:
ul {border:0; margin:10px 30px 10px
1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0;
padding:.3em 0; text-indent:.5em}
Áp dụng CSS để định dạng kiểu cho thẻ ul, li:
Thay đổi được kiểu hiển thị (thả xuống, thả sang
ngang)
Thay đổi kiểu bullet
Bài 7 - Thiết kế các thành phần giao diện
CSS:
ul {border:0; margin:10px 30px 10px
1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0;
padding:.3em 0; text-indent:.5em}
24. MENU
Danh sách tạo ra các link điều hướng
CSS:
a { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:none}
a:hover { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:underline}
XHTML:
<ul>
<li><a href="#">Gibson</a></li>
<li><a href="#">Fender</a></li>
<li><a href="#">Rickenbacker</a></li>
<li><a href="#">Ibanez</a></li>
</ul>
Danh sách tạo ra các link điều hướng
Bài 7 - Thiết kế các thành phần giao diện
CSS:
a { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:none}
a:hover { font-family:Tahoma, Geneva, sans-serif; font-size:12px; color:#000; text-
decoration:underline}
XHTML:
<ul>
<li><a href="#">Gibson</a></li>
<li><a href="#">Fender</a></li>
<li><a href="#">Rickenbacker</a></li>
<li><a href="#">Ibanez</a></li>
</ul>
25. MENU
Định dạng style cho menu:
Cách căn chỉnh trên IE6 & 7
CSS:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size: .75em;
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding: .3em0; text-indent: .5em;}
li:first-child {border-top:2px solid #069;}
Định dạng style cho menu:
Cách căn chỉnh trên IE6 & 7
Bài 7 - Thiết kế các thành phần giao diện
CSS:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size: .75em;
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;}
li {border-bottom:2px solid #069; margin:0; padding: .3em0; text-indent: .5em;}
li:first-child {border-top:2px solid #069;}
CSS:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size: .75em;
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;
border-top: 2px solid #069}
li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}
26. MENU
Cách căn chỉnh trên IE6 & 7
CSS:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size: .75em;
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;
border-top: 2px solid #069}
li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}
Cách căn chỉnh trên IE6 & 7
Bài 7 - Thiết kế các thành phần giao diện
CSS:
body {font:1em verdana, arial, sans-serif;}
div#listcontainer {border:1px solid #000; width:150px; font-size: .75em;
margin:20px;}
ul {border:0; margin:12px 20px 10px 1.25em; padding:0; list-style-type:none;
border-top: 2px solid #069}
li {border-bottom:2px solid #069; margin:0; padding: .3em 0; text-indent: .5em}
29. DROP-DOWN MENU
Ứng dụng rộng rãi trên nhiều website
Đáp ứng được việc hiển thị nhiều nội dung chuyển
hướng
Thiết kế phong phú
Ứng dụng rộng rãi trên nhiều website
Đáp ứng được việc hiển thị nhiều nội dung chuyển
hướng
Thiết kế phong phú
Bài 7 - Thiết kế các thành phần giao diện
31. DROP-DOWN MENU
CSS:
#multi_drop_menus li { border:2px solid blue; list-style-
type:none;float:left;position:relative;}
#multi_drop_menus li ul { position:absolute; width:7em;}
#multi_drop_menus li ul li{width:100%;}
#multi_drop_menus { behavior:url(../../lib/js_tools/csshover.htc); font-family:lucida,
arial, sans-serif; border:1px solid #686;float:left;}
#multi_drop_menus li ul { position:absolute; width:7em;display:none;}
#multi_drop_menus li:hover ul {display:block;}
#multi_drop_menus li:hover ul {display:block;}
CSS:
Bài 7 - Thiết kế các thành phần giao diện
#multi_drop_menus li { border:2px solid blue; list-style-
type:none;float:left;position:relative;}
#multi_drop_menus li ul { position:absolute; width:7em;}
#multi_drop_menus li ul li{width:100%;}
#multi_drop_menus { behavior:url(../../lib/js_tools/csshover.htc); font-family:lucida,
arial, sans-serif; border:1px solid #686;float:left;}
#multi_drop_menus li ul { position:absolute; width:7em;display:none;}
#multi_drop_menus li:hover ul {display:block;}
#multi_drop_menus li:hover ul {display:block;}
32. DROP-DOWN MENU
HTML:
<div id="multi_drop_menus">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
HTML:
Bài 7 - Thiết kế các thành phần giao diện
<div id="multi_drop_menus">
<ul>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Item 1a</a></li>
<li><a href="#">Item 1b</a></li>
</ul>
</li>
<li><a href="#">Item 2</a></li>
</ul>
</div>
33. TỔNG KẾT
Thành phần (component) là những đối tượng
thường xuyên được sử dụng trên trang web:
Menu & List
Bảng danh sách
Form
Các thành phần được định sẽ sẽ có dáng vẻ chuyên
nghiệp hơn, cũng như thu hút sự chú ý
Trong mỗi thành phần đều có những thuộc tính
riêng biệt
Sử dụng những giá trị block, none của thuộc tính
position để phân cấp menu dropdown
Thành phần (component) là những đối tượng
thường xuyên được sử dụng trên trang web:
Menu & List
Bảng danh sách
Form
Các thành phần được định sẽ sẽ có dáng vẻ chuyên
nghiệp hơn, cũng như thu hút sự chú ý
Trong mỗi thành phần đều có những thuộc tính
riêng biệt
Sử dụng những giá trị block, none của thuộc tính
position để phân cấp menu dropdown
Bài 7 - Thiết kế các thành phần giao diện