網頁設計好好玩(10502)

7. CSS盒子模式

內容 content
內邊距 padding
padding、padding-top、padding-right、padding-bottom、padding-left
框線 border
border-style border-width border-color
border樣式
外邊距 margin

7-1.html
「檢視/佈局/列:2」左邊->html 右邊->css
引入css檔
ctrl + / ：註解
p100
m50

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>7-1</title>
</head>
<body>
	<table border="1">
		<tr>
			<td>
				留白 padding
			</td>
		</tr>
	</table>
	
</body>
</html>

style.css

td{
	/*註解*/
	/*padding: 30px 160px;*/
/*	padding-top:10px;
	padding-right:20px;
	padding-bottom:30px;
	padding-left:40px;*/
	padding: 10px 20px 30px 40px;
	/*border:solid 10px #1a3f70;*/
	border-width:10px;
	border-color: #000;
	border-top-style: dotted;
	border-left-style: double;

}

7-2.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<title>7-2</title>
</head>
<body>
	<table>
		<tr>
			<td>
				<!-- 註解 -->
				留白 padding
			</td>
		</tr>
	</table>
	<div class="d1">
		
	</div>
	<div id="d2">
		
	</div>
	
</body>
</html>

style.css

td{
	/*註解*/
	/*padding: 30px 160px;*/
/*	padding-top:10px;
	padding-right:20px;
	padding-bottom:30px;
	padding-left:40px;*/
	padding: 10px 20px 30px 40px;
	/*border:solid 10px #1a3f70;*/
	border-width:10px;
	border-color: #000;
	border-top-style: dotted;
	border-left-style: double;

}

.d1{
	width: 100px;
	height: 100px;
	background-color: #34701a;
	margin: 20px;

}

#d2{
	width: 500px;
	height: 500px;
	background-color: #af7de0;

}

6. 綜合練習

7-1 練習

友善列印 & 下載 PDF 匯出 MarkDown 格式

Title1

Title2

Title3

7. CSS盒子模式