1.用css控制佈局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>用div佔塊佈局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style>
div{
width: 300px;
height:200px;
background: blue;
}
#main{
background: green;
}
#footer{
background: gray;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</body>
</html>
2.浮動佈局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
#lside{
width: 20px;
height:100px;
background: green;
float: left;
}
#rside{
width: 20px;
height: 100px;
background: red;
float: left;
}
#comn{
width: 300px;
height:300px;
background: orange;
}
</style>
</head>
<body>
<div id="lside">我是左</div>
<div id="rside">我是右</div>
<div id="comn">我是普通div</div>
</body>
</html>
3.清除浮動
加入float:both,left,right來清除浮動
4.盒模型之margin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style>
#cont{
width: 1000px;
height:600px;
background: green;
}
div{
width: 400px;
height: 200px;
background: blue;
float: left;
}
#test{
margin: 10px;
}
#test2{
background: orange;
}
#test3{
width: 1000px;
}
</style>
</head>
<body>
<div id="cont">
<div id="test"></div>
<div id="test2"></div>
<div id="test3"></div>
</div>
</body>
</html>
5.盒模型之border
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>盒模型之border設置</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
div{
width: 800px;
height: 800px;
background: blue;
/*單獨設置某個方向的邊框*/
border-top: 10px outset purple;
/*單獨設置邊框3要素之一*/
border-style: dashed;
}
</style>
</head>
<body>
<div>
盒子的border 3要素 寬,形狀,顏色
</div>
</body>
</html>
6.盒模型之padding
這個一般用來控制盒中的內部元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
div{
background: gray;
padding:10px 20px 30px;
}
</style>
</head>
<body>
<div>??????????????????????????????????????????</div>
</body>
</html>
7.內聯元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>行內元素</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
#kurong{
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
color: red;
}
</style>
</head>
<body>
<div>
離離原上草,一歲一<span id="kurong">枯榮</span>。</br>
野火燒不盡,春風吹又生。
</div>
</body>
</html>
8.內聯與塊狀的轉化
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
span{
width: 200px;
height: 200px;
background: blue;
display: block;
}
div{
width: 200px;
height:200px;
background: orange;
display: inline;
}
</style>
</head>
<body>
<div>塊狀</div>
<span>行內</span>
</body>
</html>
9.css控制段落
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
#p1{
background: gray;
text-indent: 20px;
text-align: right;
}
#p2{
background: orange;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p1">!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!</p>
<p id="p2">????????????????????</p>
</body>
</html>
10.css控制文字
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
#test1{
color:blue;
font-style: italic;
font-weight: bold;
font-size: 23px;
line-height: 46px;
font-family: "SimHei";
}
#test2{
font:italic bold 23px/46px "SimHei";
}
</style>
</head>
<body>
<div id="test1">離離原上草,一歲一枯榮。<br />
野火燒不盡,春風吹又生。</div>
<div id="test2">離離原上草,一歲一枯榮。<br />
野火燒不盡,春風吹又生。</div>
</body>
</html>
font-family: "微軟雅不黑","微軟雅黑","黑體",sans-serif;
這樣可以防止客戶機上沒有字體,是一種技巧
11.css設置背景圖片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
body{
background-image: url(1.jpg);
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
12.css選擇器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
#test1{
width: 100px;
height: 50px;
border: 1px solid blue;
}
.test2{
width: 100px;
height: 50px;
border: 1px solid red;
}
div{
width: 100px;
height: 50px;
background: orange;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="test1">test1</div>
<div class="test2">test2</div>
<div>普通div</div>
</body>
</html>
13.h標籤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
</head>
<body>
<h1>title</h1>
<h2>title</h2>
<h3>title</h3>
<h4>title</h4>
<h5>title</h5>
<h6>title</h6>
<h7>title</h7>
<div>h1-6系列,表示1-6號標題,字越來越小</div>
</body>
</html>
14.有序列表與無序列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
li{
list-style-type:square;
}
</style>
</head>
<body>
<ul>
<li>春</li>
<li>夏</li>
<li>秋</li>
<li>冬</li>
</ul>
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
<li>有序4</li>
</ol>
</body>
</html>
15.表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
table{
border-collapse: collapse;
}
td{
border:1px solid blue;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
</table>
</body>
</html>
16.超鏈接標籤
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
</head>
<body>
<a href="index.html" target="_blank">index</a>
<a href="http://www.bilibili.com" title="鼠標放上來">嗶哩嗶哩</a>
</body>
</html>
17.僞類
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建網頁</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布爾教育 http://www.itbool.com" />
<style type="text/css">
a:link{
color:gray;
}
a:visited{
color:purple;
}
a:hover{
color:orange;
}
a:active{
color:black;
}
</style>
</head>
<body>
<div>
css可以讓我們針對a標籤的4種狀態設置各自的css屬性,叫做css僞類
</div>
<div>
<a href="#">空鏈接</a>
<a href="#">空鏈接</a>
<a href="#">空鏈接</a>
<a href="#">空鏈接</a>
</div>
</body>
</html>