網頁設計好好玩(10502)
- 內容 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; }