By GokiSoft.com| 15:10 02/06/2023|
Học HTML5 - CSS3

[Share Code] Ôn tập HTML/CSS/JS & Bootstrap/jQuery - C2209I

Ôn tập HTML/CSS/JS & Bootstrap/jQuery

#style.css

body {
	margin: 0px;
	padding: 0px;
}

/* Test start */
.header {
	/*border: solid blue 2px;
	height: 200px;
	width: 100%*/
}

.header .nav {
	/*border: solid red 2px;
	height: 100px;
	width: 100%*/
}

.header .menu {
	/*border: solid black 2px;
	height: 100px;
	width: 100%*/
}

.main {
	/*border: solid green 2px;*/
	/*height: 800px;*/
	width: 100%;
	/*display: flex;*/
	min-height: 700px;
}

.main .sidebar {
	/*border: solid yellow 2px;*/
	/*height: 800px;*/
	float: left;
	width: 25%
}

.main .main-content {
	/*border: solid red 2px;*/
	/*height: 800px;*/
	float: left;
	width: 75%
}

.footer {
	height: 60px;
	width: 100%;
}
/* Test end */

.header {

}

.header .nav {
	text-align: center;
}

.header .nav img{
	width: 100%;
	height: 80px;
	object-fit: cover;
	object-position: center;
}

.header .menu {
	background-color: blue;
}

.header .menu ul {
	list-style-type: none;
	display: flex;
	color: white;
	font-size: 18px;
	padding: 0px;
	margin: 0px;
}

.header .menu ul li {
	padding: 15px;
	cursor: pointer;
}

.header .menu ul li:hover {
	background-color: orange;
}

.main {

}

.main .sidebar {

}

.main .sidebar ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

.main .sidebar li {
	padding: 15px;
	cursor: pointer;
	background-color: #f5f4f2;
	border-bottom: solid #e0e0e0 1px;
}

.main .sidebar li:hover {
	background-color: orange;
}

.main .main-content {

}

.main .breadcrumb {
	width: 100%;
}

.main .breadcrumb ul {
	list-style-type: none;
	float: right;
	display: flex;
}

.main .breadcrumb ul li {
	padding: 5px 15px;
	cursor: pointer;
	border-right: solid grey 1px;
}

.footer {
	text-align: center;
	font-size: 20px;
	margin-top: 20px;
}

#vidu.html

<!DOCTYPE html>
<html>
<head>
	<title>HTML/CSS tutorial</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
	<div class="nav">
		<img src="https://www.techpluto.com/wp-content/uploads/2022/02/image1.png">
	</div>
	<div class="menu">
		<ul>
			<li>Trang Chu</li>
			<li>San Pham</li>
			<li>Tin Tuc</li>
			<li>Lien He</li>
		</ul>
	</div>
</div>
<div class="main">
	<div class="breadcrumb">
		<ul>
			<li>Home</li>
			<li>Tin Tuc</li>
		</ul>
	</div>
	<div class="sidebar">
		<ul>
			<li>Vi du 1</li>
			<li>Vi du 2</li>
			<li>Vi du 3</li>
			<li>Vi du 4</li>
			<li>Vi du 5</li>
			<li>Vi du 6</li>
			<li>Vi du 7</li>
		</ul>
	</div>
	<div class="main-content">
		<h2>Welcome to learn HTML/CSS</h2>
		<ul>
			<li>Xin chao</li>
			<li>Xin chao</li>
			<li>Xin chao</li>
			<li>Xin chao</li>
			<li>Xin chao</li>
			<li>Xin chao</li>
			<li>Xin chao</li>
			<li>Xin chao</li>
		</ul>
	</div>
</div>
<div class="footer">
	Copyright @2023 GokiSoft.com
</div>
</body>
</html>
Tags:



Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó