為什麼要使用這種布局?
傳統表格的布局缺陷布局固定不夠靈活。
什麼是Div?
它是一個html标簽,一個塊級元素(單獨顯示一行,即如果後面還有元素,将會在下一行顯示)。主要用途是結合CSS實作頁面的布局。
什麼是Span?
它是一個html标簽,一個内聯元素(顯示一行,即如果後面還有元素,則顯示在同一行上)。主要用途是結合CSS對括起來的内容進行樣式的修飾。
CSS的作用是什麼?
HTML構成了整個網站的骨架,CSS則是對其中的内容進行修飾和美化。
CSS的文法規範:
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
屬性名3:屬性值3;
}
注:選擇器的作用是快速查找需要設定樣式的元素
三種基本選擇器模式:
1.元素選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<style>
div{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div>
選中1
</div>
<div>
選中2
</div>
<div>
選中3
</div>
</body>
</html>
2.類選擇器(相比第一個它可以實作同類标簽的不同選擇)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>類選擇器</title>
<style>
.div2{
font-size: 30;
color: blue;
}
</style>
</head>
<body>
<div>
選中1
</div>
<div class="div2">
選中2
</div>
<div>
選中3
</div>
</body>
</html>
3.id選擇器(實作單個的選中)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id選擇器</title>
<style>
#div3{
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div>
選中1
</div>
<div class="div2">
選中2
</div>
<div id="div3">
選中3
</div>
</body>
</html>
兩種其他選擇器:
1.層級選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>層級選擇器</title>
<style>
div p{
font-size: 30px;
color: green;
}
</style>
</head>
<body>
<div>
<p>
選中1
</p>
</div>
</body>
</html>
2.屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style>
input[type="text"]{
background-color: gold;
}
</style>
</head>
<body>
使用者名:<input type="text" name="username" /><br />
密碼:<input type="password" name="password" />
</body>
</html>
三種CSS引入方式
作用:CSS樣式的代碼所寫的位置
1.内部引入
即是将<style>樣式部分寫在<head>裡,預設style中type="text/css"
2.行内引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<style type="text/css">
div{
font-size: 30px;
color: red;
}
</style>
</head>
<body>
<div style="font-size: 20px;color: blueviolet;">
這是行内引入
</div>
</body>
</html>
注:style是任何标簽都具有的屬性。且style具有就近原則,選擇最近的樣式。
3.外部引入
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素選擇器</title>
<!--當使用外部引入是,需使用link标簽,stylesheet代表層疊樣式表,href代表外部引入的路徑-->
<link rel="stylesheet" href="style.css" target="_blank" rel="external nofollow" type="text/css" />
</head>
<body>
<div>
選中1
</div>
<div>
選中2
</div>
</body>
</html>
CSS浮動
目的:将多個<div>标簽在一行顯示
規則:浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。是以一旦前面的框發生變化,後面的框可能也會發生相應的變化。考慮到浮動框不在文檔的普通流(即不浮動的框)中,是以文檔的普通流中的塊框将視浮動框為不存在。
設定:float屬性(取值可以是left,right,none)
注意:一旦最後一個浮動框在最後一個位置放不下時,就會跳到下一行;如果前面的浮動框過高,後面放不下的浮動框将會被卡在較高的浮動框處。
如果想讓前面的浮動對後面沒有影響,該怎樣設定清除浮動?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS浮動</title>
<style>
#one{
border: 1px solid red;
width:300px;
height: 150px;
float:left;
}
#two{
border: 1px solid black;
width:300px;
height: 150px;
}
#three{
border: 1px solid blue;
width:300px;
height: 150px;
}
/*清除浮動*/
#clear{
clear:both;
}
</style>
</head>
<body>
<div id="one">
</div>
<div id="clear">
</div>
<div id="two">
</div>
<div id="three">
</div>
</body>
</html>
CSS的盒子模型
注:當整個需要顯示的内容居中,可設定屬性值為auto;當内容需要居中時,可通過text-align:center進行設定;如果隻設定一個像素,表示各邊都是相同的像素;如果設定四個像素,以此表示的是上,右,下,左各邊的邊距;當然也可以通過padding-top,padding-right,padding-bottom,padding-left進行分别設定。可通過浏覽器中F12進行調試。