By GokiSoft.com| 19:05 27/10/2023|
Học JS

[Examination] - Ôn tập HTML/CSS/JS - 60 phút - Web quản lý tin tức BT2217

Yêu cầu: Form nhập dữ liệu -> Khi người dùng click vào Lưu thì yêu cầu người dùng nhập dữ liệu cho tất cả các input trong form. Tiều đề có độ dài tối đa là 200 ký tự và nhỏ nhất là 10 ký tự.

- Nội dung có độ dài tối đa 500 ký tự và nhỏ nhất là 20 ký tự.

Khi người dùng nhập dữ liệu chính xác -> và click vào Luu -> Hiển thị 1 dialog -> Tạo bài viết thành công.

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

https://gokisoft.com/2217

Bình luận

avatar
Vũ Ngọc Văn [community,C2010L]
2021-03-17 03:33:18

https://vungocvan-aptech.herokuapp.com/0313/quanlytintuc.html

avatar
Võ Như Việt [C2010L]
2021-03-15 15:50:05



body{
	margin: 0px;
	padding: 0px;
}
.container{
	width: 100%;
	display: block;
}
.aligh-center{
	width: 50%;
	margin: 0px auto;
	display: block;
}
.header{
	width: 100%;
	margin-top: 15px;
	display: block;
}
.header .logo{
	margin: 15px;
	display: flex;
}
.header .logo p{
	width: 25%;
	background-color: orange;
	text-align: center;
	font-weight: bold;
}
.header .logo h3{
	width: 75%
}
.header .menu{
	width: 100%;	
	padding: 0px;
	margin: 0px;
	background-color: #1f4cf3;
}
.header .menu ul{
	width: 80%;
	display: flex;
	list-style-type: none;	
	color: white;
	margin: 0px auto;
}
.header .menu ul li{
	padding-right: 10px;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-right: solid white 1px;
	cursor: pointer;
	font-weight: bold;
}
.header .menu ul li:hover{
	background-color: orange;
}
.header .menu ul li a{
	color: white;
	text-decoration: none;
}
.header .menu .none{
	width: 25%;
}
.main{
	width: 100%;
	display: flex;

}
.main .main-left{
	width: 75%;
	padding: 20px;
}
.main .main-left p{
	font-weight: bold;
	text-align: justify;
}
.main .main-right{
	width: 25%;	
	border: solid 5px;
	padding: 0px;
	max-height: 180px;
}
.main .main-right h4{
	text-align: center;
}
.main .main-right ul{
	list-style-type: none;
	padding-left: 20px;
}

.main .main-right ul li{
  	font-weight: bold;
}
.form{
	display: flex;
	width: 100%;
	margin-bottom: 5px; 
}
.form label{
	width: 25%;
	float: left;
	text-align: left;
	font-weight: bold;
	padding: 5px;
}
.form input {
	width: 30%;
	float: left;
}
.form textarea {
	float: left;
	width: 30%;
}
.main-left .luu button{
	border: none;
	padding-right: 35px;
	padding-left: 35px;
	padding-top: 15px;
	padding-bottom: 15px;
	background-color: orange;
}
.main-left .luu .xoa{
	background-color: red;
}




avatar
Võ Như Việt [C2010L]
2021-03-15 15:49:55



<!DOCTYPE html>
<html>
<head>
	<title>Ôn tập HTML/CSS/JS - 60 phút - Web quản lý tin tức</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="aligh-center">
			<div class="header">
			<div class="logo">
				<p>LOGO</p>
				<h3>WEB TIN TUC</h3>
			</div>		
				<div class="menu">
					<ul>
						<li><a href="test60.html">Trang Chu</a></li>
						<li>Tin Hoc</li>
						<li><a href="form.html">Biet Mau</a></li>
						<li>Khoa Hoc</li>
						<li>Tuyen Dung</li>
						<li>Lien He</li>
					</ul>
						<div class="none"><label></label>
						</div>
				</div>
		</div>
		<div class="main">
			<div class="main-left">
				<form method="post" onsubmit="submitData()">
					<p>NHAP THONG TIN BAI VIET</p>
					<div class="form">
					<label>TIEU DE:</label>
					</div>
					<div class="form">
					<input required="true" type="text" name="tieude" maxlength="200" minlength="10">
					</div>
					<div class="form">
					<label>HINH ANH</label>
					</div>
					<div class="form">
					<input required="true" type="text" name="hinhanh">
					</div>
					<div class="form">
					<label>NOI DUNG</label>
					</div>
					<div class="form">
					<textarea required="true" rows="5" maxlength="500" minlength="20"></textarea>
					</div>
					<div class="luu">
						<button style="submit">LUU</button>
						<button style="reset" class="xoa">XOA</button>
					</div>
				</form>
			</div>
			<div class="main-right">
					<h4>BAI VIET MOI NHAT</h4>
					<ul>
						<li>BAI 1</li>
						<li>BAI 2</li>
						<li>BAI 3</li>
						<li>BAI 4</li>
						<li>BAI 5</li>
					</ul>
			</div>
		</div>
		</div>
	</div>
	<script type="text/javascript">
		function submitData(){	
			alert("Luu thanh cong....");
		}
	</script>
