今天介紹css排版
float_example.html程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/float_example.css">
<title>範例</title>
<style>
</style>
</head>
<body>
<h2>Float 靠右範例</h2>
<p><img src="../photo/Google_Chrome_icon.png" alt="Pineapple" style="width:170px;height:170px;margin-left:15px;">
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
</p>
</body>
</html>
float_example.css程式碼
img {
float: right;
}
text-align: center;讓字體置中，text-align還能讓字體置左or右。
location_example.html程式碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/location_example.css">
<title>範例</title>
</head>
<body>
<p>範例如下</p>
<h1>中間</h1>
<h2>靠左</h2>
<h3>靠右</h3>
</body>
</html>
location_example.css程式碼
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
float 這裡是用於讓圖片置右，或者說漂浮到右，
注意!當你css同時設定絕對定位和float，float會沒有效果，只有絕對定位的效果。
本篇語法影響的位置呈現，這牽涉到父元素(parents)子元素(child)，簡單說這些影響都是相對位置。
看影片追技術