By GokiSoft.com|
09:53 05/01/2022|
Học HTML5 - CSS3
[Video] Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS - C2108G3
Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog Tin Hoc</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="banner">
<h2>Blog Tin Hoc<sup>TM</sup></h2>
<label>Just Basic Begining</label>
</div>
<div class="menu">
<div class="main-content">
<ul>
<li>Home</li>
<li>Bao - Nhac - Phim</li>
<li>Quy Dinh</li>
<li>Lien He</li>
<li>Radio</li>
</ul>
</div>
<div class="menu-right">
<input type="text" name="s" placeholder="Tim kiem ...">
<button>Go!</button>
</div>
</div>
</div>
<div class="main">
<div class="main-content">
<!-- Noi dung copy -->
<h2 style="margin: 13.3906px 0px; padding: 0px; line-height: 1.2; font-size: 17px; color: rgb(81, 81, 81); font-family: Arial, Helvetica, sans-serif;">Tình hình dịch COVID-19 tại Việt Nam:</h2><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);">- Kể từ đầu dịch đến nay Việt Nam có 1.800.704 <a class="link-inline-content" href="https://suckhoedoisong.vn/ngay-4-1-co-14861-ca-covid-19-ha-noi-cham-moc-2500-ca-tra-vinh-bo-sung-them-gan-6900-f0-169220104175147152.htm" title="ca mắc COVID-19" data-rel="follow" style="margin: 0px; padding: 0px; color: -webkit-link;">ca mắc COVID-19</a>, đứng thứ 31/224 quốc gia và vùng lãnh thổ, trong khi với tỷ lệ số ca nhiễm/1 triệu dân, Việt Nam đứng thứ 138/224 quốc gia và vùng lãnh thổ (bình quân cứ 1 triệu người có 18.252 ca nhiễm).</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);">- Đợt dịch thứ 4 (từ ngày 27/4/2021 đến nay):</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);">+ Số ca nhiễm mới ghi nhận trong nước là <b style="margin: 0px; padding: 0px;">1.794.866</b> ca, trong đó có <b style="margin: 0px; padding: 0px;">1.410.567</b> bệnh nhân đã được công bố khỏi bệnh.</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);">+ Các địa phương ghi nhận số nhiễm tích lũy cao trong đợt dịch này: TP HCM (505.523), Bình Dương (291.061), Đồng Nai (98.183), Tây Ninh (78.837), Hà Nội (54.230).</p><figure class="VCSortableInPreviewMode" type="Photo" style="margin-right: auto; margin-bottom: 15px; margin-left: auto; padding: 0px; z-index: 96; display: inline-block; flex-direction: column; position: relative; transition: all 0.3s ease-in-out 0s; width: 670px; visibility: visible; overflow-wrap: break-word; cursor: default; clear: both; color: rgb(81, 81, 81); font-family: Arial, Helvetica, sans-serif;"><div style="margin: 0px; padding: 0px;"><a href="https://suckhoedoisong.qltns.mediacdn.vn/324455921873985536/2021/10/16/cach-ly-dieu-tri-benh-nhan-16343823775761139659239.jpeg" data-fancybox="img-lightbox" title="Hiện có hơn 6.650 ca COVID-19 nặng đang điều trị" target="_blank" class="detail-img-lightbox" style="margin: 0px; padding: 0px; color: -webkit-link; cursor: zoom-in; display: block; outline: none !important;"><img src="https://suckhoedoisong.qltns.mediacdn.vn/324455921873985536/2021/10/16/cach-ly-dieu-tri-benh-nhan-16343823775761139659239.jpeg" id="img_373789571274985472" w="800" h="533" alt="Sáng 5/1: Hơn 6.500 ca COVID-19 nặng; Họp xem xét cấp số đăng ký 4 loại thuốc có hoạt chất Molnupiravir điều trị F0 - Ảnh 1." title="Sáng 5/1: Hơn 6.500 ca COVID-19 nặng; Họp xem xét cấp số đăng ký 4 loại thuốc có hoạt chất Molnupiravir điều trị F0 - Ảnh 1." rel="lightbox" photoid="373789571274985472" data-original="https://suckhoedoisong.qltns.mediacdn.vn/324455921873985536/2021/10/16/cach-ly-dieu-tri-benh-nhan-16343823775761139659239.jpeg" type="photo" width="" height="" class="lightbox-content" style="margin: 0px auto; padding: 0px; width: 670px; max-width: 100%; display: inline-block; height: auto; vertical-align: top;"></a></div><figcaption class="PhotoCMS_Caption" style="margin: 0px 0px 24px; padding: 5px 8px; background: rgb(233, 233, 233);"><p data-placeholder="Nhập chú thích ảnh" style="margin-bottom: 0px; padding: 0px; font-style: italic; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; line-height: 19.6px; font-family: Arial;">Hiện có hơn 6.650 ca COVID-19 nặng đang điều trị</p></figcaption></figure><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);"><b style="margin: 0px; padding: 0px;">Tổng số ca được điều trị khỏi: 1.413.384 ca</b></p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);"> <b style="margin: 0px; padding: 0px;">Số bệnh nhân nặng đang điều trị là 6.651 ca</b>, trong đó: Thở ô xy qua mặt nạ: 4.720 ca; thở ô xy dòng cao HFNC: 981 ca; thở máy không xâm lấn: 132 ca; thở máy xâm lấn: 800 ca; ECMO: 18 ca</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);"><b style="margin: 0px; padding: 0px;">Số bệnh nhân tử vong</b>: Trung bình số tử vong ghi nhận trong <b style="margin: 0px; padding: 0px;">07</b> ngày qua: <b style="margin: 0px; padding: 0px;">223</b> ca.</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);">Tổng số ca tử vong do COVID-19 tại Việt Nam tính đến nay là <b style="margin: 0px; padding: 0px;">33.245</b> ca, chiếm tỷ lệ <b style="margin: 0px; padding: 0px;">1,8% </b>so với tổng số ca nhiễm.</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);"> Tổng số ca tử vong xếp thứ 26/224 vùng lãnh thổ, số ca tử vong trên 1 triệu dân xếp thứ 131/224 quốc gia, vùng lãnh thổ trên thế giới. So với châu Á, tổng số ca tử vong xếp thứ 6/49 (xếp thứ 3 ASEAN), tử vong trên 1 triệu dân xếp thứ 26/49 quốc gia, vùng lãnh thổ châu Á (xếp thứ 5 ASEAN).</p><p style="margin-top: 13.3906px; margin-bottom: 13.3906px; padding: 0px; font-variant-numeric: normal; font-variant-east-asian: normal; font-stretch: normal; font-size: 17px; line-height: 23.8px; font-family: Arial; word-break: break-word; color: rgb(81, 81, 81);">Tình hình xét nghiệm: Số lượng xét nghiệm từ 27/4/2021 đến nay đã thực hiện xét nghiệm được 30.636.734 mẫu tương đương 75.256.465 lượt người, tăng 73.499 mẫu so với ngày trước đó.</p>
<!-- Noi dung copy -->
</div>
<div class="menu-right">
<div class="menu-item">
<div class="menu-heading">
Friend's Blog
</div>
<div class="menu-body">
<ul>
<li>Blog Viet</li>
<li>Suu Tap - Doc,Dep,Dieu</li>
<li>Thu Thuat Blog - Chat</li>
</ul>
</div>
</div>
<div class="menu-item">
<div class="menu-heading">
Friend's Blog
</div>
<div class="menu-body">
<ul>
<li>Blog Viet</li>
<li>Suu Tap - Doc,Dep,Dieu</li>
<li>Thu Thuat Blog - Chat</li>
</ul>
</div>
</div>
<div class="menu-item">
<div class="menu-heading">
Friend's Blog
</div>
<div class="menu-body">
<ul>
<li>Blog Viet</li>
<li>Suu Tap - Doc,Dep,Dieu</li>
<li>Thu Thuat Blog - Chat</li>
</ul>
</div>
</div>
<div class="menu-item">
<div class="menu-heading">
Friend's Blog
</div>
<div class="menu-body">
<ul>
<li>Blog Viet</li>
<li>Suu Tap - Doc,Dep,Dieu</li>
<li>Thu Thuat Blog - Chat</li>
</ul>
</div>
</div>
<div class="menu-item">
<div class="menu-heading">
Friend's Blog
</div>
<div class="menu-body">
<ul>
<li>Blog Viet</li>
<li>Suu Tap - Doc,Dep,Dieu</li>
<li>Thu Thuat Blog - Chat</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>#style.css
body {
padding: 0px;
margin: 0px;
}
.container, .header, .menu, .main, .banner {
width: 100%;
}
.banner {
background-image: linear-gradient(to right, #c6f5f0, #34ebd8);
height: 160px;
}
.banner h2 {
padding: 0px;
margin: 0px;
padding-top: 50px;
padding-left: 50px;
color: green;
}
.banner label {
padding: 0px;
margin: 0px;
padding-left: 50px;
color: blue;
font-size: 18px;
}
.menu ul {
list-style-type: none;
display: flex;
padding: 0px;
margin: 0px;
background-color: #a3c159;
padding-left: 50px;
}
.menu ul li {
padding: 10px;
color: white;
text-transform: uppercase;
cursor: pointer;
border-right: solid white 1px;
}
.menu ul li:hover {
background-color: orange;
}
.menu {
display: flex;
}
.main-content {
float: left;
width: 75%;
}
.menu-right {
float: left;
width: 25%;
}
.menu .menu-right {
padding: 6px;
background-color: #fec42d;
}
.menu .menu-right input {
font-size: 16px;
width: 260px;
border: solid white 2px;
}
.menu .main-content {
text-align: center !important;
}
.menu .menu-right button {
font-size: 16px;
background-color: #a3c159;
border: solid white 2px;
color: white;
}
.main {
display: flex;
}
.main .main-content {
padding-left: 50px;
padding-right: 20px;
padding-top: 20px;
text-align: justify;
box-shadow: 5px 10px #f0f2f0;
}
.main .menu-right {
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
text-align: justify;
}
.menu-item, .menu-heading, .menu-body {
width: 98%;
}
.menu-heading {
background-color: #a3c159;
padding: 10px;
}
.menu-body ul {
list-style-type: none;
padding: 0px;
margin: 0px;
margin-bottom: 30px;
}
.menu-body ul li {
padding: 6px;
border-bottom: solid #f0f2f0 1px;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
