Home HTML/CSS Lập trình

Hướng dẫn tự viết 1 trang web đơn giản bằng HTML và CSS

tác giả Trần Tiến
xuất bản
Thông báo:

Cảm ơn bạn đã theo dõi QuangNinhBay.Com trong suốt thời gian qua.
Trong thời gian tới website sẽ update để bạn có trải nghiệm mượt mà hơn. Nội dung về thiết kế website cũng như các thủ thuật sẽ được đội ngũ QuangNinhBay.Com Update thường xuyên hơn.
Xin cảm ơn!

 Xin chào các bạn, trong bài viết này mình sẽ hướng dẫn đến các bạn cách tạo 1 trang web bằng HTML và CSS rất đơn giản.

đầu tiên các bạn xem qua demo ảnh và demo trang động luôn nhé.

Demo ảnh




Demo trang live

còn dưới đây là toàn bộ Source Code và CSS của trang trên:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuangNinhBay.Com Niềm vui là chia sẻ !</title>
    <link rel="shortcut icon" href="https://www.quangninhbay.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./CSS/style.css">
</head>

<body>
    <div class="container">
        <!-- Open header -->
        <div class="header">
            <div class="header-top">
                <a href="#">Sign Up |</a>
                <a href="#">Login |</a>
                <a href="#">RSS Feeds |</a>
                <a href="#">Archived News</a>
            </div>
            <div class="logo">
                <img src="./IMG/logo.png" alt="Logo">
            </div>
        </div>
        <!-- Close header -->
        <!-- Open menu -->
        <div class="menu">
            <ul>
                <li><a href="#">MODELS</a></li>
                <li><a href="#">BRAND</a></li>
                <li><a href="#">OWNERSHIP</a></li>
                <li><a href="#">EXPERIENCE</a></li>
                <li><a href="#">GALLERRY</a></li>
                <li><a href="#">MOTOSPORT</a></li>
                <li><a href="#">STORE</a></li>
                <li><a href="#">DESIGN</a></li>
            </ul>
        </div>
        <!-- Close menu -->
        <!-- Open content -->
        <div class="content">
            <div class="banner">
                <img src="./IMG/banner.png" alt="banner">
            </div>
            <div class="our-product">
                <div class="our-product-heading">
                    <h2><a href="">Some of Our Product</a></h2>
                </div>
                <div class="our-product-body">
                    <!-- Open product-item -->
                    <div class="product-item">
                        <div class="product-item-img">
                            <img src="./IMG/product-item-img-1.png" alt="item1">
                        </div>
                        <div class="product-item-content">
                            <h3><a href="">Huracán Models</a></h3>
                            <p>Discover all the new models of this exclusive car family, created to shape to your
                                deepest emotions.</p>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-item-img">
                            <img src="./IMG/product-item-img-2.png" alt="item2">
                        </div>
                        <div class="product-item-content">
                            <h3><a href="">Aventador Models</a></h3>
                            <p>To us at Lamborghini, revolutionary thinking is a staple.</p>
                        </div>
                    </div>
                    <div class="product-item">
                        <div class="product-item-img">
                            <img src="./IMG/product-item-img-3.png" alt="item3">
                        </div>
                        <div class="product-item-content">
                            <h3> <a href=""><a href="">Urus Models</a></a> </h3>
                            <p>A super sports car soul and the functionality typical for an SUV</p>
                        </div>
                    </div>
                    <!-- close product-item -->
                </div>
                <!-- Open techno -->
                <div class="techno">
                    <div class="techno-heading">
                        <h2><a href="">Style and New Technologies</a></h2>
                    </div>
                    <div class="techno-body">
                        <div class="techno-item">
                            <div class="techno-item-img">
                                <img src="./IMG/techno-1.png" alt="techno-1">
                            </div>
                            <div class="techno-item-content">
                                <span>04 MARCH 2020</span>
                                <h3><a href="">LAMBORGHINI MATCH-UP FOR THE BIG GAME</a></h3>
                                <p>Chiefs and 49ers fans converged on Miami in early February for spirited celebration
                                    of the NFL Super Bowl®—the undisputed highlight for millions of American sports
                                    lovers each year. Lamborghini was there to push the party to full speed, inviting
                                    select guests to an exclusive test-drive opportunity around the city’s bayfront
                                    area.</p>
                            </div>
                        </div>
                        <div class="techno-item">
                            <div class="techno-item-img">
                                <img src="./IMG/techno-2.png" alt="techno-1">
                            </div>
                            <div class="techno-item-content">
                                <span>08 MARCH 2020</span>
                                <h3><a href="">LAMBORGHINI WINTER DRIVING EXPERIENCE GOES TO ASPEN</a></h3>
                                <p>To drive a Lamborghini on the racetrack is to experience the extraordinary machine in
                                    its natural habitat. Drivers at the Esperienza Accademia Neve winter driving course
                                    in January and February took that sensation to cool extremes, pushing the
                                    Lamborghini Huracán EVO supercar and Urus Super Sport Utility Vehicle to their
                                    limits on a track topped with ice and snow.</p>
                            </div>
                        </div>
                        <div class="techno-item">
                            <div class="techno-item-img">
                                <img src="./IMG/techno-3.png" alt="techno-1">
                            </div>
                            <div class="techno-item-content">
                                <span>10 MARCH 2020</span>
                                <h3><a href="">HURACÁN EVO SPYDER IS ROBB REPORT’S CAR OF THE YEAR 2020</a></h3>
                                <p>Huracán EVO Spyder was awarded the title of Robb Report’s Car of the Year 2020, thus
                                    proving Lamborghini victorious for a fourth year running. Acting as “editors for a
                                    day,” 171 judges joined to drive and vote on which of 11 new models would become the
                                    winner. </p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Close techno -->
            </div>
        </div>
        <!-- close content -->
        <!-- Open footer -->
        <div class="footer">
            <div class="copyright">
                <span> Copyright © 2013 - All Rights Reserved - Domain Name</span>
            </div>
            <div class="social">
                <a href="https://twitter.com/"><img src="./IMG/twitter.png" alt="twitter.com"></a>
                <a href="https://www.linkedin.com/"><img src="./IMG/linkedin.png" alt="linkedin.com"></a>
                <a href="https://www.facebook.com/"><img src="./IMG/facebook.png" alt="facebook.com"></a>
                <a href="https://quangninhbay.com/"><img src="./IMG/rss.png" alt="quangninhbay.com"></a>
            </div>
        </div>
        <!-- Close footer -->
    </div>
