By GokiSoft.com|
15:18 19/01/2022|
Học HTML5 - CSS3
[Video] Bài tập - Thiết kế web tin tức - Khóa học HTML/CSS - C2110I
Bài tập - Thiết kế web tin tức - Khóa học HTML/CSS
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Tin Tức - Khoa Học</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="navbar">
<label class="left">Thu 4 Ngay 19 Thang 1 Nam 2022</label>
<label class="right">Dang Nhap</label>
</div>
<div class="logo">
<img src="https://all-digital.org/wp-content/uploads/2018/02/CODINC-logo-600x323-rgb.png" style="max-height: 100px;">
<div class="search-form">
<input type="text" name="s" placeholder="Enter searching ...">
<button>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</button>
</div>
</div>
<div class="menu">
<ul>
<li>Trang Chu</li>
<li>Gioi Thieu</li>
<li>Tin Tuc</li>
<li>Chia Se</li>
<li>Quan Diem</li>
<li>Lien He</li>
</ul>
</div>
</div>
<div class="body-content">
<div class="main-content">
<!-- row: 12 cell -->
<div class="content">
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-4">
<div class="content">
<h3>Xin chao abc</h3>
<p>Xin chao</p>
</div>
</div>
<div class="col-4">
<div class="content">
<ul>
<li>Vi du 1</li>
<li>Vi du 1</li>
<li>Vi du 1</li>
<li>Vi du 1</li>
<li>Vi du 1</li>
<li>Vi du 1</li>
</ul>
</div>
</div>
</div>
<div class="group">
<h2>Tin Nong</h2>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
</div>
</div>
</div>
<div class="menu-right">
<div class="content">
<div class="group">
<h2>Tin Moi</h2>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
</div>
<div class="group">
<h2>Tin Moi</h2>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
</div>
<div class="group">
<h2>Tin Moi</h2>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
<div class="row">
<div class="col-4">
<img src="https://gokisoft.com/uploads/stores/49/2021/10/coding-c-program.jpg" style="width: 100%">
</div>
<div class="col-8">
Xin chao abc Xin chao abc Xin chao abc
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>#style.css
body {
padding: 0px;
margin: 0px;
background-color: #e6e8e8;
}
.container {
margin-left: 5%;
margin-right: 5%;
width: 90%;
background-color: white;
}
.header, .navbar, .logo, .menu, .body-content {
width: 100%;
padding: 0px;
margin: 0px;
background-color: white;
}
.navbar {
height: 30px;
border-bottom: solid #e6e8e8 1px;
}
.navbar .left {
float: left;
padding: 10px;
}
.navbar .right {
float: right;
padding: 10px;
}
.logo {
display: inline-block;
}
.logo .search-form {
float: right;
margin-top: 25px;
margin-right: 10px;
padding: 3px;
border: solid #b8b8b8 1px;
border-radius: 5px;
}
.logo .search-form input {
width: 250px;
font-size: 20px;
border: none;
outline: none;
}
.logo .search-form input:hover {
border: none;
outline: none;
}
.logo .search-form button {
font-size: 20px;
border: none;
background-color: transparent;
}
.menu {
background-color: #439c66;
}
.menu ul {
display: flex;
list-style-type: none;
padding: 0px;
margin: 0px;
}
.menu ul li {
color: white;
text-transform: uppercase;
font-weight: bold;
padding: 15px;
cursor: pointer;
}
.menu ul li:hover {
background-color: #9c7e43;
}
.body-content {
display: flex;
}
.main-content {
width: 70%;
float: left;
background-color: white;
height: 100%;
}
.menu-right {
width: 30%;
float: left;
background-color: white;
}
.row {
width: 100%;
display: flex;
}
.col-4 {
width: calc(100%/3);
float: left;
}
.col-8 {
width: calc(2 * 100%/3);
float: left;
}
.group {
width: 100%;
display: block;
}
.group h2 {
background-color: #439c66;
padding: 10px;
color: white;
}
.content {
padding: 10px;
}Tags:
Phản hồi từ học viên
5
(Dựa trên đánh giá ngày hôm nay)
