[Video] Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS - C2110L

Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS

#index.html

Name: ZicZac: Thiết kế web & app & quản lý tồn kho
Address: Số 08 Tôn Thất Thuyết, Cầu Giấy, Hà Nội, Nam Từ Liêm, Hà Nội, 100000
Telephone: 0967025996
Price range: $$$

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Blog Tin Hoc</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
	<div class="header">
		<div class="logo">
			<h1>Blog Tin Hoc<sup>TM</sup></h1>
			<h4>Just basic begining</h4>
		</div>
		<div class="navbar">
			<ul id="menu-left">
				<li>Home</li>
				<li>Bao Nhac Phim</li>
				<li>Quy Dinh</li>
				<li>Lien He</li>
				<li>Radio</li>
			</ul>
			<ul id="menu-right">
				<li>
					<input type="text" name="s" placeholder="Searching ...">
				</li>
			</ul>
		</div>
	</div>
	<div class="main-content">
		<div class="main">
			<h3>Noi dung bai viet</h3>
			<img src="https://gokisoft.com/uploads/stores/49/2022/01/quan-ly-sinh-vien-bang-javascript.png" style="width: 100%">
		</div>
		<div class="tab-right">
			<div class="panel">
				<h4>Friend's Blog</h4>
				<ul>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
				</ul>
			</div>


			<div class="panel">
				<h4>Friend's Blog</h4>
				<ul>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
				</ul>
			</div>

			
			<div class="panel">
				<h4>Friend's Blog</h4>
				<ul>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
					<li>Vi du 1</li>
				</ul>
			</div>
		</div>
	</div>
</div>
</body>
</html>

#style.css

body {
	padding: 0px;
	margin: 0px;
}

.container {
	margin-left: 10%;
	margin-right: 10%;
}

.header .logo {
	background-image: linear-gradient(to right, white, #73c2c6);
}

.header .logo h1 {
	margin: 0px;
	color: #069498;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 30px;
}

.header .logo h4 {
	margin: 0px;
	color:  blue;
	padding-bottom: 40px;
	padding-left: 30px;
}

.navbar {
	background-color: #a3c159;
	display: flex;
	position: relative;
}

#menu-left {
	list-style-type: none;
	display: flex;
	padding: 0px;
	margin: 0px;
}

#menu-left li {
	padding: 10px 20px;
	color: white;
	border-right: solid white 1px;
	cursor: pointer;
}

#menu-left li:hover {
	background-color: orange;
}

#menu-right {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	width: 20%;
	background-color: orange;
	padding: 9px;
	position: absolute;
	right: 0px;
}

.main-content {
	display: flex;
	position: relative;
}

.main {
	padding: 10px;
}

.tab-right {
	position: absolute;
	right: 0px;
	padding: 10px;
	width: 20%;
}

