<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css教學</title>
<style type="text/css">
.title{font-weight: bold;font-size:20px}
.content{/*height: 200px*/;width: 400px;padding: 10px;border:1px dashed blue;margin-top: 10px;margin-bottom: 10px}
.keyword{color: red}
.box{
position:relative;left:200px;top:0px;
width:100px;height: 100px;background-color: blue
}
</style>
<!-- CSS-class選擇器 .名稱 -->
<!-- position:absolute絕對定位，完全獨立定位，原本空間就不會存在，可以放在HTML任何版面，不會影響位置，適用於大範圍的位移 -->
<!-- position:relative相對定位，透對座標來決定標籤位置，依原始位置當基準點做位移，原本空間依然存在，適用於小範圍的位移-->
</head>
<body>
<div class="title">今天天氣不錯</div> <!-- CSS屬性:"設定值";CSS屬性:"設定值" -->
<div class="content">
我去公園散步，餵<span class="keyword">鴿子</span>。<br/>
我覺得鴿子好可愛喔。
</div>
<!-- div為區塊元素，會斷行。 span為行內元素，不影響斷行。-->
<!-- margin:外距 -->
<!-- 邊框 border:邊寬寬度 邊框樣式(solid dashed) 邊框顏色 -->
<!-- padding:內距 -->
<!-- width設定div標籤寬度 -->
<!-- height設定div標籤高度，通常不特別設定，依內容大小自行撐開 -->
<!-- width&heigh只能設定區塊元素，無法設定行內元素 -->
<!-- <br>斷行 -->
<!-- .名稱呼叫CSS樣式 -->
<div class="box"></div>
<div style="font-weight: bold;font-size:20px">公園裡有很多小朋友</div>
<div style="/*height: 200px;*/width: 400px;padding: 10px;border:1px dashed blue;margin-top: 10px;margin-bottom: 10px">
小朋友在玩溜滑梯，盪鞦韆，還有幾隻狗狗和貓貓。
</div>
<div class="content">
還有幾位老公公<span style="position: relative;top: -8px">2</span>在<span class="keyword">聊天</span>。
</div>
</body>
</html>
參考網址:https://www.youtube.com/watch?v=Jr7lwHnTK68
留言列表
Impression (1)
