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

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:
Nội dung trích xuất từ tài liệu:
MỘT SỐ BÀI TẬP THIẾT KẾ WEB CĂN BẢN- CSS (khoa công nghệ thông tin)_3MỘ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ữ CSSBài tập 7: Dùng css áp dụng dóng hàng khi thiết kế form khôngdù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àovà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ácicon 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