</body>
</html>


avatar
Võ Như Việt [C2010L]
2021-03-15 15:49:41



<!DOCTYPE html>
<html>
<head>
	<title>Ôn tập HTML/CSS/JS - 60 phút - Web quản lý tin tức</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="aligh-center">
			<div class="header">
			<div class="logo">
				<p>LOGO</p>
				<h3>WEB TIN TUC</h3>
			</div>		
				<div class="menu">
					<ul>
						<li><a href="test60.html">Trang Chu</a></li>
						<li>Tin Hoc</li>
						<li><a href="form.html">Biet Mau</a></li>
						<li>Khoa Hoc</li>
						<li>Tuyen Dung</li>
						<li>Lien He</li>
					</ul>
						<div class="none"><label></label>
						</div>
				</div>
		</div>
		<div class="main">
			<div class="main-left">
				<p>NOI DUNG BAI VIET</p>
				<p>Bản tin 18h ngày 13/3 của Bộ Y tế cho biết có 3 ca mắc mới COVID-19, trong đó 2 ca ghi nhận tại Hải Dương và 1 ca nhập cảnh được cách ly ngay tại Bà Rịa- Vũng Tàu. Việt Nam hiện có 2.553 bệnh nhân.</p>
				<p>Số ca mắc ở Việt Nam:</p>

				<p>- Tính đến 18h ngày 13/3: Việt Nam có tổng cộng 1594.</p>

				<p>Số lượng ca mắc mới tính từ ngày 27/1 đến nay: 901 ca, trong đó, riêng Hải Dương có 715 ca, Quảng Ninh (61 ca), Gia Lai (27 ca), Hà Nội (34 ca), Bắc Ninh (5 ca), Bắc Giang (2 ca), TP. Hồ Chí Minh (36 ca ), Hoà Bình (2 ca), Hà Giang (1 ca), Điện Biên (3 ca), Bình Dương (6 ca), Hải Phòng (4 ca ), Hưng Yên (3 ca).</p>
			</div>
			<div class="main-right">
					<h4>BAI VIET MOI NHAT</h4>
					<ul>
						<li>BAI 1</li>
						<li>BAI 2</li>
						<li>BAI 3</li>
						<li>BAI 4</li>
						<li>BAI 5</li>
					</ul>
			</div>
		</div>
		</div>
	</div>
</body>
</html>


avatar
Nguyễn Minh Hiếu [community,C2010L]
2021-03-14 22:36:51


#index.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="head">
            <div class="title">
                <div class="logo">
                    <h1>logo</h1>
                </div>
                <div class="name">
                    <h1>web tin tức</h1>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="">Trang chủ</a></li>
                    <li><a href="">Tin học</a></li>
                    <li><a href="">Biểu mẫu</a></li>
                    <li><a href="">Khoa học</a></li>
                    <li><a href="">Tuyển dụng</a></li>
                    <li><a href="">Liên hệ</a></li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <h1>nội dung bài viết</h1>
                <p>hahhhhhhhhhhhhhhhhhhhhhhhh
                    hahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
                    hhhhhhhhhhhhhh
                </p>
            </div>
            <div class="right">
                <h1>bài viết mới nhất</h1>
                <ul>
                    <li>Bài 1</li>
                    <li>Bài 2</li>
                    <li>Bài 3</li>
                    <li>Bài 4</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


#js.js


function Save(){
    var text = document.getElementById('tieude').value
    var noidung = document.getElementById('content').value
    if( tieude == '',noidung ==''){
        alert("điền đủ thông tin")
    }
    else{
        alert("đăng nhập thành công")
    }
}
function Reset(){
    document.getElementById("myform").Reset();
}


