By GokiSoft.com|
19:59 18/04/2022|
Học HTML5 - CSS3
[Source Code] Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS - HTML/CSS
Bài Tập - Thiết Kế Blog Dạy Học Excel Online - Lập Trình HTML/CSS/JS
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog Day Tin Hoc - Page</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<div class="center">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRTwrPeLo2eotZDvPI2WpXtsxFmzpZK16TLMw&usqp=CAU">
</div>
</div>
<div class="nav">
<div class="center">
<!-- https://icons.getbootstrap.com/ -->
<ul>
<li>
<i class="bi bi-house-fill"></i>
Trang Chu
</li>
<li><i class="bi bi-alarm-fill"></i> Series Bai Viet</li>
<li>Tai Nguyen</li>
<li>Khoa Hoc</li>
<li>Cong Cu</li>
</ul>
</div>
</div>
</div>
<div class="main">
<div class="center">
<div class="main-content">
<h1>LATEST ARTICLES</h1>
<!-- Item Start -->
<div class="item">
<div class="col-6">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-6">
<h2>Power Query - Bo sao lu du lieu trong 1 cot</h2>
<p>Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô. Vừa phát hiện bí mật này, cô lại phải liên hệ với nhân tình của anh để báo tin buồn.</p>
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-6">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-6">
<h2>Power Query - Bo sao lu du lieu trong 1 cot</h2>
<p>Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô. Vừa phát hiện bí mật này, cô lại phải liên hệ với nhân tình của anh để báo tin buồn.</p>
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-6">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-6">
<h2>Power Query - Bo sao lu du lieu trong 1 cot</h2>
<p>Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô. Vừa phát hiện bí mật này, cô lại phải liên hệ với nhân tình của anh để báo tin buồn.</p>
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-6">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-6">
<h2>Power Query - Bo sao lu du lieu trong 1 cot</h2>
<p>Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô. Vừa phát hiện bí mật này, cô lại phải liên hệ với nhân tình của anh để báo tin buồn.</p>
</div>
</div>
<!-- Item End -->
</div>
<div class="menu-right">
<h2>BAI VIET XEM NHIEU NHAT</h2>
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
<!-- Item Start -->
<div class="item">
<div class="col-5">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%;">
</div>
<div class="col-7">
Một người phụ nữ đã trở nên nổi tiếng trên mạng xã hội sau khi đăng đàn kể rằng người chồng quá cố đã lừa dối cô.
</div>
</div>
<!-- Item End -->
</div>
</div>
</div>
<div class="footer">
<h1 style="text-align: center;">Web Tin Hoc</h1>
</div>
</div>
</body>
</html>#style.css
body {
padding: 0px;
margin: 0px;
}
.logo img {
height: 100px;
}
.nav {
background-color: #c83b4c;
}
.nav ul {
list-style-type: none;
display: flex;
padding: 0px;
margin: 0px;
}
.nav ul li {
padding: 8px;
cursor: pointer;
color: white;
border-right: solid #dedede 1px;
}
.nav ul li:hover {
background-color: orange;
}
.item {
display: flex;
}
.col-6 {
width: 50%;
padding: 6px;
}
.col-6 h2 {
margin-top: 0px;
}
.col-5 {
width: 41.67%;
padding: 6px;
}
.col-7 {
width: 58.33%;
padding: 6px;
}
.center {
padding-left: 10%;
padding-right: 10%;
display: flex;
}
/* Debug START */
.header {
/*height: 320px;*/
/*border: solid red 5px;*/
}
.header .logo {
/*height: 150px;*/
/*border: solid green 5px;*/
}
.header .nav {
/*height: 150px;*/
/*border: solid black 5px;*/
}
.main {
/*height: 600px;*/
/*border: solid blue 5px;*/
display: flex;
}
.main .main-content {
/*height: 600px;*/
width: 75%;
/*border: solid red 5px;*/
}
.main .menu-right {
/*height: 600px;*/
width: 25%;
/*border: solid grey 5px;*/
}
/* Debug END */
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
