Để có thể là cho thẻ ul li nằm giữa ta dùng display flex môn Cơ sở vật lý cho tin học | Học viện Nông nghiệp Việt Nam

Với display block ,thì cái khối bao quanh thẻ sẽ chiếm toàn bộ trangkhi đó sử dụng text align vào thẻ bất kì sẽ khiến nó ra giữaVới văn bản quá dài : dùng overflow để tùy biến trong khối không bị tràn ra ngoài khối. Dùng overscrollbar behavior để ngăn việc cuộn theo khi hết văn bản trong khối. Tài liệu giúp bạn tham khảo ôn tập và đạt kết quả cao. Mời bạn đọc đón xem!

Trường:

Học viện Nông nghiệp Việt Nam 2 K tài liệu

Thông tin:
3 trang 1 tháng trước
Tác giả:
Student
Lan Anh Trần
docx.com.vn

Bình luận

Vui lòng đăng nhập hoặc đăng ký để gửi bình luận.

Để có thể là cho thẻ ul li nằm giữa ta dùng display flex môn Cơ sở vật lý cho tin học | Học viện Nông nghiệp Việt Nam

Với display block ,thì cái khối bao quanh thẻ sẽ chiếm toàn bộ trangkhi đó sử dụng text align vào thẻ bất kì sẽ khiến nó ra giữaVới văn bản quá dài : dùng overflow để tùy biến trong khối không bị tràn ra ngoài khối. Dùng overscrollbar behavior để ngăn việc cuộn theo khi hết văn bản trong khối. Tài liệu giúp bạn tham khảo ôn tập và đạt kết quả cao. Mời bạn đọc đón xem!

17 9 lượt tải Tải xuống

Môn: Cơ sở vật lý cho tin học (HVNN) 17 tài liệu

Trường: Học viện Nông nghiệp Việt Nam 2 K tài liệu

Thông tin:

3 trang 1 tháng trước

Tác giả:

Profile Lan Anh Trần
lOMoARcPSD| 48541417
Để có thể là cho thẻ ul li nằm giữa ta dùng display flex display: flex;: Sử dụng
flexbox để căn chỉnh các phần tử của danh sách ngang hàng. Phần làm cho bức ảnh
nền hài hòa:
background-size: cover;
width: 100%;
height: 1000px;
background-position: center; background-attachment: fixed; hình nề!n cố# định và khống thay đố(i khi trình duyệt được
phóng to hoặc thu nho(.
Phần làm cho thanh menu trở lên đẹp mắt:
#header {
background-color: #333; color: #fff;
}
#header ul {
list-style: none;
display: flex;
}
#header ul li {
padding: 10px 20px;
}
#header ul li a {
color: #fff;
text-decoration: none;
text-transform: uppercase; Chuyề(n đố(i tấ#t ca( chữ thành chữ in hoa. font-size: 14px; font-
weight: bold; letter-spacing: 1px; : Đặt khoa(ng cách giữa các ký tự là 1px.
display: block;
transition: 0.5s;
}
#header ul li a:hover {
background-color: #fff; color: black;
padding: 10px 20px; }
Phần hover :
#header ul li a:hover {
background-color: #fff; màu nề!n khi hover
color: black;màu chữ biề#n thành đen sau khi hover vào padding: 10px 20px;
cursor: pointer; sau khi ho vào thì con tro( thành cái tay }
Bài tham khảo :
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Web</title>
<link rel="stylesheet" href="./assets/css/reset.css"> <link rel="stylesheet"
href="./assets/css/style.css">
</head>
<body>
<div id="header"> <ul>
<li>
lOMoARcPSD| 48541417
<a href="">Home</a>
</li>
<li>
<a href="">House</a> </li>
<li>
<a href="">Car</a> </li>
<li>
<a href="">Motor</a> </li>
<li>
<a href="">Gardent</a>
</li>
</ul>
</div>
<div id="slider"> <h1>
First Slider
</h1>
</div>
</body>
</html>
Css:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
} html,
body {
height: 100%;
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1.6;
color: #333;
background-color: #f4f4f4;
background-image: url(../IMG/anh-nen-laptop-full-hd-cute_085336262.png) ;
background-size: cover;
width: 100%;
height: 1000px;
background-position: center;
background-attachment: fixed; }
#header {
background-color: #333;
color: #fff;
}
#header ul {
list-style: none;
display: flex;
}
#header ul li {
padding: 10px 20px;
}
#header ul li a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
lOMoARcPSD| 48541417
font-size: 14px;
font-weight: bold;
letter-spacing: 1px;
display: block;
transition: 0.5s;
}
#header ul li a:hover {
background-color: #fff; color: black;
padding: 10px 20px;
cursor: pointer;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
}
#slider {
background-color: #cab4b4; background-size: cover;
width: 100%;
height: 200px;
background-position: center;
background-attachment: fixed; text-align: center;
padding: 50px;
background-image: url(../IMG/IMG_3015.PNG) ;
text-transform: uppercase;
font-size: 30px;
font-weight: bold;
color: wheat; }
Sử dụng CTL+space để xem gọi ý các giá trị .
Với display block ,thì cái khối bao quanh thẻ sẽ chiếm toàn bộ trang khi đó sử dụng text align vào thẻ bất kì sẽ
khiến nó ra giữa <center>
Với văn bản quá dài : dùng overflow để tùy biến trong khối không bị tràn ra ngoài khối.
Dùng overscrollbar behavior để ngăn việc cuộn theo khi hết văn bản trong khối
Trong bgr image đặt ảnh đuôi png lên trước ảnh jpg để đè ảnh mà vẫn thấy<png ảnh trong suốt>
| 1/3

Tài liệu khác của Học viện Nông nghiệp Việt Nam

Preview text:

id="header">

  • lOMoAR cPSD| 48541417 href="">Home
  • href="">House
  • href="">Car
  • href="">Motor
  • href="">Gardent

id="slider"> First Slider