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

[Video] Tìm hiểu thiết kế Grib trong HTML/CSS - C2108G3


#grib.html


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Grib Page</title>

	<!-- <style type="text/css">
		.row {
			width: 100%;
			display: flex;
		}

		.col-1 {
			/*width: calc(100%/12);*/
			width: 8.33%;
			background-color: grey;
		}

		.col-4 {
			width: 33.33%;
			background-color: yellow;
		}

		.col-8 {
			width: 66.67%;
			background-color: red;
		}
	</style> -->
	<style type="text/css">
		.row {
			width: 100%;
		}

		.col-1 {
			float: left;
			width: 8.33%;
			background-color: grey;
		}

		.col-4 {
			float: left;
			width: 33.33%;
			background-color: yellow;
		}

		.col-8 {
			float: left;
			width: 66.67%;
			background-color: red;
		}
	</style>
</head>
<body>
<div class="row">
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
	<div class="col-1">span 1</div>
</div>
<div class="abc">
	<div>sdfsdf</div>
	<div>sdfsdf</div>
	<div>sdfsdf</div>
	<div>sdfsdf</div>
</div>
<div class="row">
	<div class="col-4">span 4</div>
	<div class="col-4">span 4</div>
	<div class="col-4">span 4</div>
</div>
<div class="row">
	<div class="col-4">span 4</div>
	<div class="col-8">span 8</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)

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

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