#login.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <script src="js.js"></script>
    <div class="container">
        <div class="head">
            <div class="title">
                <div class="logo">
                    <h1>logo</h1>
                </div>
                <div class="name">
                    <h1>web tin tức</h1>
                </div>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="">Trang chủ</a></li>
                    <li><a href="">Tin học</a></li>
                    <li><a href="">Biểu mẫu</a></li>
                    <li><a href="">Khoa học</a></li>
                    <li><a href="">Tuyển dụng</a></li>
                    <li><a href="">Liên hệ</a></li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="left">
                <h1>nhập thông tin bài viết</h1>
                <form action="" id="myform" onsubmit="return Save()">
                    <div class="form-group">
                        <label for="">tiêu đề</label><br>
                        <input type="text" required="true" id="tieude" maxlength="200" minlength="10">
                    </div>
                    <div class="form-group">
                        <label for="">hình ảnh</label><br>
                        <input type="text" id="img">
                    </div>
                    <div class="form-group">
                        <label for="">Nội dung</label><br>
                        <input type="text" required="true" id="content" maxlength="500" minlength="20">
                    </div>
                    <div class="btn">
                        <button type="submit" id="save" onclick="Save()">Lưu</button>
                        <button id="delete" onclick="Reset()">Xóa</button>
                    </div>
                </form>
            </div>
            <div class="right">
                <h1>bài viết mới nhất</h1>
                <ul>
                    <li>Bài 1</li>
                    <li>Bài 2</li>
                    <li>Bài 3</li>
                    <li>Bài 4</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>


#style.css


*{
    box-sizing: border-box;
}
body{
    margin: 0;
    padding: 0;
}
ul{
    list-style-type: none;
}
a{
    text-decoration: none;
}
.container{
    width: 900px;
    margin: 0px auto;
}
.container .head .title{
    display: flex;
}
.title .logo{
    width: 110px;
    background-color: red;
    text-align: center;
}
.logo h1{
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
}
.title .name{
    width: 790px;
    margin-left: 20px;
    text-align: center;
}
.name h1{
    text-transform: uppercase;
    font-weight: 700;
}
.nav ul{
    display: flex;
    background-color: #51adc8;
}
.nav ul li{
    padding: 10px 20px;
    border-right: 1px solid #fff;
}
li a{
    color: #fff;
    font-weight: 700;
    font-size: 20px;
}
.main{
    display: flex;
    width: 900px;
}
.main .left{
    width: 700px;
    display: block;
}
.left h1{
    text-transform: uppercase;
    font-weight: 700;
}
.left p{
    font-size: 20px;
}
.left .form-group{
    display: block;
}
.form-group label{
    text-transform: uppercase;
    font-weight: 700;
}
.form-group input{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 50%;
    outline: none;
    border: 2px solid black;
}
.form-group #tieude,#img{
    padding: 15px;
}
.form-group #content{
   height: 100px;
}
button{
    padding: 10px 20px;
    margin-right: 20px;
    border: none;
}
#save{
    background-color: orange;
}
#delete{
    background-color: #ff0000c7;
}

.main .right{
    width: 200px;
    height: 300px;
    border: 5px solid black;
    padding: 1px 5px;
}
.right h1{
    text-transform: uppercase;
    font-weight: 700;
}
.right ul{
    text-transform: uppercase;
    font-weight: 700;
    margin-left: -25px;
}


avatar
Đào Mạnh Dũng [C2010L]
2021-03-13 14:33:44


#blog.html


<!DOCTYPE html>
<html>
<head>
	<title>Web tin tuc</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="head">
		<div style="display: flex;width: 100%; margin-top: 20px;margin-bottom: 10px;">
			<div class="logo">LOGO</div>
			<div style="color: grey;margin: 0px auto;">Web tin tuc</div>
		</div>
		<div class="menu1">
			
			<ul>
				<li>TRANG CHU</li>
				<li>TIN HOC</li>
				<li>BIEU MAU</li>
				<li>KHOA HOC</li>
				<li>TUYEN DUNG</li>
				<li>LIEN HE</li>
			</ul>

		</div>
	</div>

