Bài tập HTML/CSS cơ bản: Tạo trang cá nhân

HuanBuiThanh

 


Code HTML:

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" href="css/themify-icons/themify-icons.css">

        <link rel="stylesheet" href="css/h.css">

    </head>

    <body>

 

     

    <div id="nav">

            <center>

                <img src="images/hbt.jpg" width="200px" height="300px" alt="Bùi Thanh Huấn">

                <br/>

                <strong>Bùi Thanh Huấn</strong>

            </center>

            <ul>

                <li><a href="#ttchung">Thông tin chung</a> </li>        

                <li><a href="#hoc-tap">Quá đào tạo</a></li>       

                <li><a href="#kinh-nghiem">Kinh nghiệm làm việc</a></li>

                <li><a href="#lien-ket">Liên kết</a></li>


            </ul>

            <div id="video">

                <iframe width="225" height="300" src="https://www.youtube.com/embed/3sOHjch3few" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                <audio width="225" controls src="images/5c8482a753e8c.mp3"></audio>

            </div>

    </div>

    

   <div id="main">

        <h1 id="ttchung">Thông tin chung <i class="ti-angle-down"></i></h1>  

        

            <p><b>Họ và tên:</b> <b>BÙI THANH HUẤN</b></p>

            <p><b>Trình độ:</b> Cao đẳng</p>

            <p><b>Chức vụ:</b> Giáo viên</p>

            <p><b>Email:</b> <a href="mailto:thanhhuanhb@gmail.com">thanhhuanhb@gmail.com</a></p>

            <p><b>Website:</b> <a href="http://huanbuithanh.blogspot.com">huanbuithanh.blogspot.com</a></p>

            <p><b>Đơn vị công tác:</b> Trường THCS xã Nậm Cần - Tân Uyên - Lai Châu</p>

        

        <h1 id="hoc-tap"> Quá trình đào tạo <i class="ti-angle-down"></i></h1>   

        <ul>

            <li>Năm 2010 - 2014: Cao đẳng tin học - CĐCN Việt Đức - Thái Nguyên</li>

            <li>Năm 2021: Đại học sư phạm tin - trường đại học Thái Nguyên</li>

        </ul>    

        

        <h1 id="kinh-nghiem"> Kinh nghiệm làm việc <i class="ti-angle-down"></i></h1>   

            <ul>

                <li>Là giảng viên bộ môn tin học giảng dạy tại nhiều đơn vị trên cả nước.</li>

                <li>5 năm kinh nghiệm trong nghề tin học ứng dụng.</li>

                <li>Có kinh nghiệm làm việc tại nhiều sở ban nghành, đạt nhiều giải thưởng về tin học</li>

            </ul>

        <h1 id="lien-ket"> Liên Kết <i class="ti-angle-down"></i></h1>   

            <ul>

                <li><a href="login.html"> Đăng nhập hệ thống</a></li>              

            </ul>



   </div>


 

<main>

  

 

</main>

 


 

</div>

 

</body>

</html>


Code CSS:

html {

  font-family: Arial, Helvetica, sans-serif;

}

body {

  height: 900px;

  max-width: 1140px;

  border: 1px solid gray;

  margin: 0 auto;

}


footer {

  padding: 1em;

  color: white;

  background-color: black;

  clear: left;

  text-align: center;

}


#nav {

  background: #f5f5f5;

  float: left;

  width: 20%;

  height: 900px;

  margin: 0;

  padding-left: 1em;

}

#nav img {

  padding: 12px;

}

#nav strong {

  font-size: 20pt;

}


#nav ul {

  list-style-type: none;

  padding: 0;

}

#nav li {

  font-size: 16pt;

  margin-top: 10px;

  margin-bottom: 10px;

  padding-top: 10px;

  padding-bottom: 10pt;

  line-height: 16pt;

}


#nav li:hover {

  background-color: #eee !important;

  color: #000 !important;

}


#nav ul a {

  text-decoration: none;

  font-size: 16pt;

}

#nav li {

  border-bottom: 1px dotted #000;

}


#main {

  height: 900px;

  margin-left: 170px;


  padding: 1em;

  overflow: hidden;

}

#main h1 {

  background-color: #eee;

  text-transform: uppercase;

  font-size: 16pt;

  padding-top: 10px;

  padding-bottom: 10px;

  padding-left: 15px;

  border-radius: 10px;

}

#main p {

  margin-left: 35px;

}

#main li {

  margin: 10px;

}


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.