Bài tập HTML/CSS cơ bản: Trang chủ website nhà trường

HuanBuiThanh

 


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%;

  }

}


Getting Info...

إرسال تعليق

Cảm ơn bạn đã quan tâm và gửi nhận xét tại
http://huanbuithanh.blogspot.com
hãy ghé thăm blog hàng ngày để được cập nhật những thủ thuật mới nhất nhé . thân ái !
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.