</body>

</html>
Đây là CSS:
*{
    box-sizing: border-box;
    padding: 0 0;
    margin: 0 0;
}
body{
    background: #f0ecec;
}
button{
    clear: both;
    line-height: 25px;
}
.search input#search{
    width: 200px;
    line-height: 25px;
    background: #ffffff;
    font-size: 10pt;
    color: rgb(3, 3, 3);
  }
header{
    background: #ffffff;
}
.header-top {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    background: #2b2b2b;
}

.header-top a {
    color: #ffffff;
    margin: 0px;
    display: inline-block;
    font-size: 14px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
}

.logo {
    padding: 10px 20px;
    text-align: center;
}
.menu {
    text-align: center;
    margin: 0 20px;
    height: 40px;
    border-radius: 8px 8px;
    background: #2b2b2b;
}
.menu ul{
    margin: auto;
}
.menu ul li{
    display: inline;
    align-items: center;
    min-height: 40px;
    margin: 0 25px;
    cursor: pointer;
    user-select: none;
}
.menu ul li:hover{
    background: #f0ecec;
}
.menu ul li a:hover{
    color: red;
}
.menu ul li a {
    color: #ffffff;
    text-decoration: none;
    padding: 0px 15px;
    line-height: 40px;
    font-family: Arial, Helvetica, sans-serif;
}
.content{
    /* width: 95%; */
    margin: auto;
}
.banner{
    margin: auto;
}
.banner img{
    object-fit: cover;
    padding: 20px;
    width: 100%;
}
.our-product{
    padding: 0 20px 20px 20px;
}
.our-product-body{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px; /*khoang cach giua 2 khoi grib*/
}
.our-product-heading{
    margin-bottom: 25px;
}
.our-product-heading h2 a{
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #2b2b2b;
}
.our-product .our-product-body .product-item{
    display: grid;
    grid-template-columns: 70px 1fr;
    grid-gap: 20px;
}
.product-item-img img{
    float: left;
    margin: 0 20px 0 0;
}
.product-item-content h3 a, p{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #2b2b2b;
    font-size: 15px;
}
.techno{
    /* padding: 20px; */
}
.techno-heading{
    margin: 20px 0px;
}
.techno-heading h2 a{
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: none;
    color: #2b2b2b;
}
.techno-body{
    /* margin: 0 20px; */
}
.techno-item{
    display: grid;
    grid-template-columns: 480px 1fr;
    grid-gap: 40px;
    margin: 35px 0;
}
.techno-item-content h3 a{
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #2b2b2b;
    display: block;
    padding-bottom: 30px;
}
.techno-body .techno-item span {
    display: block;
    padding-bottom: 30px;
}
.techno-body .techno-item .techno-item-content p{
    display: block;
    text-align: justify;
}
.footer{
    background: #2b2b2b;
    height: 80px;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.copyright{
    text-align: left;
    padding: 0 20px;
    line-height: 80px;
}
.copyright span{
    color: #ffffff;
}
.social{
    text-align: right;
    /* line-height: 80px; */
    padding: 21px;
}
.social a{
    padding: 0 5px;
}
/*code trỏ chuột */
html,body {
    cursor: url("https://i.imgur.com/5v5M8gh.png"), auto;
}

a:hover {
    cursor: url("https://i.imgur.com/IXULuQ1.png"), auto;
}

/*Kết thúc code trỏ chuột */
Link chứa ảnh toàn website:


Hướng Dẫn:
  • Bước 1: các bạn tải phần mềm Visual Studio Code: tại đây
  • Bước 2: Mở phần mềm vừa cài đặt lên: nhất Crtl + N Để tạo 1 file mới  có tên "index.html" có đuôi .html và 1 files "style.css" có đuôi là .css
  • Bước 3: Các bạn copy đoạn code html và dán vào phần files html mà bạn vừa tạo, tương tự copy đoạn css và dán vô files css mà bạn vừa tạo
  • Bước 4: sửa đoạn code sau ở files html 
    <link rel="stylesheet" href="./CSS/style.css">
    Phần ./CSS/style.css Sửa thành đường dẫn đến files CSS của bạn.

Chúc các bạn thành công.
BÀI VIẾT CÙNG CHUYÊN MỤC
CÓ THỂ BẠN ĐANG TÌM