HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Website Trường THCS xã Nậm Cần</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="css/huan.css">
<style>
</style>
</head>
<body>
<div class="header">
<img width="100%" src="http://laichau.edu.vn/upload/48733/20180327/banner_nc.jpg" alt=" THCS xã Nậm Cần">
</div>
<div class="topnav">
<a href="#">Giới Thiệu</a>
<a href="#">Cơ cấu tổ chức</a>
<a href="#">Văn bản - Công văn</a>
<a href="#">Tin tức - sự kiện</a>
<a href="#">Liên hệ</a>
</div>
<div class="row">
<div class="column side">
<ul>
<li>
<a href="#"> Thông báo, phổ biến</a>
</li>
<li>
<a href="#"> Văn bản Phòng, Sở</a>
</li>
<li>
<a href="#"> Hoạt động - Sự kiện</a>
</li>
<li>
<a href="#"> Hoạt động chuyên môn</a>
</li>
<li>
<a href="#"> Thư viện</a>
</li>
</ul>
<div id="login">
<h3>Đăng nhập</h3>
<div id="form">
<form action="" method="GET" onsubmit="return dangnhap()">
<label>Người dùng</label>
<input type="text" id="username" value="" class="input">
<label>Mật khẩu</label>
<input type="password" id="password" value="" class="input">
<input type="submit" value="Login" id="ok">
<input type="reset" value="reset" id="reset">
</form>
</div>
<div id="welcome">
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#reset").hide();
$("#welcome").hide();
$("#ok").click(function () {
if ($("#username").val().length < 1) {
window.alert("Username không được để trống");
return false;
} else {
username = $("#username").val();
}
if ($("#password").val().length < 1) {
window.alert("Password không được để trống");
return false;
} else {
password = $("#password").val();
}
if (username=="admin" && password=="admin") {
$("#form").hide();
$("#welcome").html("</span>Xin chào: " + username + "</span><br/><a href='#'>Đến trang Quản trị </a><br/><a href='#' class='reset'> Đăng Xuất</a>").css("text-indent", "20px");
$("#welcome").show();
return false;
}else{
window.alert("Nhập sai tên hoặc mật khẩu");
return false;
}
})
$(".reset").live("click", function () {
$("#reset").click();
$("#form").show();
$("#welcome").hide();
})
})
</script>
</div>
<div class="column middle">
<div class="column middle tin">
<img src="https://moet.gov.vn/content/tintuc/PublishingImages/tt%20minh%20ch%E1%BB%A7%20tr%C3%AC%20cu%E1%BB%99c%20h%E1%BB%8Dp%20bc%C4%91.jpg?RenditionID=1"
alt="abcd">
<h2> <a href="#">Đẩy mạnh các biện pháp phòng, chống dịch Covid-19 trong ngành Giáo dục</a> </h2>
<span>Theo báo cáo của BCĐ phòng, chống dịch Covid-19 Bộ GDĐT, dịch Covid-19 đã ảnh hưởng đến việc tổ chức dạy học và hoàn thành chương trình năm học 2020-2021</span>
<ul>
<li><a href="#">Trường THCS xã Nậm Cần đón học sinh trở lại trường sau dịch</a></li>
<li> <a href="#">Đại hội Cháu ngoan Bác Hồ tỉnh Lai Châu lần thứ IV, năm 2020</a>
</li>
<li><a href="#">Kế hoạch tổ chuyên môn tháng 8-2021</a></li>
</ul>
</div>
<div class="column middle tinphai">
<ul>
<li>
<a href="#"> Cuộc thi được Phòng Giáo dục và Đào tạo huyện Tân Uyên tổ chức từ ngày
6-14/11.</a>
</li>
<li>
<a href="#"> Họp ban Chỉ đạo thi cấp tỉnh Kỳ thi tốt nghiệp trung học phổ thông năm 2020</a>
</li>
<li>
<a href="#"> Kế hoạch theo dõi tình hình thi hành pháp luật của ngành giáo dục năm 2021 </a>
</li>
<li>
<a href="#"> Hướng dẫn nghỉ tết Nguyên đán Tân Sửu năm 2021 </a>
</li>
<li>
<a href="#"> Đoàn trường tổ chức hội thi cắm hoa - Chào mừng ngày Quốc tế Phụ nữ 8-3 </a>
</li>
<li>
<a href="#"> Chủ động phun thuốc khử trùng phòng virus Corona </a>
</li>
<li>
<a href="#"> Kế hoạch chuyên môn năm học 2016-2017 "</a>
</li>
<li>
<a href="#"> 4 bước thoát hiểm khi rơi xuống nước "</a>
</li>
</ul>
</div>
<div class="column middle tin-ngang">
<ul>
<li>
<img src="https://moet.gov.vn/content/tintuc/PublishingImages/%E1%BA%A3nh%20h%E1%BB%8Dc%20sinh%20l%E1%BB%9Bp%201.jpg?RenditionID=13" alt="">
<span><a href="#">Hướng dẫn thực hiện nhiệm vụ giáo dục tiểu học năm học 2021-2022</a> </span>
</li>
<li>
<img src="https://moet.gov.vn/content/tintuc/PublishingImages/tuyen-sinh-4.jpg?RenditionID=13" alt="">
<span><a href="#">Những hướng dẫn quan trọng đảm bảo tuyển sinh nghiêm túc, an toàn</a> </span>
</li>
<li>
<img src="https://moet.gov.vn/content/tintuc/PublishingImages/h%E1%BB%8Dc%20sinh%20%C4%91%C3%A0%20n%E1%BA%B5ng1.jpg?RenditionID=12" alt="">
<span><a href="#">Các tỉnh xem xét, quyết định không thu học phí khi thiên tai, dịch bệnh</a> </span>
</li>
</ul>
</div>
</div>
</div>
<div class="footer">
<span><h2>TRƯỜNG THCS XÃ NẬM CẦN</h2> </span>
<span>Địa chỉ: Bản Nà Phát, Xã Nậm Cần, huyện Tân Uyên, tỉnh Lai Châu</span><br>
<span>Điện thoại: - Email: thanhhuanhb@gmail.com</span> <br>
<span>Chính sách quyền riêng tư.</span> <br>
<span>Mọi hành động sử dụng nội dung đăng tải trên Website tại địa chỉ Thcsxanamcan.com phải có sự đồng ý
bằng văn bản của Ban giám hiệu nhà trường.</span> <br>
</div>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
body {
width: 1120px;
margin: 0 auto;
}
.row {
background-color: #eee;
}
/* Định dạng header */
.header {
background-color: #fff;
color: #58257b;
text-align: center;
}
/* Định dạng thanh điều hướng trên cùng */
.topnav {
padding-left: 10px;
overflow: hidden;
background-color: #1a7900;
margin-bottom: 1px;
}
/* Định dạng link điều hướng */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Thay đổi màu liên kết khi di chuột qua */
.topnav a:hover {
background-color: #156100;
color: white;
}
/* Tạo ba cột không bằng nhau, float cạnh nhau */
.column {
float: left;
padding: 10px;
}
/* Cột bên trái và phải */
.column.side {
width: 15%;
height: 100%;
padding: 0px;
}
/* Cột chính giữa */
.column.middle {
width: 85%;
padding: 0px 3px;
}
/* Cột tin tức chia 2 ở giữa */
.column.middle.tin {
width: 60%;
background-color: #f4f6fa;
}
.middle.tin img {
width: 100%;
height: 300px;
}
.middle.tin h2 {
font-size: 20px;
line-height: 30px;
margin: 1px;
}
.middle.tin ul {
padding-left: 15px;
}
.middle.tin ul li {
list-style: none;
list-style-type: disc;
padding-left: 1px;
}
.middle.tin a {
font-size: 15px;
line-height: 25px;
text-decoration: none;
font-weight: bold;
color: #000;
}
.middle.tin a:hover {
color: #06c;
}
.middle.tin p {
margin-top: 0px;
}
/* Cột tin tức bên phải */
.column.middle.tinphai {
width: 40%;
padding-left: 30px;
float: right;
background-color: #fff;
}
.column.middle.tinphai ul {
padding-left: 0px;
margin: 0px;
}
.column.middle.tinphai ul li {
list-style: none;
list-style-type: disc;
border-bottom: 1px solid #eee;
padding-top: 10px;
padding-bottom: 10px;
}
.column.middle.tinphai ul li a:hover {
color: #06c;
text-decoration: none;
}
.column.middle.tinphai ul a {
line-height: 19px;
color: #161616;
text-decoration: none;
}
.column.side ul {
padding-left: 0px;
margin: 0px;
background-color: #f4f6fa;
}
.column.side ul li {
list-style: none;
border-bottom: 1px solid #efeff4;
padding-top: 10px;
padding-bottom: 10px;
}
.column.side ul li:hover {
background-color: #156100;
}
.column.side ul li a:hover {
color: #fff;
text-decoration: none;
}
.column.side ul a {
padding-left: 15px;
font-weight: bold;
font-size: 15px;
line-height: 19px;
color: #161616;
text-decoration: none;
}
/* Cột tin tức bên phải */
.column.middle.tin-ngang {
width: 100%;
padding-top: 10px;
padding-bottom: 10px;
background-color: #f4f6fa;
}
.column.middle.tin-ngang img {
width: 295px;
height: 175px;
}
.column.middle.tin-ngang ul {
padding: 0px 0px;
margin: 0px 0px;
}
.column.middle.tin-ngang ul li {
display: inline-block;
background-color: #eee;
width: 295px;
padding-bottom: 10px;
margin-right: 15px;
text-align: justify;
}
.column.middle.tin-ngang a {
text-decoration: none;
font-weight: bold;
color: #000;
}
.footer {
margin: 0 auto;
padding-left: 100px;
padding-top: 20px;
background-color: #156100;
color: #fff;
font-size: 15px;
line-height: 20px;
}
.footer h2 {
margin: 0px;
}
/* Khung đăng nhập */
#login {
height: 270px;
margin: 0px auto;
}
#form {
padding-top: 10px;
}
h3 {
width: 100%;
height: 30px;
background: #1a7900;
margin: 0px 0px;
color: #edf8f9;
padding: 0px 0px;
text-indent: 20px;
}
label {
width: 150px;
font-size: 20px;
padding-left: 20px;
}
.input {
width: 150px;
height: 30px;
line-height: 30px;
font-size: 20px;
}
input[type="submit"] {
float: right;
margin-top: 10px;
margin-right: 74px;
width: 60px;
height: 30px;
}
/* Clear float khác sau các cột */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column.side,
.column.middle {
width: 100%;
}
}