1. Trang chủ
  2. » Công Nghệ Thông Tin

Bài tập CSS HTMT có lời giải

26 611 5

Đang tải... (xem toàn văn)

Tài liệu hạn chế xem trước, để xem đầy đủ mời bạn chọn Tải xuống

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang 26
Dung lượng 430,39 KB

Nội dung

Tài liệu này sẽ mang tới cho người đọc những kinh nghiệm, kỹ năng để làm các bài tập scss và html đơn giản nhất. Giúp người mới học về Css và HTML có thể tự học và tự xây dựng nên những ứng dụng cho riêng mình dựa vào những ví dụ sẵn có.

Bài tập CSS và HTML Bài 1: Tạo trang Web có nội dung có nội dung sử dụng tag bản, có tơ màu cho đoạn văn u cầu thiết kế: - Tiêu đề cửa sổ sử dụng tag - Tựa đề “Mẹ!” : chữ đậm có màu hồng đậm màu hồng nhạt #FF3399 #FECFFD - đoạn thơ: In nghiêng, có màu chữ khác - Mỗi đoạn cách dòng kẻ ngang - Tồn thơ có màu vàng nhạt #FFFFCC • Code: Bài 1 #wraper{ width: 500px; margin-left: 250px; } #head{ background-color:#FECFFD ; color:#FF3399; text-align: center; margin-bottom: 10px; } #page{ background-color:#FFFFCC ; text-align: center; margin-bottom: 10px; } #page1{ color: blue; text-align: center; margin-bottom: 10px; } #page2{ color:red ; text-align: center; margin-bottom: 10px; } #page3{ color:green ; text-align: center; margin-bottom: 10px; } MẸ! Mẹ trời thương Mẹ thiên đường trần gian Công ơn cha mẹ tựa biển trời Làm báo hiếu người ơi? Nếu chưa báo hiếu đừng bất hiếu Bất hiếu làm ta khổ muôn đời. Một đời vốn liếng mẹ trao Mẹ cho tất mẹ giữ riêng Mẹ hiền bà tiên Mẹ theo suốt hành trình đi Bài 2: Tạo trang Web có nội dung định dạng theo hình thức: Yêu cầu thiết kế: - Tiêu đề cửa sổ: Định dạng văn - Dạng cơng thúc hóa học biểu thức phương trình bậc có màu đỏ (#FF0000) - Đoạn code vòng lặp for: chữ màu xanh dương đậm, màu xám, có định dạng lề (#0000CC, #CCCCCC) • Code: Bài 2 #wraper{ width: 350px; margin-left: 500px; } #head{ color: green; text-align: center; margin-bottom: 10px; } #page{ text-align: left; margin-bottom: 10px; } #foot{ background-color:#CCCCCC ; color: #0000CC; margin-bottom: 10px; } a{ color: #FF0000; } le{ text-align: left; margin-left: 100px; } ce{ text-align: center; margin-left: 50px; } Định dạng văn bản Hóa học: Nước: H2O; Axit Sunfuric: H2SO4 Tốn học: Phương trình bậc 2: ax2 + bx + c= 0 Tin học:Vòng lặp For. For i = To 10 Tong = Tong + i Next Bài Tạo trang web có nội dung danh sách ăn ngon Hà Nội Yêu cầu thiết kế: - Nền màu vàng nhạt (#FFEDCA) - Hình ảnh canh trái - Biểu bảng: Dòng tiêu đề: Nền màu nâu đất, chữ màu trắng (#CC6600, #FFFFFF) - Màu xen kẽ dòng màu trắng màu vàng nhạt (#FFFFFF, #FFEDCA) • Code: h2{ color: #CC6600; font-size: 32px; margin-right: 75px; } p{ margin-left: 10px; } table{ width:400px; background-color:#FFEDCA; margin-left: 20px; } table,th,td{ border:1px solid gray; border-collapse: collapse; } th,td{ padding:5px ; } th{ background-color: #CC6600; color: white; } tr:nth-child(even){ background-color: #FFFFFF; }

