By GokiSoft.com|
23:38 02/01/2022|
Học HTML5 - CSS3
[Video] Hướng dẫn thiết kế Layout - C2110I
#vidu.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tin Tuc - Page</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo margin-left margin-right">
<img src="https://all-digital.org/wp-content/uploads/2018/02/CODINC-logo-600x323-rgb.png" class="logo-img">
<input type="text" name="s" placeholder="Nhap noi dung tim kiem" class="logo-search">
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-headset logo-icon" viewBox="0 0 16 16">
<path d="M8 1a5 5 0 0 0-5 5v1h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a6 6 0 1 1 12 0v6a2.5 2.5 0 0 1-2.5 2.5H9.366a1 1 0 0 1-.866.5h-1a1 1 0 1 1 0-2h1a1 1 0 0 1 .866.5H11.5A1.5 1.5 0 0 0 13 12h-1a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1V6a5 5 0 0 0-5-5z"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" fill="currentColor" class="bi bi-people-fill logo-icon" viewBox="0 0 16 16">
<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
<path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
<path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/>
</svg>
</div>
<div class="menu">
<ul class="margin-left margin-right">
<li>Nong</li>
<li>Moi</li>
<li>Video</li>
<li>Chu De</li>
<li>Phong Chong Covid-19</li>
<li>Nang luong tich cu</li>
</ul>
</div>
</div>
<div class="main">
<div class="main-content margin-left">
<div class="item-top" style="padding: 10px;">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 20px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<!-- bootstrap: grib -> row: 12 cells -->
<div class="row">
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
<div class="col-4">
<img src="https://photo-baomoi.zadn.vn/w700_r16x9_sm/2021_12_31_114_41369130/24d4abb003f2eaacb3e3.jpg" style="width: 100%">
<p style="font-size: 15px">Quảng Nam ghi nhận 14 trường hợp nhập cảnh nhiễm biến thể Omicron</p>
</div>
</div>
</div>
<div class="menu-right margin-right">
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
<div class="item">
<img src="https://photo-baomoi.zadn.vn/w300_r1x1/2021_09_11_14_40191413/cd2665403d02d45c8d13.jpg">
<label>Sự kiên định con đường xã hội chủ nghĩa của Việt Nam trong bài viết của Tổng Bí thư Nguyễn Phú Trọng</label>
</div>
</div>
</div>
<div class="footer">
<marquee class="margin-left margin-right">
<h2>Welcome to learn HTML/CSS</h2>
</marquee>
</div>
</div>
</body>
</html>#style.css
body {
padding: 0px;
margin: 0px;
}
.container, .header, .logo, .menu, .main, .footer {
width: 100%;
}
.main .main-content {
width: 55%;
float: left;
}
.main .menu-right {
width: 25%;
float: left;
}
.logo {
display: flex;
}
.logo .logo-img {
height: 70px;
}
.logo .logo-search {
width: 500px;
height: 30px;
font-size: 16px;
padding: 5px 5px;
margin-top: 12px;
margin-left: 15px;
}
.logo .logo-icon {
padding: 5px 5px;
margin-top: 12px;
margin-left: 15px;
}
.menu {
background-color: #2fa1b3;
}
.menu ul {
list-style-type: none;
display: flex;
margin: 0px;
padding: 0px;
}
.menu ul li {
padding: 15px;
color: white;
text-transform: uppercase;
cursor: pointer;
}
.menu ul li:hover {
background-color: #fadba2;
color: red;
}
.margin-left {
margin-left: 10% !important;
}
.margin-right {
margin-right: 10% !important;
}
.item {
display: flex;
}
.item img {
width: 100px;
padding: 10px;
}
.item label {
padding: 10px;
}
.row {
width: 100%;
display: flex;
}
.row .col-4 {
width: calc(100%/3);
padding: 10px;
}
.row .col-4:hover {
background-color: #edeceb;
}
/* highlight design layout */
/*.header {
background-color: grey;
height: 300px;
}
.logo {
background-color: red;
height: 200px;
}
.menu {
background-color: blue;
height: 100px;
}*/
/*.main {
background-color: black;
height: 800px;
}*/
/*.main .main-content {
background-color: red;
height: 800px;
}
.main .menu-right {
background-color: grey;
height: 800px;
}*/
/*
.footer {
background-color: green;
height: 200px;
}*/
/* end */#readme.txt
u뚀Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