<b>
		<div style="display: flex;">
		<div class="main">
			
				 <div style="margin-left: 10px">
				 	
				 <h3>NOI DUNG BAI VIET</h3>
				 <br>
				 <p id="tdshow">
				 	
				 </p>
				 <img src="" id="imgshow">
				 <p id="nnshow">
				 	
				 </p>





				 </div>

		</div>
	
				<div class="menu2">

						 <div style="border: solid 5px black;width: 80%">
						 	<div style="margin-left: 10px">

						 		
						 		<h3>BAI VIET MOI NHAT</h3>


						<br>

						<ul>
							<li>BAI 1</li>
							<li>BAI 2</li>
							<li>BAI 3</li>
							<li>BAI 4</li>
							<li>BAI 5</li>
							<li>BAI 6</li>
						</ul>
						 	</div>
						 </div>
				
				</div>
	</div>


</b>


<script type="text/javascript">
	document.getElementById("tdshow").innerHTML=localStorage.getItem("tieude");
	document.getElementById("imgshow").src=localStorage.getItem("anh");
	document.getElementById("nnshow").innerHTML=localStorage.getItem("noidung");
</script>
</body>
</html>


#code.js


 
function cblog() {
	 
	alert("Tạo bài viết thành công!");

	localStorage.setItem("tieude", document.getElementById("td").value);
	localStorage.setItem("anh", document.getElementById("img").value);
	localStorage.setItem("noidung", document.getElementById("nn").value);
 

	window.open('blog.html','_blank');

		// alert("Tạo bài viết thành công!");


return false;

}


#main.html


<!DOCTYPE html>
<html>
<head>
	<title>Web tin tuc</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="head">
		<div style="display: flex;width: 100%; margin-top: 20px;margin-bottom: 10px;">
			<div class="logo">LOGO</div>
			<div style="color: grey;margin: 0px auto;">Web tin tuc</div>
		</div>
		<div class="menu1">
			
			<ul>
				<li>TRANG CHU</li>
				<li>TIN HOC</li>
				<li>BIEU MAU</li>
				<li>KHOA HOC</li>
				<li>TUYEN DUNG</li>
				<li>LIEN HE</li>
			</ul>

		</div>
	</div>

<b>
		<div style="display: flex;">
		<div class="main">
			
				<form onsubmit="cblog()">
					<h3>NHAP THONG TIN BAI VIET</h3>
					<h3>TIEU DE</h3>
						<input type="text"  id="td" class="input" minlength="10" maxlength="200">

					<h3>HINH ANH</h3>
						<input type="text"  id="img" class="input" minlength="5" maxlength="500">

					<h3>NOI DUNG</h3>
						<input type="text"  id="nn" class="input2" minlength="10" maxlength="500">



				<div >
					<button style="background-color: orange;color: #4d2600" class="button" type="submit">LUU</button>
					<button style="background-color:red" class="button" type="reset">XOA</button>
				</div>
				</form>

		</div>
	
				<div class="menu2">

						 <div style="border: solid 5px black;width: 80%">
						 	<div style="margin-left: 10px">


						 		<h3>BAI VIET MOI NHAT</h3>


						<br>

						<ul>
							<li>BAI 1</li>
							<li>BAI 2</li>
							<li>BAI 3</li>
							<li>BAI 4</li>
							<li>BAI 5</li>
							<li>BAI 6</li>
						</ul>
						 	</div>
						 </div>
				
				</div>
	</div>


</b>


<script type="text/javascript"  >
	function cblog() {
	 
	alert("Tạo bài viết thành công!");

	localStorage.setItem("tieude", document.getElementById("td").value);
	localStorage.setItem("anh", document.getElementById("img").value);
	localStorage.setItem("noidung", document.getElementById("nn").value);
 

	window.open('blog.html','_blank');

		// alert("Tạo bài viết thành công!");


return false;

}
</script>
</body>
</html>


#style.css


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

}
.logo{
	color: white;
	background-color: red;
	padding:  10px 20px 1px 5px ;
	margin-left: 30px;
	font-size: 20px;
	width:8%;
}
.menu1{
	
	background-color: lightblue;
	padding-top: 1px;
}
.menu1 ul {
	display: flex;
	
	padding-left: 10%;
	background-color: #448ac1;
	 


}
.menu1 ul li{
	color: white;
	background-color: #448ac1;
	list-style-type: none;
	border-right: solid 1px white;
	padding-left: 8px;
	padding-right: 12px;
	padding-top: 20px;
	padding-bottom: 10px;
	font-size: 18px;
}
.menu1 ul li:hover{
background-color: lightblue;
}
.main{
	margin-left: 10px;
	width: 80%;
}
.input{
	border: solid 5px black;
	padding-right: 60px;
}
.input2{
	border: solid 5px black;
	padding-bottom: 100px;
	padding-right: 60px;

}
.button{

	  padding: 3px 1px 8px 10px;
	 

	  border: none;
	  color: white;
	  padding: 15px 32px;
	   
	  text-decoration: none;
	   
	  font-size: 16px;
	  margin-top: 10px;
	  margin-right: 42px;

	  
}
.menu2{
	width: 20%;

}
.menu2 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	padding-bottom: 20px;
}