Các ngon Hà Nội STTTên ăn 1Bánh Thanh Trì 2Xơi Hà Nội 3CHả cá Lã Vọng 4Cháo Cóc 5Bánh Gai Ninh Giang 6Bún Thang Hà Nội 7Canh Lẳng Bài 4: Tạo Web có nội dung chương trình học ngành lập trình Yêu cầu thiết kế: - Font chữ Tahoma có kích thước 12px - Biểu bảng: gồm 11 dòng cột - Dòng tiêu đề: mầu đỏ đậm, chữ mà trắng (#CC0033;#FFFFFF) • Code : Chương trình học ngành lập trình Nhóm học phần Môn học Số tiết Lý thuyếtThực hành 1 Tin học văn phòng Hệ điều hành Windows35 Sử dụng Internet35 Soạn thảo văn với MS Word2440 Bài Tạo trang web đăng nhập Yêu câu: - Tạo form Đăng nhập: Chữ đậm màu đỏ (#FF000) - Tạo table form, có chữ màu đen màu xanh lơ ( #00FFFF) - Khi chọn Đồng ý xuất nội dung mã người dùng có chữ màu xanh lam (#0000FF) • Code: Đăng nhập Đăng nhập Mã người dùng: Mật khẩu: Đồng ý

function ketqua() { document.getElementById("demo").innerHTML = document.getElementById("ma").value; } Bài 6: tạo web cho phép người dùng điền thông tin vào phiếu đăng ký tham gia chương trình khuyến Yêu câu: - Tạo Table form - Tạo điều khiển kiểu Text Fields, radio, drop-down box nút button - Nghề nghiệp: Giáo viên, bác sỹ, kỹ sư, khác - Tạo điều khiển nhãn dùng để in thông báo “bạn đăng ký thành công!!!” nhấn nút đồng ý Chữ màu hồng thẫm (#FF1493) - Màu xanh nước biển, chữ màu lục vàng (# 7FFFD4, #9ACD32) • Code: Phiếu đăng ký Phiếu đăng ký tham gia chương trình khuyến mãi Họ tên Địa chỉ Điện thoại Phái Nam Nữ Nghề nghiệp Giáo viên Kỹ sư Sinh viên Chọn sản phẩm tham gia Kem đánh răng Bột giặt Dầu gội đầu Sữa tắm Số người dự đoán Đồng ý

function ketqua(){ document.getElementById("demo").innerHTML="Bạn đăng ký thành công!!!"; } Bài Tạo trang web cho phép người dùng điền thông tin vào phiếu Đăng ký du lịch Yêu cầu: - Tạo table form - Tạo điều khiển text fields, checkbox, radio, Drop-down box, optionGroup, textarea nút button - Điều khiển chọn tour có danh sách: + Miền Bắc: Hà Nội – Hạ Long – Sapa; Hà Nội – Chùa Hương – Ninh Bình; Hà Nội – Cát Bà – Tuần Châu + Miền Trung: Huế - Bạch Mã – Đà Nẵng; Nha Trang – Đà Lạt; Buôn mê thuật – Giai lai – Kontum + Miền Nam: TP.HCM – Cần Thơ – Cà Mau; TP.HCM – Mỹ Tho - Tạo điều khiển nhãn dùng để in thông báo ”Bạn đăng ký thành công!!” Khi bạn nhấn vào nút đồng ý Chữ màu hồng thẫm (#FF1493) - Màu vàng nhạt, chữ màu xanh #FFFFCC; #0000FF • Code: Kiểm tra Đăng ký du lịch Họ tên Địa chỉ Điện thoại Khách Việt Nam Chọn tour Buôn Ma Thuột - Gia Lai Kontum - Đà Lạt Đà Nẵng TP.HCM Phương tiện Máy bay Xe ô tô Số lượng đoàn khách Người lớn Trẻ em Ghi thêm Đồng ý

function ketqua() { document.getElementById("demo").innerHTML = "Chúc mừng bạn đăng ký thành công!!!"; } Bài Tạo trang web cho phép người dùng điền thông tin vào phiếu Đăng ký thành viên Yêu câu: - Tạo Table form - Tạo điều khiển kiểu Text Fields, radio, drop-down box nút button - Ngày sinh từ năm 2015- 2010 • Code: Bài 2 ĐĂNG KÝ Full name Username Password Nhập lại Password Giới tính Nam Nữ Ngày sinh Ngày 1 Ngày 2 Ngày 3 Ngày 4 Ngày 5 Ngày 6 Ngày 7 Ngày 8 Ngày 9 Ngày 10 Ngày 11 Ngày 12 Ngày 13 Ngày 14 Ngày 15 Ngày 16 Ngày 17 Ngày 18 Ngày 19 Ngày 20 Ngày 21 Ngày 22 Ngày 23 Ngày 24 Ngày 25 Ngày 26 Ngày 27 Ngày 28 Ngày 29 Ngày 30 Ngày 31 Tháng 1 Tháng 2 Tháng 3 Tháng 4 Tháng 5 Tháng 6 Tháng 7 Tháng 8 Tháng 9 Tháng 10 Tháng 11 Tháng 12 Năm 2015 Năm 2014 Năm 2013 Năm 2012 Năm 2011 Năm 2010 Địa chỉ Avatar

Ngày đăng: 30/06/2019, 10:07

TỪ KHÓA LIÊN QUAN