排版的用意：
1. 應付不同的螢幕解析度(智慧型手機除外)
2. 讓內容左右並排
------------------------HTML+CSS------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自我介紹</title>
<style type="text/css">
.head{
background-color: #003344;color: white;font-weight: bold;font-size: 30px;text-align: center;padding: 10px
}
.content{
width: 1000px;margin-left: auto;margin-right: auto;/*border: 1px solid red;height: 100px;*/
}
.box{
width: 280px;padding: 10px;margin:10px;background-color: white;display: inline-block;vertical-align: top;
text-align: center;height: 150px;line-height: 30px;
}
.title{
font-weight: bold;
}
</style>
</head>
<body style="margin: 0px; background-color: #111111">
<div class="head">我的自我介紹</div>
<div class="content">
<div class="box">
<div class="title">我的基本資料</div>
<div>我是男生</div>
<div>住在台灣</div>
<div>老大不小</div>
</div>
<div class="box">
<div class="title">我的個人興趣</div>
<div>看電影</div>
<div>聽音樂</div>
<div>喝咖啡</div>
</div>
<div class="box">
<div class="title">歡迎與我聯絡</div>
<div>FACOBOOK</div>
<div>LINE</div>
<div>EMAIL</div>
</div>
</div>
</body>
</html>
--------------------------------------------------------------
結果:
--------------------------------------------------------------
background-color:背景顏色
color:文字顏色
font-weight:文字形式(粗體B/斜體I/底線U)
font-size:文字尺寸
border:外框
margin:外距
padding:內距(border跟content之間的距離)
text-align:水平對齊
text-align:left; //向左對齊
text-align:right; //向右對齊
text-align:center; //置中
text-align:justify; //使左右對齊本文
text-align:inherit; //繼承父元素的 text-align 屬性
width:寬度
height:高度
display:inline-block (div預設為區塊元素，利用display:inline-block修改為行塊格式)
vertical-align:垂直對齊(參考)
class="box"設定選擇器box (body設定)
.box 選擇box選擇器(css-style設定)
line-height行距
留言列表
Impression (1)
