整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
標簽按照規定好的默認方式排序
塊級元素獨占一行 從上向下順序排列
div hr p h1-h6 ul ol form table
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
div {
color: bisque;
width: 300px;
background-color: #c5708b;
}
h2 {
color: #1677b3;
width: 300px;
background-color: #5698c3;
}
</style>
</head>
<body>
<div>我是div</div>
<h2>我是h2</h2>
</body>
</html>很多的布局效果,標準流沒有辦法完成,就需要利用到浮動完成布局.
浮動可以改變元素標簽默認的排列方式
網頁布局第一準則:
多個塊級元素縱向排列找標準流
多個塊級元素橫向排列找浮動
float 屬性用于創建浮動框
將其移動到一邊,直到左邊緣或者右邊緣及包含塊或者另一個浮動框的邊緣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
div {
color: bisque;
width: 200px;
background-color: #c5708b;
/* left 左浮動 right 右浮動 none 不浮動(默認) */
float: left;
}
h2 {
color: #1677b3;
width: 300px;
background-color: #5698c3;
}
</style>
</head>
<body>
<div>我是div</div>
<h2>我是h2</h2>
</body>
</html>1.脫離標準普通流的控制移動到指定位置 脫標
2.浮動的盒子不再保留原先的位置
3.多個盒子都設置浮動,按照屬性值一行并排頂端對齊排列(不會有縫隙,多出另起一行對齊)
4.浮動元素會具有行內塊元素特性(任何元素都可浮動)
5.浮動的盒子只會影響浮動盒子后面的標準流,不會影響前面的標準流
由于父級盒子很多情況下,不方便給高度,但是的盒子浮動又不占位置,最后父級盒子高度為0時,就會影響下面的標準流盒子.
1.父級沒有高度
2.子盒子浮動了
3.影響下面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid #000;
}
div .child {
color: bisque;
width: 200px;
background-color: #c5708b;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>清除浮動本質:
清除浮動元素脫離標準流造成的影響
清除浮動策略:
閉合浮動,只讓浮動在父盒子內影響,不影響父盒子外面的其他盒子
1. 父級添加overflow 屬性值設置hidden auto scroll
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid greenyellow;
overflow: hidden;
}
div .child {
color: bisque;
width: 200px;
background-color: #c5708b;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>弊端:無法顯示溢出的部分
父盒子 500px 子盒子 600px (子盒子的100px被隱藏)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid greenyellow;
width: 500px;
overflow: hidden;
}
div .child {
color: bisque;
width: 600px;
background-color: #c5708b;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>2.:after 偽元素法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float</title>
<style>
.father {
border: 4px solid greenyellow;
width: 500px;
}
div .child {
color: bisque;
width: 240px;
background-color: #c5708b;
float: left;
}
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE 6,7專有 解決兼容性問題 */
*zoom: 1;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">我是div01</div>
<div class="child">我是div02</div>
</div>
</body>
</html>3.雙偽元素清除浮動
)CSS 標準盒子模型(Box Model)
在網頁中所有HTML元素可以看作盒子,在CSS中,"box model"術語是用來設計和布局時使用的;CSS盒模型本質上是一個盒子,封裝周圍的HTML元素包括:外邊距(margin)邊框(border)內邊距(padding)實際內容(content)四個屬性,所以布局時每個元素所占的總寬高是這4個屬性的總和;比如寬度:總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
1.1Margin(外邊距)清除邊框外的區域,外邊距是透明的
1.2Border(邊框)圍繞在內邊距和內容外的邊框
1.3Padding(內邊距)清除內容周圍的區域,內邊距是透明的
1.4Content(內容)盒子里填充的內容比如文本,圖像等
標準盒子模型
寬度為100px的div
根據盒子模型得出該元素的總寬度為:100+(20+20)+(15+15)+(15+15)(由里至外)因此如果想在此div中放置一個寬度為100px的元素,此元素的總寬度必須小于等于100px
2)DIV+CSS布局
Div+CSS布局就是將網頁內容用<div>分割為塊,之后使用css設置每個塊的大小,位置等
DIV+CSS布局最重要的是靈活運用float(浮動)屬性,其值:1)left 2)right 3)both
clear屬性作用是清除浮動,其值為:1)left 2)right 3)both
d2向右浮動 float:right
因為div是塊級元素,如果都沒有脫離文檔流div就會按照從上到下的順序放置
d2設置為右浮動其他兩個div位置的變化:
1)d1沒有脫離文檔流會占據一行,所以d2只能浮動到d1下面的右面如上圖所示
2)d2脫離文檔流,d3自動填充到d2的位置
d1,d2全部設置為右浮動
1)當d1,d2都設置為右浮動時:因為css中d1在d2上面先設置,因此d1在右側,如果d2在d1上面先設置樣式,則d2在右側,d1在左側,自己測試不再截圖
2)當d1,d2都設置為右浮動時:d3就會跑到上圖中d2的位置
3)如果3個div都設置左或右浮動,當3個width加一起<=100%就會在第一行顯示(d1,d2,d3)
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 50%;
height: 100px;
float:right;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 50%;
height: 100px;
}
</style>d2清除左浮動,d3設置為右浮動
當d2清除了左浮動,d3設置為右浮動,就會如上圖所示;如果d2清除的是右浮動,d2就會在d1上面,d3就會定位在d1下面的右面,自己測試不再截圖
當d2清除了左浮動,如果想要d2緊挨著d1(與d1在一行上),可以通過position脫離文檔流設置其上下左右屬性使其定位在d1右側,自己測試
<!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>
<title>div+CSS布局</title>
<style type="text/css">
#d1 {
margin: 0px;
background-color: red;
padding: 0px;
width: 30%;
height: 100px;
float:left;
}
#d2 {
margin: 0px;
background-color: yellow;
padding: 0px;
width: 40%;
height: 100px;
clear: left;
}
#d3 {
margin: 0px;
background-color: green;
padding: 0px;
width: 30%;
height: 100px;
float: right;
}
</style>
</head>
<body>
<div id="d1"><span style="font-size: 50px;">d1</span></div>
<div id="d2"><span style="font-size: 50px;">d2</span></div>
<div id="d3"><span style="font-size: 50px;">d3</span></div>
</body>
</html>DIV+CSS布局綜合運用position+上下左右屬性與float屬性為網頁進行布局
注意:瀏覽器的兼容性問題,特別是使用IE內核的瀏覽器對W3C的規范不怎么遵守
CSS的介紹
CSS，Cascading Style Sheets層疊樣式表。
一個網頁由三個部分：結構、表現、行為，對應的標準是：XHTML、CSS、JavaScript。
這三個標準語言，是瀏覽器直接可以識別的，并且能直接進行解釋(翻譯)的。
CSS的格式
一個CSS樣式表(<style></style>)由多個CSS規則構成；
一個CSS規則由“選擇器”和{}構成；
選擇器就是給哪一個HTML元素定義；
CSS選擇器
第一：基本選擇器（單一）
通用選擇器(*)：將匹配所有的HTML元素；
標簽選擇器：對應所有的HTML標記，名稱與標記名稱一樣。
類選擇器：可以通過給一類HTML元素，定義同一個class屬性來增加樣式。類樣式定義以“.”開頭定義。CSS的CLASS屬性一般給層疊樣式用表。比如：
.news表示class=news的元素增加樣式
news表示class=news的<div>元素增加樣式
.news title表示class=news下的class=title的<div>元素
ID選擇器：給標記特定ID屬性的HTML元素來增加樣式。\
Id選擇器的定義，以“#”號開頭
網頁不能出現同一個ID的值，ID像身份證號，具有唯一性；
HTML元素的ID屬性，一般給JavaScript使用
第二：組合選擇器
多元素選擇器：也就是同時給多個HTML元素定義。
body,p,a,ul,li,p{margin:0px;padding:0px;}
每一個HTML元素都具有默認樣式。
后代元素選擇器：用空格來分隔各個選擇器。
.news .title p{background-color:#FF0000;}
子元素選擇器：用>號來分隔父子選擇器，不存在第三層級的問題。
第三：偽類選擇器
偽類選擇器一般是給超鏈接<a>標記來增加樣式。
超鏈接具有四個狀態：
正常狀態 a:link{ }
放上狀態 a:hover{ }
激活狀態a:active{ }
訪問過狀態 a:visited{ }
全局鏈接
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{color:#FF0000,text-decoration:underline;}
給鏈接增加類樣式 (class=“a2”)
a.a2:link,a.a2:visited{ }
a.a2:hover{ }
CSS的繼承性
CSS內部元素將繼承外部元素的樣式，多個外層元素的樣式就疊加到內層元素上。<body>元素是網頁中最大的標記，它中的樣式將被其它子元素繼承。
哪些CSS屬性能被繼承：color、font-size、font-weight、font-style、line-height、text-indent、letter-spacing、word-spacing、text-align等
引入CSS的方式
（1）內嵌式
通過<style></style>來書寫CSS代碼。
只能應用于當前網頁，不能被其它網頁共享。
注意：<style>標記可以放在網頁的任何地方，但一般放在<head>。
（2）外聯式
通過<link>標記來引入外部的CSS文件(.css)。
可以被其它網頁共享。public.css index.css news.css about.css
格式：<link href=“CSS的URL” rel=“stylesheet” type=“text/css” />
注意：<link>標記只能放在<head>中
（3）行內樣式
通過style的屬性來書寫CSS代碼。
每一個HTML元素，都有 style、class、id、name、title 屬性。
舉例：<p style=“font-size:24px;”></p>
CSS的字體/文本屬性
Font-size：文字大小
Font-weight：加粗
Font-style：斜體
Color：顏色
Line-height：行高
Text-indent：首行縮進
Text-align：水平對齊
Letter-spacing：字符間距
CSS列表
List-style-type：列表類型，取值：none、circle、 square
List-style-position：符號位置，取值：inside、outside
List-style-image：圖片路徑，舉例：list-style-image:url(images/li01.gif);
Background-color：背景顏色
Background-image：背景圖片，舉例：background-image:url(images/bg.gif);
Background-repeat：背景平鋪，取值：no-repeat(不平鋪)、repeat(平鋪)、repeat-x(x方向)、repeat-y(y方向)
Background-position：背景定位，取值：固定值或百分比
格式：background-position:水平方向 垂直方向;
用固定值定位：background-position:100px 0px; //距離左邊100px，距離上邊0px
用百分比定位：background-position:50% 50%; //水平方向居中 垂直方向居中
用單詞來定位：background-postion:left|center|right top|center|bottom; 三個值取其中一個
Background-attachment：附加信息，取值：scroll(滾動)、fixed(固定)
簡寫形式：background:url(images/bg.gif) repeat-x 100px 0px; //多個屬性值間用“空格”隔開
Float：元素浮動，取值：left或right。
Clear：清除浮動，取值：left或right或both
CSS浮動元素將向左向右浮動；
浮動可以叫“飄”起來；
浮動的元素，直到碰到父元素的邊框或前一個浮動元素的邊框為止；
浮動元素是一個塊元素框，不管它原來是什么元素(行內元素)；
浮動元素不再占用空間，脫離了普通文檔流，層級比普通元素的級別高；
清除浮動
清除浮動特性后，清除元素之后的其它元素將恢復默認排版；
清除浮動特性后，包圍元素從視覺上看起來，像包圍住了浮動元素；
Border：同時設置四個邊框的屬性
Border-left：設置左邊框的屬性
Border-right：設置右邊框的屬性
Border-top：設置頂邊框的屬性
Border-bottom：設置底邊框的屬性
格式：border-bottom：粗細 線型 線顏色;
舉例：border-bottom：2px solid #FF0000; //元素的下邊線為2px粗的實線，顏色為紅色
線型取值：none(無邊線)、solid(實線)、dashed(虛線)、dotted(點狀線)、double(雙線)
每一個HTML元素可以看成一個“盒子”。
一個“盒子”具有：寬度、邊框、內填充、外邊距
寬度(width)和高度(height)：是指內容的寬度和高度，不含邊框、外邊距、內填充。
內填充(padding)：是指內容到邊框線間的距離，含四個方向：上、右、下、左
外邊距(margin)：是指邊框線以外的距離。
計算一個“盒子”的總空度
假設：總寬度為100px，邊框為1px，內填充為10px，求內容的寬度
Width = 100px – 1px*2 -10px*2 = 78px
假設：總寬度為100px，內容的寬50px，求左右內填充分別是多少？
Padding-left = (100px – 50px )/2 = 25px
Padding-left：左邊線到內容間的距離
Padding-right：右邊線到內容間的距離
Padding-top：頂邊線到內容間的距離
Padding-bottom：底邊線到內容間的距離
Padding：同時設置四個邊的內填充距離
padding:10px; //表示：上下左右四個內填充都是10px
padding:5px 10px; //表示：上下為5px，左右為10px
padding:5px 10px 15px; //表示：上為5px，左右為10px，下為15px
padding:5px 10px 15px 20px; //表示：上右下左分別設置不同的內填充，順序不可亂
Margin-left：左邊線以外的距離
Margin-right：右邊線以外的距離
Margin-top：頂邊線以外的距離
Margin-bottom：底邊線以外的距離
Margin:10px; //表示：四個外邊距都是10px
Margin:10px 15px; //表示：上下外邊為10px，左右外邊距為15px
Margin:5px 10px 15px //表示：上外邊距為5px，左右外邊距為10px，下外邊距為15px
Margin:5px 10px 15px 20px; //分別設置四外外邊距，順序為“上右下左”
一、首先要確定的事情
主頁的寬度：973px
主頁的背景色、背景圖片
網頁的結構：網頁頭部、網頁尾部、網頁主要內容（左右兩列）
二、網頁結構圖
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
