MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- CSS (khoa công nghệ thông tin)_3

Chia sẻ: Meomeo Nguyen | Ngày: | Loại File: PDF | Số trang:6

Thêm vào BST

Báo xấu

535
lượt xem 170
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài tập 7: Dùng css áp dụng dóng hàng khi thiết kế form không dùng thẻ Table theo hình mẫu:

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- CSS (khoa công nghệ thông tin)_3

MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- CSS (khoa công nghệ thông tin)
Phần 3 : Ngôn Ngữ CSS Bài tập 7: Dùng css áp dụng dóng hàng khi thiết kế form không dùng thẻ Table theo hình mẫu: Hướng dẫn:  File css label{ float: left; width: 120px; font-weight: bold; } input, textarea{ width: 180px; margin-bottom: 5px; }
textarea{ width: 250px; height: 150px; } .boxes{ width: 1em; } #submitbutton{ margin-left: 120px; margin-top: 5px; width: 90px; } br{ clear: left; } input:focus, textarea:focus{ background-color: lightyellow; }  File HTML Form dùng Tableless Name
Email Address: Comments: Agree to Terms? Bài tập 8: Dùng css tạo gallery dạng thumbnail (Over chuột vào vào ảnh sẽ hiển thị khung chứa ảnh và nhiều nội dung khác) , thuận tiện cho việc tạo gallery trong phần admin hoặc trong các icon của mẫu tin
 File CSS .thumbnail{ position: relative; z-index: 0; } .thumbnail:hover{ background-color: transparent; z-index: 50; } .thumbnail span{ position: absolute; background-color: lightyellow; padding: 5px; left: 200px; border: 1px dashed gray; width:280px; text-align: justify; visibility: hidden; color: black; text-decoration: none; } .thumbnail span img{ border-width: 1;
padding: 2px; } .thumbnail:hover span{ /*CSS for enlarged image on hover*/ visibility: visible; top: 0; left: 60px; /*position where enlarged image should offset horizontally */ }  File HTML Table Đây là đoạn CSS đơn giản để làm gallery dạng thumbnail, rất thuận tiện cho việc tạo gallery trong phần admin hoặc trong các icon của mẫu tin