avatar
Lã Đức Anh [community,C2010L]
2021-03-13 14:26:30



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

.container{
	width: 100%;
}

.header{
	width: 100%;
}


.header .logo{
	width: 80%;
	display: flex;
	font-size: 30px;

}

.header .logo img{
	width: 10%;

}

.header .web{
	margin: 0px auto;
}

.header .menu ul{
	display: flex;
	list-style-type: none;
	background-color: #3369f3;
	width: 100%;
	margin: 0px auto;
}

.header .menu ul li{
	font-size: 20px;
	padding-right: 5px;
	padding-left: 5px;
	border-right: solid white 1px;
	cursor: pointer;
	color: white;
	padding-top: 5px;
	padding-bottom: 5px;	

}

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

.align-center{
	
	width: 100%;
	margin: 0px auto;

	
}

.main{
	display: flex;
}

.main .col-8{
	width: 70%;
	
}

.main .col-4{
	width: 10%;
	border: solid 5px;
	
}


avatar
Đào Mạnh Dũng [C2010L]
2021-03-13 14:26:26


#blog.html


<!DOCTYPE html>
<html>
<head>
	<title>Web tin tuc</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="head">
		<div style="display: flex;width: 100%; margin-top: 20px;margin-bottom: 10px;">
			<div class="logo">LOGO</div>
			<div style="color: grey;margin: 0px auto;">Web tin tuc</div>
		</div>
		<div class="menu1">
			
			<ul>
				<li>TRANG CHU</li>
				<li>TIN HOC</li>
				<li>BIEU MAU</li>
				<li>KHOA HOC</li>
				<li>TUYEN DUNG</li>
				<li>LIEN HE</li>
			</ul>

		</div>
	</div>

<b>
		<div style="display: flex;">
		<div class="main">
			
				 <div style="margin-left: 10px">
				 	
				 <h3>NOI DUNG BAI VIET</h3>
				 <br>
				 <p id="tdshow">
				 	
				 </p>
				 <img src="" id="imgshow">
				 <p id="nnshow">
				 	
				 </p>





				 </div>

		</div>
	
				<div class="menu2">

						 <div style="border: solid 5px black;width: 80%">
						 	<div style="margin-left: 10px">

						 		
						 		<h3>BAI VIET MOI NHAT</h3>


						<br>

						<ul>
							<li>BAI 1</li>
							<li>BAI 2</li>
							<li>BAI 3</li>
							<li>BAI 4</li>
							<li>BAI 5</li>
							<li>BAI 6</li>
						</ul>
						 	</div>
						 </div>
				
				</div>
	</div>


</b>


<script type="text/javascript" src="code.js"></script>
</body>
</html>


#code.js


function cblog() {
	 


	// localStorage.setItem("tieude", document.getElementById("td").value);
	// localStorage.setItem("anh", document.getElementById("img").value);
	// localStorage.setItem("noidung", document.getElementById("nn").value);

	// document.getElementById("tdshow").innerHTML=localStorage.getItem("tieude");
	// document.getElementById("imgshow").src=localStorage.getItem("anh");
	// document.getElementById("nnshow").innerHTML=localStorage.getItem("noidung");

	// window.open('http://localhost:86/phpmyadmin/','_blank');

		alert("Tạo bài viết thành công!");


return false;

}


#main.html


<!DOCTYPE html>
<html>
<head>
	<title>Web tin tuc</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="head">
		<div style="display: flex;width: 100%; margin-top: 20px;margin-bottom: 10px;">
			<div class="logo">LOGO</div>
			<div style="color: grey;margin: 0px auto;">Web tin tuc</div>
		</div>
		<div class="menu1">
			
			<ul>
				<li>TRANG CHU</li>
				<li>TIN HOC</li>
				<li>BIEU MAU</li>
				<li>KHOA HOC</li>
				<li>TUYEN DUNG</li>
				<li>LIEN HE</li>
			</ul>

		</div>
	</div>

