Mau bao cao assignment
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (679.65 KB, 8 trang )
TRƯỜNG CAO ĐẲNG THỰC HÀNH FPT POLYTECHNIC
XÂY DỰNG TRANG WEB
Giảng viên hướng dẫn
: Chu Thị Ngân
Sinh viên thực hiện
: Nguyễn Thị Ngọc Yến
Lớp
: EC18108
Hà Nội – 2022
Phần 1:
LAB 4: GIỚI THIỆU CSS(PHẦN II)
LAB 4: GIỚI THIỆU CSS (PHẦN II)
----------�---------MỤC TIÊU:
Kết thúc bài thực hành này bạn có khả năng
✔ Định dạng văn bản với CSS
✔ Định dạng liên kết với CSS
BÀI 1 (4 ĐIỂM)
Định dạng bài thơ sao như hình sau
Định dạng bổ sung bài thơ sao trong bài tập 1 của lab3 theo hướng dẫn sau
✔ Định nghĩa css cho em{}
o font-variant:small-caps;
WEB1013 – XÂY DỰNG TRANG WEB TRANG 1
LAB 4: GIỚI THIỆU CSS(PHẦN II)
o font-size:20px;
o word-spacing:2px;
o letter-spacing:1px;
o line-height:25px;
✔ Định nghĩa css cho h2{}
o color:white;
o text-shadow:0 0 5px red;
✔ Định nghĩa css cho body{}
o Text-align:center
BÀI 2 (3 ĐIỂM)
Tạo trang web có menu liên kết như hình sau
u cầu:
✔ Liên kết thường: màu blue, chữ hoa nhỏ, không gạch chân
✔ Liên kết đã nhấp vào: màu green
✔ Liên kết ở trạng thái có chuột: màu đỏ, có gạch chân
Hướng dẫn:
✔ Tạo danh sách liên kết
<div class="menu">
<a href="#">Trang chủ</a> |
WEB1013 – XÂY DỰNG TRANG WEB TRANG 2
LAB 4: GIỚI THIỆU CSS(PHẦN II)
...
</div>
✔ Định dạng liên kết
o .menu>a{}
▪ Font-variant:small-caps;
▪ Color:blue;
▪ Text-decoration:none;
o .menu>a:visited{}
▪ Color:green;
o .menu>a:hover{}
▪ Color:red;
▪ Text-decoration:underline;
BÀI 3 (3 ĐIỂM) – GV CHO THÊM
WEB1013 – XÂY DỰNG TRANG WEB TRANG 3
Phần 2.
Code kèm ảnh kết quả
Bài 1
Code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>bai1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
SAO
<em>
Một ngôi <strong>sao</strong> vừa rơi
Vụt tắt trên bầu trời
Hay là tên người ấy
Vụt tắt ở trong tôi?
</em>
<em>
Vẫn thấy trên bầu trời
Có mn vàn <strong>sao</strong> sáng
Mà ở trong lịng tôi
Như một hành lang vắng
</em>
<em>
Một ngôi <strong>sao</strong> vừa tắt
Bầu trời vẫn không buồn
<strong>Sao</strong> tên người ấy tắt
Trong lịng tơi cơ đơn?
</em>
</body>
</html>
Css
body{
text-align: center;
}
h2{
color: white;
text-shadow: 0 0 5px red;
}
em{
font-variant: small-caps;
font-size: 20px;
word-spacing: 20px;
letter-spacing: 1px;
line-height: 25px;
}
.doan1{
color: red;
}
.doan2{
color:blue
}
.doan3{
color:green
}
strong{
color: brown;
}
Kết quả
Bài 2
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>fpt poly</title>
<link rel="stylesheet" href="style_menu.css">
</head>
<body>
<img src="images/logo-fpt.jpg" alt="">
<hr>
<div class="menu">
<a href="#">Trang Chu</a>
<a href="#">Gioi thieu</a>
<a href="#">Lien he</a>
<a href="#">Gop y</a>
<a href="#">Hoi dap</a>
</div>
</body>
</html>
Css
.menu{
font-variant: small-caps;
text-align: center;
font-size: 25px;
}
.menu>a{
color: blue;
text-decoration: none;
}
.menu>a:visited{
color: green;
}
.menu>a:hover{
color: red;
text-decoration: underline;
}
Kết quả
