By GokiSoft.com|
09:39 15/01/2021|
Học HTML5 - CSS3
[Share Code] Tìm hiểu layout - Lập trình HTML/CSS/JS
#index.html
<!DOCTYPE html>
<html>
<head>
<title>Layout tutorial</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<!-- header: narvigation bar, ads, menu -->
<div class="navbar">
<img src="https://cdnweb.dantri.com.vn/bundle/static/assets/logotet-05.svg?v=0114152217">
<ul>
<li class="separator">THONG KE COVID-19 THE GIOI</li>
<li class="separator">So ca nhiem: 1</li>
<li class="separator">Tu vong: 0</li>
<li>Binh phuc: 1</li>
</ul>
<input type="text" name="s" placeholder="Searching ...">
</div>
<div class="menu">
<ul>
<li>Video</li>
<li>Su kien</li>
<li>Xa hoi</li>
<li>The gioi</li>
<li>The thao</li>
<li>Su kien</li>
<li>Xa hoi</li>
<li>The gioi</li>
<li>The thao</li>
</ul>
</div>
<div class="ads">
<img src="https://res.cloudinary.com/ziczacgroup/image/upload/v1608611098/asbezpvx4yzt3gbqwtkz.jpg" style="width: 100%; max-height: 80px">
</div>
</div>
<div class="main">
<!-- noi dung -->
<div class="main-content">
<div class="row">
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/kim-3-1610672891901.jpg" style="width: 100%">
<p>Triều Tiên duyệt binh rầm rộ, khoe vũ khí "mạnh nhất thế giới"</p>
</div>
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
</div>
<div class="row">
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
<div class="item">
<img src="https://icdn.dantri.com.vn/zoom/480_320/2021/01/15/nguoi-dan-vung-ron-lu-vui-mung-khanh-thanh-xom-nha-phao-cuu-sinh-1-1610664013395.jpeg" style="width: 100%">
<p>Người dân vùng "rốn lũ" vui mừng khánh thành xóm nhà phao cứu sinh</p>
</div>
</div>
</div>
</div>
<div class="footer">
<!-- company information -->
</div>
</div>
</body>
</html>#style.css
body {
margin: 0px;
padding: 0px;
background-color: grey;
}
.container {
width: 100%;
background-color: green;
height: 1000px;
display: block;
}
.header {
width: 100%;
background-color: yellow;
display: block;
}
.main {
width: 100%;
background-color: #79b0ad;
height: 800px;
}
.footer {
width: 100%;
background-color: orange;
height: 300px;
}
.navbar {
width: 80%;
display: flex;
margin: 0px auto;
}
.navbar img {
height: 40px;
}
.navbar ul {
display: flex;
list-style-type: none;
background-color: #73966a;
color: white;
padding: 5px;
}
.navbar ul li {
margin-right: 10px;
padding-right: 10px;
}
.separator {
border-right: solid #e8e1e1 1px;
}
.navbar input {
max-height: 20px;
margin-left: 10px;
margin-top: 16px;
}
.menu {
background-color: #1a7900;
}
.menu ul {
list-style-type: none;
display: flex;
color: white;
width: 80%;
margin: 0px auto;
}
.menu ul li {
margin-right: 10px;
padding: 10px;
cursor: pointer;
text-align: center;
}
.menu ul li:hover {
background-color: #104601;
}
.row {
width: 100%;
display: flex;
}
.item {
float: left;
width: 25%;
min-width: 25%;
padding: 10px;
}
.main-content {
width: 80%;
margin: 0px auto;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