<b>
		<div style="display: flex;">
		<div class="main">
			
				<form onsubmit="cblog()">
					<h3>NHAP THONG TIN BAI VIET</h3>
					<h3>TIEU DE</h3>
						<input type="text"  id="td" class="input" minlength="10" maxlength="200">

					<h3>HINH ANH</h3>
						<input type="text"  id="img" class="input" minlength="5" maxlength="500">

					<h3>NOI DUNG</h3>
						<input type="text"  id="nn" class="input2" minlength="10" maxlength="500">



				<div >
					<button style="background-color: orange;color: #4d2600" class="button" type="submit">LUU</button>
					<button style="background-color:red" class="button" type="reset">XOA</button>
				</div>
				</form>

		</div>
	
				<div class="menu2">

						 <div style="border: solid 5px black;width: 80%">
						 	<div style="margin-left: 10px">


						 		<h3>BAI VIET MOI NHAT</h3>


						<br>

						<ul>
							<li>BAI 1</li>
							<li>BAI 2</li>
							<li>BAI 3</li>
							<li>BAI 4</li>
							<li>BAI 5</li>
							<li>BAI 6</li>
						</ul>
						 	</div>
						 </div>
				
				</div>
	</div>


</b>


<script type="text/javascript" src="code.js"></script>
</body>
</html>


#style.css


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

}
.logo{
	color: white;
	background-color: red;
	padding:  10px 20px 1px 5px ;
	margin-left: 30px;
	font-size: 20px;
	width:8%;
}
.menu1{
	
	background-color: lightblue;
	padding-top: 1px;
}
.menu1 ul {
	display: flex;
	
	padding-left: 10%;
	background-color: #448ac1;
	 


}
.menu1 ul li{
	color: white;
	background-color: #448ac1;
	list-style-type: none;
	border-right: solid 1px white;
	padding-left: 8px;
	padding-right: 12px;
	padding-top: 20px;
	padding-bottom: 10px;
	font-size: 18px;
}
.menu1 ul li:hover{
background-color: lightblue;
}
.main{
	margin-left: 10px;
	width: 80%;
}
.input{
	border: solid 5px black;
	padding-right: 60px;
}
.input2{
	border: solid 5px black;
	padding-bottom: 100px;
	padding-right: 60px;

}
.button{

	  padding: 3px 1px 8px 10px;
	 

	  border: none;
	  color: white;
	  padding: 15px 32px;
	   
	  text-decoration: none;
	   
	  font-size: 16px;
	  margin-top: 10px;
	  margin-right: 42px;

	  
}
.menu2{
	width: 20%;

}
.menu2 ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	padding-bottom: 20px;
}


avatar
Lã Đức Anh [community,C2010L]
2021-03-13 14:26:22



<!DOCTYPE html>
<html>
<head>
	<title>Ôn tập HTML/CSS/JS - 60 phút </title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="container">
		<div class="header">
			<!-- <div class="align-center"> -->
				<div class="logo">
					<img src="https://toppng.com/uploads/preview/faze-clan-png-svg-free-download-faze-clan-steam-logo-11562979976dcz2krofb1.png">
					
						<div class="web">
							<h3>Web Tin Tuc</h3>
						</div>
				</div>
			<!-- </div> -->
			<div class="menu">
				<div class="align-center">
						<ul>
							<li>Trang Chu</li>
							<li>Tin Hoc</li>
							<li>Bieu Mau</li>
							<li>Khoa Hoc</li>
							<li>Tuyen Dung</li>
							<li>Lien He</li>
						</ul>
				</div>
			</div>
		</div>
		<div class="main">
			<!-- div class="align-center"> -->
			<div class="col-8">
				<h3>Noi Dung Bai Viet</h3>
				<div>
					Được dịch từ tiếng Anh-HLTV, trước đây là từ viết tắt của Half-Life tivi, là một trang web và diễn đàn tin tức chuyên về Counter-Strike: tin tức tấn công toàn cầu, các giải đấu và thống kê. Đây là một trong những trang web hàng đầu trong cộng đồng Counter-Strike với hơn 4 triệu khách truy cập mỗi tháng.
				<!-- </div> -->
				</div>
			</div>
			<div class="col-4">
				<label>Bai viet cu nhat</label>
				<ul>
					<li>Bai 1</li>
					<li>Bai 2</li>
					<li>Bai 3</li>
					<li>Bai 4</li>
					<li>Bai 5</li>
				</ul>
			</div>
		</div>
	</div>
</body>
</html>