網頁Web-控制div

控制div

建立一段文字,給他一個div盒子,使用CSS設定 [寬度、高度、背景顏色]

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>

	.yellow{
		background-color:yellow;
		width:300px;
		height:200px;	
	}

</style>

</head>
<body>
	<div class="yellow">123</div>
	
</body>
</html>

建立第二段文字,也給它一個盒子

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>

	.yellow{
		background-color:yellow;
		width:300px;
		height:200px;
	}
	.green{
		background-color:green;
		width:300px;
		height:200px;
	}
	
</style>

</head>
<body>
	<div class="yellow">123</div>
	<div class="green">456</div>
</body>
</html>

讓綠色盒子,放到黃色盒子旁邊

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>

	.yellow{
		background-color:yellow;
		width:300px;
		height:200px;
		float:left;
	}
	.green{
		background-color:green;
		width:300px;
		height:200px;
		float:left;
	}
	
</style>

</head>
<body>
	<div class="yellow">123</div>
	<div class="green">456</div>
</body>
</html>


使綠色盒子靠右


綠色盒子置中



建立三個盒子,並排成一排

最外層再加一個div去控制全部元件

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
	.mybox{
		width:100%;
		margin:0 auto;
	}
	.yellow{
		background-color:yellow;
		width:33.3%;
		height:200px;
		float:left;
	}
	.green{
		background-color:green;
		width:33.3%;
		height:200px;
		float:left;
	}
	
	.orange{
		background-color:orange;
		width:33.4%;
		height:200px;
		float:right;
		
	}
	
</style>

</head>
<body>
<div class="mybox">
	<div class="yellow">123</div>
	<div class="green">456</div>
	<div class="orange">789</div>
</div>
</body>
</html>

調整所有元件的比例:

width:80%;  

margin:0 auto; //置中


建立兩排

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
	.mybox{
		width:80%;
		margin:0 auto;
	}
	.yellow{
		background-color:yellow;
		width:33.3%;
		height:200px;
		float:left;
	}
	.green{
		background-color:green;
		width:33.3%;
		height:200px;
		float:left;
	}
	
	.orange{
		background-color:orange;
		width:33.4%;
		height:200px;
		float:right;
		
	}
	
</style>

</head>
<body>
<div class="mybox">
	<div class="yellow">123</div>
	<div class="green">456</div>
	<div class="orange">789</div>
	<div class="yellow">123</div>
	<div class="green">456</div>
	<div class="orange">789</div>
</div>
</body>
</html>

調整文字置中

text-align:center;

line-height:150px;

<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
	.mybox{
		width:80%;
		margin:0 auto;
	}
	.yellow{
		background-color:yellow;
		width:33.3%;
		height:200px;
		float:left;
		text-align:center;
		line-height:150px;
	}
	.green{
		background-color:green;
		width:33.3%;
		height:200px;
		float:left;
	}
	
	.orange{
		background-color:orange;
		width:33.4%;
		height:200px;
		float:right;
		
	}
	
</style>

</head>
<body>
<div class="mybox">
	<div class="yellow">123</div>
	<div class="green">456</div>
	<div class="orange">789</div>
	<div class="yellow">123</div>
	<div class="green">456</div>
	<div class="orange">789</div>
</div>
</body>
</html>

YiruAtStudio - 關於我 - 意如