ĐỀ CHÍNH THỨC KỲ THI TUYỂN SINH VÀO LỚP 10 THPT CÁC TỈNH THÀNH NĂM HỌC 2020 –...
Bai 4 Thiết kế SideBar của trang web
1. TRƯỜNG ĐẠI HỌC SƯ PHẠM – ĐẠI HỌC ĐÀ NẴNG
KHOA TIN HỌC
HỌC PHẦN: ELEARNING
BÀI CÁO CÁO: HỌC HTML5, CSS3 VÀ JS
TRÊN SUBLIME TEXT
Nhóm Passion:
1. BÙI THỊ KỸ
2. NGUYỄN THỊ TRANG
3. TRẦN THỊ LÀNH
4. NGUYỄN THỊ KIỀU NƯƠNG
5. NGUYỄN THỊ NGỌC BÌNH
4. Phần 1: Login
Bước 1: Tạo khung cho phần login bằng thẻ HTML
- Thẻ p: chứa nội dung “đăng nhập”, class = “head-form”
- Thẻ form: chứa 3 thẻ input ( text, password và submit), class =
“form-login”
5. Phần 1: Login
Bước 2: Chỉnh sửa CSS
Chú ý: đoạn CSS dưới đây sẽ định dạng con trỏ thành biểu tượng bàn tay
khi hover vào thanh đăng nhập
.head-form:hover{
cursor: pointer;
}
6. Phần 1: Login
Bước 2: Chỉnh sửa CSS
Chú ý:
Muốn định dạng CSS riêng cho một thẻ input thì thực hiện theo cú pháp này:
input[type=submit]{
…. CSS….
}
7. Phần 1: Login
Bước 3: Tạo hiệu ứng ẩn hiện bằng jquery
Điều kiện cần thiết: thư viện jquery.js
- Các bạn có thể download và nhúng file này vào HTML
- Hoặc dung link CDN online
Cú pháp :
<head>
…
<script src = “file jquery.js”></script>
…
</head>
Tiếp theo:
- Tạo file với đuôi .js
- Dùng hàm toggle để thực hiện show/hide login
8. Phần 1: Login
Bước 3: Tạo hiệu ứng ẩn hiện bằng jquery
$(document).ready(function(){
$(".head-form").click(function(){
$(".form-login").toggle();
});
});
Tạo sự kiện click tại thẻ p (
class = “head-form”)
Function toggle() sẽ tác động
đến form ( class = “form-
login”) cho phép ẩn/hiện.
9. HTML CSS
Phần 2: Quảng cáo
- Thẻ p ( class = “head-form”) có CSS giống phần login
- Phần quảng cáo sẽ cho 1 thẻ img
- Ngoài ra, có thể thay thế img bằng một phần tử khác tùy ý.
Ví dụ: Thẻ iframe – cho phép show toàn bộ nội dung của một trang web khác
