Xem Mã & Kết Quả

Code

<!DOCTYPE html>
<html>
<head>
    <title>Xem ví dụ</title>
    <style type="text/css">
        body{
            margin:0px;
            font-family:Arial;
        }
        #header{
            background-color:#39e4c2;
            border:1px solid #39e4c2;
            padding:20px;
            text-align:center;
        }
        #header > div:nth-child(1){
            font-size:30px;
            margin-bottom:10px;
        }
        #menu ul{
            background-color:black;
            padding:0px;
            margin:0px;
        }
        #menu ul::after{         
            display:block;
            content:"";
            clear:both;
        }
        #menu ul li{
            float:left;
            list-style-type:none;
        }
        #menu ul li a{
            display:inline-block;
            text-decoration:none;
            padding:12px 20px;
            color:white;
        }
        #menu ul li a:hover{
            background-color:#ddd;
            color:black;
        }
        #main::after{         
            display:block;
            content:"";
            clear:both;
        }
        #main #side{
            box-sizing:border-box;
            padding:10px;
            float:left;
            width:30%;
        }
        #main #side img{
            width:100%;
        }
        #main #content{
            box-sizing:border-box;
            padding:10px;
            float:left;
            width:70%;
        }
        #main #content p:last-child{
            text-align:right;
        }
        #footer{
            background-color:#ddd;
            padding:15px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="header">
        <div>WEB CƠ BẢN</div>
        <div>(giới thiệu sơ qua trang web)</div>
    </div>
    <div id="menu">
        <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
        </ul>
    </div>
    <div id="main">
        <div id="side">
            <p>Thông tin tác giả</p>
            <p>- Họ tên: . . . . . .</p>
            <p>- Ngày sinh: . . . . . .</p>
            <p>- Giới tính: . . . . . .</p>
            <p>- Địa chỉ: . . . . . .</p>
            <p><img src="../image/hugo2.jpg"></p>
        </div>
        <div id="content">
            <h2>Tiêu đề bài viết</h2>
            <p>Nội dung bài viết...</p>
            <p>Ngày đăng: 02/03/2019</p>
        </div>
    </div>
    <div id="footer">Thông tin bản quyền</div>
</body>
</html>