.tab-right .panel h4 {
	background-color: #a3c159;
	color: white;
	padding: 10px;
	border-top-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.tab-right .panel ul {
	list-style-type: none;
	font-size: 16px;
	padding: 0px;
	margin: 0px;
}

.tab-right .panel ul li {
	border-bottom: dotted grey 1px;
	padding: 5px 10px;
}

Phản hồi từ học viên

5

(Dựa trên đánh giá ngày hôm nay)

Đỗ Huy Hòa

2022-02-27 12:25:39

#index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BT2206</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="header">
            <div class="navbar">
                <div class="justify-content">
                    <div class="logo">
                        <h1>Blog tin hoc <sup>tm</sup></h1>
                        <h3>Just Basic Begging</h3>

                    </div>


                </div>
            </div>
            <div class="menubar">
                <div class="menu">
                    <ul>
                        <li>home</li>
                        <li>bao-nhac-phim</li>
                        <li>quy dinh</li>
                        <li>lien he</li>
                        <li>radio</li>
                    </ul>
                    <div class="search">
                        <input type="text" name="s">
                        <button>Go!</button>



                    </div>
                </div>

            </div>
        </div>
        <div class="main">
            <div class="row">
                <div class="content">
                    <h1 style="color:#90ced7">Giai phong RAM de may chay nhanh</h1>
                    <p>Một hệ thống với 2GB bộ nhớ RAM vẫn có thể chạy ì ạch nếu nó được cấu hình không tốt và bạn phải nâng cấp lên 4GB RAM để rồi phát hiện để rồi phát hiện ra PC của mình chỉ có thể truy cập #GB RAM. Vì vậy dung lượng RAM đã đi dâu và
                        có cách nào để lấy lại được không? Cài đặt Window Vista 64bit có thể tạo nên sự khác bittj thực sự nếu như phần cứng cảu bạn đủ đáp ứng.</p>
                    <img src="https://www.begin-it.com/media-content/howto/use-autoruns-to-manually-clean-an-infected-pc-1.png" alt="">
                    <p>Chiều nay (6/3), theo thông tin từ bà Nguyễn Thị Quỳnh Triều, Chủ tịch Uỷ ban nhân dân phường Bến Thành, Quận 1, TPHCM chính quyền địa phương với một số đơn vị chức năng Quận 1 đã đưa 35 người Trung Quốc nghi nhập cảnh trái phép đi
                        cách ly tại Bệnh viện dã chiến Củ Chi. Đưa 35 người Trung Quốc nghi nhập cảnh trái phép tại một khách sạn đi cách ly tại Bệnh viện dã chiến Củ Chi. (ảnh minh hoạ) Đưa 35 người Trung Quốc nghi nhập cảnh trái phép tại một khách sạn
                        đi cách ly tại Bệnh viện dã chiến Củ Chi. (ảnh minh hoạ) Trước đó vào ngày 5/3, thông qua công tác nắm tình hình, lực lượng chức năng Quận 1 phát hiện nhóm người trên đang lưu trú tại một khách sạn trên đường Lý Tự Trọng, phường
                        Bến Thành. Ngay sau đó, các đơn vị liên quan đã tiến hành làm việc với quản lý khách sạn và nhóm người trên. Tiến hành cô lập và thực hiện các biện pháp phòng dịch phun thuốc khử khuẩn toàn bộ khách sạn. Ngoài nhóm 35 người được
                        đưa cách ly tại Bệnh viện dã chiến Củ Chi theo quy định, hiện khách sạn này tạm thời ngưng nhận khách và bên ngoài có lực lượng chức năng túc trực. Nhân viên làm việc tại khách sạn này đang được cách ly tạm thời tại đây, chờ kết
                        quả xét nghiệm nhóm người trên sẽ có phương án xử lý tình huống phù hợp./.</p>
                </div>
                <div class="main-right">
                    <div class="panel">
                        <div class="panel-heading">
                            Firend's Blog
                        </div>
                        <div class="panel-body">
                            <ul>
                                <li>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"/>
                                      </svg> Blog Viet
                                </li>
                                <li>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"/>
                                      </svg>Su Tam - Doc, Dep, Dieu
                                </li>
                                <li>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-right-square" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V2zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2zm5.854 8.803a.5.5 0 1 1-.708-.707L9.243 6H6.475a.5.5 0 1 1 0-1h3.975a.5.5 0 0 1 .5.5v3.975a.5.5 0 1 1-1 0V6.707l-4.096 4.096z"/>
                                      </svg>Thu thuat blog chat internet
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="panel">
                        <div class="panel-heading">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rss-fill" viewBox="0 0 16 16">
                                <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                              </svg> VinaBlog.Blogsot.com
                        </div>
                        <div class="panel-body">
                            <ul>
                                <li>Blog Viet</li>
                                <li>Su Tam - Doc, Dep, Dieu</li>
                                <li>Thu thuat blog chat internet</li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-heading">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rss-fill" viewBox="0 0 16 16">
                                <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                              </svg> Tuổi trẻ online
                        </div>
                        <div class="panel-body">
                            <ul>
                                <li>
                                    Blog Viet</li>
                                <li>Su Tam - Doc, Dep, Dieu</li>
                                <li>Thu thuat blog chat internet</li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel">
                        <div class="panel-heading">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rss-fill" viewBox="0 0 16 16">
                                <path d="M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm1.5 2.5c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1 0-2zm0 4a6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1 0-2zm.5 7a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
                              </svg> VnExpress
                        </div>
                        <div class="panel-body">
                            <ul>
                                <li>Blog Viet</li>
                                <li>Su Tam - Doc, Dep, Dieu</li>
                                <li>Thu thuat blog chat internet</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">

        </div>
    </div>
</body>

</html>

#style.css

body {
    margin: 0px;
    padding: 0px;
}

.container,
.header,
.main-content,
.footer,
.navbar,
.menubar {
    width: 100%;
}

.container {
    width: 60%;
    margin: 0px auto;
    display: block;
}

.logo {
    background-image: linear-gradient(to right, #f0fafc, #add9da);
    padding: 20px;
}

.header {
    width: 100%;
    display: block;
}

.logo h1 {
    text-transform: uppercase;
    color: #0c83bc;
}

.logo h3 {
    color: #0739aa;
    font-family: cursive;
}

.navbar {
    /* padding-bottom: 5px; */
}

.menubar {
    width: 100%;
}

.menu {
    padding: 0px;
    margin: 0px;
    width: 100%;
    display: flex;
    /* background-color: #25e773; */
}

.menu ul {
    width: 70%;
    margin: 0px;
    list-style-type: none;
    display: flex;
    background-color: #a3c159;
}

.menu ul li {
    border-right: white 1px solid;
    text-transform: uppercase;
    color: white !important;
    font-size: 15px;
    /* margin-right: 10px; */
    padding: 10px;
    cursor: pointer;
}

.menu ul li:hover {
    background-color: rgb(226, 138, 22);
}

.search {
    width: 30%;
    background-color: #fec42d;
    padding-left: 15px;
    padding-top: 7px;
}

.search input {
    padding-left: 5px;
    padding-top: 5px;
}

.search button {
    padding-top: 5px;
    background-color: #25e773;
    text-align: center;
}

.main {
    display: block;
    width: 100%;
}

.content {
    width: 70%;
    text-align: justify;
    padding-right: 25px;
    box-shadow: 5px 0px 5px -5px rgb(40, 47, 55);
}

.row {
    width: 100%;
    display: flex;
}

.main-right {
    width: 30%;
    padding-left: 15px;
}

.panel {
    display: block;
}

.panel .panel-heading {
    background-color: #a3c159;
    padding: 6px;
    font-weight: bold;
    color: white;
    margin-top: 15px;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.panel .panel-body {
    list-style-type: none;
}

.panel .panel-body ul {
    list-style-type: none;
    ;
}

.panel .panel-body ul li {
    border-bottom: 1px solid #81888d31;
    font-size: 17px;
    padding-bottom: 10px;
    padding-top: 5px;
}


/* .footer {
    height: 300px;
    padding-bottom: 5px;
    border: rgb(35, 128, 134) solid 2px;
} */

[Video] Bài tập - kiểm tra 60 phút - thiết kế website sau - Lập trình HTML/CSS/JS - C2110L

#index.html

#style.css

Tags:

Phản hồi từ học viên

5

Đỗ Huy Hòa

#index.html

#style.css

Đăng nhập để làm bài kiểm tra

Chưa có kết quả nào trước đó