Bài thực hành số 6 – Làm việc với CSS3 - ĐH FPT

Bài thực hành số 6 – Làm việc với CSS3 giúp sinh viên làm việc được với những thành phần mới trong CSS3 như border, gradient, transform, animation,...; truy vấn CSS3; layout với CSS3. Đây là tài liệu tham khảo hữu ích cho các bạn học lập trình.

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