WEB302_ HTML5 & CSS3 Lab6
1
Bài thự c hành số 6 – Làm việ c vớ i CSS3
Chú ý chung vớ i toàn bộ các buổ i lab:
-Toàn bộ bài tậ p trong các buổ i lab, bắ t buộ c sinh viên phả i viế t mã bằ ng tay, sử dụ ng
mộ t trong các chư ơ ng trình soạ n thả o mã sau:
oNotepad + +
oE- Text Editor
Mụ c tiêu
Buổ i thự c hành số 6 giúp sinh viên làm việ c đư ợ c vớ i nhữ ng thành phầ n mớ i trong CSS3:
- Border, gradient, transform, animation, …
- Truy vấ n CSS3
- Layout vớ i CSS3
WEB302_ HTML5 & CSS3 Lab6
2
Bài 1
Sử dụ ng thuộ c tính column-count trong CSS3 để thự c hiệ n thiế t kế layout dạ ng 4 cộ t như sau:
Hư ớ ng dẫ n thự c hiệ n:
1. Khở i tạ o mộ t class để chứ a vùng nộ i dung text, có thuộ c tính column-count:4
2. Chú ý mộ t số thuộ c tính:
-moz-column-count:4; -webkit-column-count:4;
3. Sử dụ ng mộ t đoạ n văn bấ t kỳ để đư a vào vùng class
WEB302_ HTML5 & CSS3 Lab6
3
Bài 2
Sử dụ ng layout về hình ả nh dạ ng đơ n giả n như sau:
Tùy biế n cách trình bày hình ả nh từ hàng ngang thành dạ ng hàng dọ c như sau:
Gợ i ý:
- Sử dụ ng thuộ c tính
WEB302_ HTML5 & CSS3 Lab6
4
odisplay:box; box-orient:horizontal;
- sử dụ ng hình ả nh có trong thư mụ c images
Bài 3
Kế t hợ p nhữ ng thuộ c tính đã làm ở bài tậ p số 1, 2 thự c hiệ n dàn layout sau theo chuẩ n HTML5/
CSS3
WEB302_ HTML5 & CSS3 Lab6
5
Yêu cầ u nộ p bài
Cuố i giờ thự c hành, sinh viên tạ o thư mụ c theo tên < Tên đăng nhậ p SV> _Lab6, chứ a tấ t cả
sả n phẩ m củ a nhữ ng bài lab trên, nén lạ i thành file zip và upload lên mụ c nộ p bài tư ơ ng ứ ng
trên LMS.