Ktl-icon-tai-lieu

Bài thực hành CSS

Được đăng lên bởi laithuy2203
Số trang: 9 trang   |   Lượt xem: 271 lần   |   Lượt tải: 0 lần
Bài thực hành CSS

Lab 03
Hướng dẫn tạo menu ngang – menu sổ xuống
Mục tiêu
 Sử dụng các thẻ cơ bản trong HTML5.
 Tạo CSS – áp dụng cho menu

Phần I: step by step

Bài 1
Tạo menu như hình sau:

Các bước thực hiện
Bước 1: Tạo trang html (menu-css3.html)

IT Research Department

@BKAP 2015 ver 1.0

Page [1/9]

Hướng dẫn thực hành

Hình 1: Code trang menu-css3.html
Bước 2: Thực thi trang menu-css3.html kết quả như hình sau

Hình 2: Thực thi trang html trên trình duyệt
IT Research Department

@BKAP 2015 ver 1.0

Page [2/9]

Bài thực hành CSS
Bước 3: Tạo trang css (menu-css3.css) – Liên kết đến trang html như hình 1.
 Viết mã css cho menu

Kết quả

Hình 3: Khi áp dụng css cho các thẻ nav, ul, li
 Thiết lập menu ngang: thiết lập độ cao, màu nền, đường viền bo tròn, tô màu
gradient theo từng trình duyệt.
Mã css:

IT Research Department

@BKAP 2015 ver 1.0

Page [3/9]

Hướng dẫn thực hành
Kết quả:

Hình 4: Khi áp dụng css cho các thẻ nav (Tô màu, bo tròn,..)
 Định nghĩa css cho thẻ li trong menu (trong thẻ nav)
Chú ý khi sử dụng thuộc tính position (giá trị thường dùng: relative, absolute,..)
Position: relative -> Định vị trí tương đối cho thành phần. Vị trí tương đối phụ thuộc vào
thành phần bao ngoài.
Position: absolute -> Định vị trí tuyệt đối cho thành phần, khi sử dụng giá trị này thì vùng
xử lý của thành phần sẽ phụ thuộc vào nội dung của thành phần.

Kết quả:

Hình 5: Khi áp dụng css cho các thẻ li trong nav (Định vị các phần tử li)
IT Research Department

@BKAP 2015 ver 1.0

Page [4/9]

Bài thực hành CSS
 Định dạng phần tử hiển thị theo dạng khối

Kết quả:

Hình 6: Khi áp dụng css cho thẻ a
 Bỏ đường kẻ ở phần tử đầu, phần tử cuối và tạo hiệu ứng khi người dùng hover
chuột đến menu.

IT Research Department

@BKAP 2015 ver 1.0

Page [5/9]

Hướng dẫn thực hành

 Định dạng hiển thị menu con và ẩn đi

Kết quả

Hình 7: Khi áp dụng css để ẩn menu con
 Hiển thị menu con

IT Research Department

@BKAP 2015 ver 1.0

Page [6/9]

Bài thực hành CSS
Kết quả:

Hình 8: Khi áp dụng css để hiển thị menu con
 Bỏ các đường kẻ viền bên phải trong menu con và tạo đường kẻ ngang

Kết quả:

Hình 9: Bỏ đường kẻ dọc và tạo đường kẻ ngang

IT Research Department

@BKAP 2015 ver 1.0

Page [7/9]

Hướng dẫn thực hành

 Định dạng phần tử trong menu con

 Tạo các icon cho menu con

Kết quả:

IT Research Department

@BKAP 2015 ver 1.0

Page [8/9]

Bài thực hành CSS

Phần II Bài tập tự làm

HẾT

IT Research Department

@BKAP 2015 ver 1.0

Page [9/9]

...
Bài thc hành CSS
IT Research Department @BKAP 2015 ver 1.0 Page [1/9]
Lab 03
Hướng dn to menu ngang menu s xung
Mc tiêu
S dng các th cơ bản trong HTML5.
To CSS áp dng cho menu
Phần I: step by step
Bài 1
Tạo menu như hình sau:
Các bước thc hin
c 1: To trang html (menu-css3.html)
Bài thực hành CSS - Trang 2
Để xem tài liệu đầy đủ. Xin vui lòng
Bài thực hành CSS - Người đăng: laithuy2203
5 Tài liệu rất hay! Được đăng lên bởi - 1 giờ trước Đúng là cái mình đang tìm. Rất hay và bổ ích. Cảm ơn bạn!
9 Vietnamese
Bài thực hành CSS 9 10 492