育將電腦工作室 - 線上書籍

網頁設計好好玩(10502)
==============

1. 內容 content
2. 內邊距 padding  
   padding、padding-top、padding-right、padding-bottom、padding-left
3. 框線 border  
   border-style border-width border-color  
   [border樣式](https://www.w3schools.com/css/css_border.asp)
4. 外邊距 margin  
   ![](https://docs.google.com/drawings/d/1rP242oSFyLYVMoeDLMzpMIbQASJii3CslG2sXDAgDXE/pub?w=534)
5. 7-1.html  
   「檢視/佈局/列:2」左邊->html 右邊->css  
   引入css檔  
   ctrl + / ：註解  
   p100   
   m50 ```
  <pre class="brush:as3;">
  
  <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
  
   ```
  <pre class="brush:as3;">
  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;
  
  }
  ```
6. 7-2.html ```
  <pre class="brush:as3;">
  
  <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
  
   ```
  <pre class="brush:as3;">
  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;
  
  }
  ```
 
</body></html>

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown