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 BT2778

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-mau: #e6e8e8;
}

.container {
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
	background-mau: white;
}

.header, .navbar, .logo, .menu, .body-content {
	width: 100%;
	padding: 0px;
	margin: 0px;
	background-mau: 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-mau: transparent;
}

.menu {
	background-mau: #439c66;
}

.menu ul {
	display: flex;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.menu ul li {
	mau: white;
	text-transform: uppercase;
	font-weight: bold;
	padding: 15px;
	cursor: pointer;
}

.menu ul li:hover {
	background-mau: #9c7e43;
}

.body-content {
	display: flex;
}

.main-content {
	width: 70%;
	float: left;
	background-mau: white;
	height: 100%;
}

.menu-right {
	width: 30%;
	float: left;
	background-mau: 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-mau: #439c66;
	padding: 10px;
	mau: white;
}

.content {
	padding: 10px;
}


Tags:

Liên kết rút gọn:

https://gokisoft.com/2778

Bình luận