<!DOCTYPE html>
<html>
<head>
<style>
.test1 {
position:relative;
font-size:19px;
border:1px solid;
width:85%;
margin-left:auto;
margin-right:auto;
}
.test1 h1 {
font-size:0.85em;
color:green;
}
.test1 h1 span {
color:black;
font-size:0.616em;
}
.test2 {
position:relative;
border:1px solid;
margin:0.4em;
padding:0.5em;
}
</style>
</head>
<body>
<!-- 由於 div class="test1" 是最外層包覆排版主體的 div，方便放置在任何位置。比如：要將排版主體下移 200px，可以在 CSS 的 .test1 {} 內加上 top : 200px，如下：
.test1 {
position:relative;
top:200px;
}
-->
<div class="test1">
<!-- 設定標題 h1 如下：-->
<h1> HTML div 排版範例<span> 2018 年 11 月 21 日</span></h1>
<!-- 以下為 div 排版主體，分為 3 段。每一段由兩個 div 組成 ( 外部 div class="test2" 控制整體結構；內部 div 控制背景顏色及內容分布 )，中間段落內部包含兩個 div。 -->
<div class="test2">
<div style="background:lightgray; ">START A BC DEF GHIJ KLMNO PQRSTU V WX YZ1 23a45b c678d90 1e23 abcdefgf mjuytgf 4j5 END</div>
</div>
<div class="test2" >
<div style="background:#EAFAF1; ">START A BC DEF GHIJ KLMNO PQRSTU V WX YZ1 23a45b c678d90 1e23 abcdefgf mjuytgf 4j5 END</div>
<div style="background:#EAFAF1; "><br><br><br></div>
</div>
<div class="test2">
<div style="background:lightyellow; ">START A BC DEF GHIJ KLMNO PQRSTU V WX YZ1 23a45b c678d90 1e23 abcdefgf mjuytgf 4j5 END</div>
</div>
</div>
</body>
</html>
沒有留言:
張貼留言
請注意 : 您的留言發佈成功 , 需經審核後 , 才能決定是否回覆 . 謝謝 !!