1. div 2. 邊距 3. 邊框 4. 定位 5. 浮動 1 21.1 div 部分(division) <div>元素,經常以 div 形式引用 是 XHTML 元素,用於定義 XHTML 文 件中的區域. 1.添加 div <div> <p>This is our content area. ...
1. div
2. 邊距
3. 邊框
4. 定位
5. 浮動
1 21.1 div
部分(division)---<div>元素,經常以 div 形式引用---是 XHTML 元素,用於定義 XHTML 文
件中的區域.
1.添加 div
<div>
<p>This is our content area.</p>
</div>
給 div 添加一個 id
<div id=”container”>
<p>This is our content area.</p>
</div>
#container {
Padding: 20px;
Border:1px solid #000;
Background:#ccc;
}
2.添加子 div
<div id=”container”>
<p>This is our content area.</p>
<div class=”box”>
<p>I’m in a box!</p>
</div>
<div class=”box”>
<p>I’m also in a box!</p>
</div>
</div>
.box {
margin: 10px;
padding: 20px;
border:1px solid #000;
}
3.div 和上下文選擇器
.box p {
Color: #333;
}
#container p {
Color: #333;
}
2 21.2 邊距
外邊距(margin)
外邊距聲明:
#container {
Margin:-top: 20px;
Margin-left: auto;
Margin-right: auto;
Margin-bottom; 20px;
Width: 300px;
Border: 1px solid #333;
Padding: #ccc;
}
#container {
Margin: 20px auto 1em auto; /*上,右,下 , 左*/
}
用 margin:auto 居中
Body {
Text-align: center;
}
#container {
Width: 400px;
Margin: 10px auto 10px auto;
Padding: 20px;
Background: #ccc;
Text-align: left;
}
5.內邊距(padding)
#container {
Padding-top: 20px;
Padding-left: 10%;
Padding-right: 1em;
Padding-bottom: 0;
Background: #ccc;
}
6.外邊距,內邊距和主體
Body {
Margin: 0;
Padding: 0;
}
3 21.3 邊框
Border-style (邊框樣式)
None(無邊框),dotted(點線),dashed(虛線),
Solid(實現),double(雙線),groove(凹槽),ridge(凸槽),
Inset(凹邊),outset(凸邊)
/*上 右 下 左*/
Border-style: solid dotted inset outset;
Border-width(長度)
Border-top-width
Border-right-width
Border-bottom-width
Borer-left-width
Border-color
Border
Border-top
Border-right
Border-bottom
Border-left
Border(四周)Border-top(上)…
4 21.4 定位
P,h1 和 div 等成為塊級元素.意思是這些元素顯示為一塊內容,即”塊框”.與之相
反,strong 和 span 等元素稱為行內元素,即”行內框”.更多內容 , 後章在述.
(1).相對定位
#myBox {
Position: relative;
Top: 20px;
Left: 20px;
}
(2).絕對定位
#myBox {
Position:absolute;
Top: 20px;
Left: 20px;
}
5 21.5 浮動
.news img {
Float: left;
}
.news p {
Float: right;
}
11構造模型上下文選擇器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#contion{
background: orange;
border: 1px solid black;
padding: 20px;
}
.box{
border: 1px solid black;
padding:10px;
margin:10px;
}
#contion>p{
color: red;
}
.box p{
color: blue;
}
</style>
</head>
<body>
<div id="contion">
<p>構造模型構造模型</p>
<div class="box"><p>構造模型2構造模型2</p></div>
<div class="box"><p>構造模型2構造模型2</p></div>
</div>
</body>
</html>
12構造模型邊距
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#contion{
background: orange;
border: 1px solid black;
padding: 20px;
width: 150px;
height: 150px;
padding: 10px;
margin: 10px;
}
.box{
border: 1px solid black;
padding:10px;
margin:10px;
}
#contion>p{
color: red;
}
.box p{
color: blue;
}
</style>
</head>
<body>
<div id="contion">
<p>構造模型構造模型</p>
<div class="box"><p>構造模型2構造模型2</p></div>
<div class="box"><p>構造模型2構造模型2</p></div>
</div>
</body>
</html>
13構造模型定位
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#contion{
background: orange;
height: 300px;
width: 300px;
position: relative;
margin-top: 120px;
margin-left: 120px;
}
#contion p{
position: absolute;
top: 200px;
left: 150px;
}
</style>
</head>
<body>
<div id="contion">
<p>構造模型構造模型</p>
</div>
</body>
</html>
