By GokiSoft.com| 15:31 12/10/2020|
Học HTML5 - CSS3

[Share Code] Hướng dẫn thiết kế layout HTML/CSS - Lập trình HTML/CSS/JS


#layout.html


<!DOCTYPE html>
<html>
<head>
	<title>Layout Tutorial</title>
	<meta charset="utf-8">

	<style type="text/css">
		body {
			padding: 0px;
			margin: 0px;
		}

		.root {
			width: 100%;
			display: block;
			background-color: grey;
		}

		.header {
			width: 100%;
			background-color: yellow;
			min-height: 200px;
		}

		.container {
			width: 100%;
			min-height: 800px;
			background-color: white;
		}

		.footer {
			width: 100%;
			background-color: grey;
			min-height: 200px;
		}

		.left-main {
			width: 70%;
			float: left;
		}

		.right-menu {
			width: 30%;
			float: left;
			background-color: red;
			min-height: 800px;
			text-align: justify;
		}

		.topbar {
			width: 100%;
			background-color: grey;
			padding: 8px;
			min-height: 25px;
		}

		.topbar .topbar-left {
			float: left;
			width: 70%;
		}

		.topbar .topbar-right {
			float: left;
			width: 28%;
			text-align: right;
		}

		.topbar img {
			margin: 3px;
		}

		.topbar ul {
			list-style-type: none;
			display: flex;
			color: white;
			padding: 0px;
			margin: 2px;
		}

		.topbar ul li {
			float: left;
			margin-right: 20px;
		}

		.article {
			margin: 5px;
		}
	</style>
</head>
<body>
	<div class="root">
		<div class="header">
			<div class="topbar">
				<div class="topbar-left">
					<ul>
						<li>Ghi Chu</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
						<li>Thiet Ke Web</li>
					</ul>
				</div>
				<div class="topbar-right">
					<img src="photos/photo1.jpg" style="width: 45px;">
					<img src="photos/photo1.jpg" style="width: 45px;">
					<img src="photos/photo1.jpg" style="width: 45px;">
				</div>
			</div>
		</div>
		<div class="container">
			<div class="left-main">Left main</div>
			<div class="right-menu">
				<div class="article">
					Left menu Left menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menuLeft menu
				</div>
			</div>
		</div>
		<div class="footer">Footer</div>
	</div>
</body>
</html>


Tags:

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

5

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