Tạo bởi Trắc Nghiệm Việt|
[Video] Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS - C2110L
Học HTML5 - CSS3
[Video] Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS - C2110L
Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS
#index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Blog Tin Hoc</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<h1>Blog Tin Hoc<sup>TM</sup></h1>
<h4>Just basic begining</h4>
</div>
<div class="navbar">
<ul id="menu-left">
<li>Home</li>
<li>Bao Nhac Phim</li>
<li>Quy Dinh</li>
<li>Lien He</li>
<li>Radio</li>
</ul>
<ul id="menu-right">
<li>
<input type="text" name="s" placeholder="Searching ...">
</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="main">
<h3>Noi dung bai viet</h3>
<img src="https://gokisoft.com/uploads/stores/49/2022/01/quan-ly-sinh-vien-bang-javascript.png" style="width: 100%">
</div>
<div class="tab-right">
<div class="panel">
<h4>Friend's Blog</h4>
<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>
<li>Vi du 1</li>
</ul>
</div>
<div class="panel">
<h4>Friend's Blog</h4>
<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>
<li>Vi du 1</li>
</ul>
</div>
<div class="panel">
<h4>Friend's Blog</h4>
<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>
<li>Vi du 1</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>#style.css
body {
padding: 0px;
margin: 0px;
}
.container {
margin-left: 10%;
margin-right: 10%;
}
.header .logo {
background-image: linear-gradient(to right, white, #73c2c6);
}
.header .logo h1 {
margin: 0px;
color: #069498;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 30px;
}
.header .logo h4 {
margin: 0px;
color: blue;
padding-bottom: 40px;
padding-left: 30px;
}
.navbar {
background-color: #a3c159;
display: flex;
position: relative;
}
#menu-left {
list-style-type: none;
display: flex;
padding: 0px;
margin: 0px;
}
#menu-left li {
padding: 10px 20px;
color: white;
border-right: solid white 1px;
cursor: pointer;
}
#menu-left li:hover {
background-color: orange;
}
#menu-right {
list-style-type: none;
padding: 0px;
margin: 0px;
width: 20%;
background-color: orange;
padding: 9px;
position: absolute;
right: 0px;
}
.main-content {
display: flex;
position: relative;
}
.main {
padding: 10px;
}
.tab-right {
position: absolute;
right: 0px;
padding: 10px;
width: 20%;
}
.tab-right .panel h4 {
background-color: #a3c159;
color: white;
padding: 10px;
border-top-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.tab-right .panel ul {
list-style-type: none;
font-size: 16px;
padding: 0px;
margin: 0px;
}
.tab-right .panel ul li {
border-bottom: dotted grey 1px;
padding: 5px 10px;
}