版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)
文檔簡介
第一章css的介紹
?CSS："層疊樣式表"，它是cascadingstylesheets的縮寫，作用就是給HTML標(biāo)簽加表現(xiàn)形式（樣式-顯示）,
如：字體，圖片，列表，位置等。
n
<styletype="text/css>W-@_filey//D:/itbull/lC|?三
7日p,div,hl,span{回最常訪問火孤官方站點links>
colorred;
font-size:20px;PHP07期
10border:lpxsolidgreen;HTML
11background:yellow;
less
12}
13</style>而
14</head>
15B<body>
<p>PHP07期</p>
<div>HTML</div>
18<hl>CSS</hl>
<span>PHP</span>
rc_/1___1___
■在瀏覽器中可以看到部分：
HTML：“超文本標(biāo)記語言”，主要作用把內(nèi)容（文字、圖片、視頻等）放入網(wǎng)頁中-結(jié)構(gòu)
CSS：“層疊樣式表”，主要作用給HTML進(jìn)行樣式的顯示，如何的布局-樣式
Javascript："瀏覽器的腳本語言”，主要作用給HTML加動態(tài)效果（特效）-行為
?CSS特點：
可以非常精準(zhǔn)的定位，定位某個或某些標(biāo)記，給這些標(biāo)記加樣式
HTML和CSS代碼分離，減少后期工作量
第二章CSS基礎(chǔ)
2.1CSS的基本語法
屬性值麋性值
hl{color:red;font-size:14px;}
、千人『TTL一1一.
選擇需走明聲明
CSS樣式表由語法規(guī)則組成，由多個語法規(guī)則組成樣式表
一個CSS語法規(guī)則由“選擇器”和“聲明語句”組成
選擇器：如何的精準(zhǔn)的定位到某個或某些HTML標(biāo)記的方法，選擇器有很多方式
聲明語句：就是如何去給HTML標(biāo)記加樣式的屬性和值，每個聲明語句用分號（;）結(jié)束，多個聲明語句
用花號擴(kuò)起來，這個時候就是給某個或某些標(biāo)記加這個里面的所有寫的樣式（屬性和值）
語法規(guī)則
2.2CSS的引入方式
1.內(nèi)嵌方式：把CSS樣式表通過一對標(biāo)簽寫在HTML文件的head標(biāo)簽中，當(dāng)成HTML的標(biāo)記來使用，一般情
況都是寫到head中，不推薦寫的別的地方。
語法：
<styletype=,,text/cssn>
語法規(guī)則
</style>
案例:
3<head>
4<metacharset="UTF-8"/>
5<title>網(wǎng)頁標(biāo)題</title>
6日etype="text/css">
div{
8width:200px;
9height:200px;
10bordenlpxsolidred;
margin:100pxauto;
12
13</style>^
14</head>
2.行內(nèi)方式：把CSS樣式當(dāng)成HTML的一個屬性來寫，如：<divstyle="值"></div>
語法：
<hlstyle=,,color:red;font-size:50px;,,>PHP07</hl>
案例:
17<pstyle="color:red;font-size:50px;">PHP07</p>
3.外鏈方式：把CSS樣式表寫到一個以.css為結(jié)尾的文件中(index.css),把這個文件引入到某個HTML文件中,
當(dāng)前HTML文件就會有CSS的效果實現(xiàn)，好處：一個css文件可以給多個HTML文件使用。
里法：
<linkrel=''stylesheet“type="text/css”href="具體的css文件路徑”/>
案例：
6<!--可以引入多個css文件，幾個頁面一樣引入一個-->
<linkrel="stylesheet"type="text/css"href="./index.css"/>
4.@import：可以在一個css文件中再次引入一個css文件
語法：
@importurl("要引入的CSS文件路徑”)
案例：
2.3CSS選擇器
標(biāo)準(zhǔn)選擇器：通配符選擇器、標(biāo)記選擇器、類選擇器、id選擇器
1.通配符選擇器
語法：*{coloured;}
注意：通配符是選擇上所有的標(biāo)記，但是少用，ie6不支持
案例：
7
8B*(
9background:green;
10font-size:30px;
11colorred;
12)
13</style>
14</head>
15<body>
16<p>HTML</p>
17<hl>CSS</hl>
18P<ul>
<li>PHP</li>
20<li>MYSQL</li>
21<li>thinkPHP</li>
22<li>Yii</li>
23</ul>
2.標(biāo)記選擇器；
說明：直接寫標(biāo)記名當(dāng)成選擇器來使用，選擇器那個標(biāo)記當(dāng)前這個頁面中所有標(biāo)記都會發(fā)生改變'
語法：標(biāo)記名{color:red;}
案例：
133hl{
14font-size:100px;
15color:yellow;
16backgroundipink;
17)
3?類選擇器：又稱“class選擇器”
說明：每個HTML標(biāo)記都有一個公共屬性，class屬性配合CSS使用的，這個class屬性就是給某些或
某個標(biāo)記加一類樣式
語法：.class屬性的值{coloured;}
注意：類名可以給不同的標(biāo)記加上，這個時候這些標(biāo)記統(tǒng)稱一類
在寫CSS選擇器時必須加點（.）
建議不管是某個或某些標(biāo)記都使用類的方式
案例：
18B.my{
19colonyellow;
20)
21</style>
22</head>
23日<body>
24<pclass="my">HTML</p>
25<hl>CSS</hl>
26a<ul>
27<li>PHP</li>
28<li>MYSQL</li>
29<li>thinkPHP</li>
30<li>Yii</li>
31</ul>
32<hl>JAVASCRIPT</hl>
33<divclass="my">HTML5</div>
4.id選擇器
說明：每個HTML標(biāo)記都有一個公共的屬性id,每個id必須是唯一的
語法:#id的值{coloured;}
注意：id選擇器只是給一個標(biāo)記加樣式，一般用js的動態(tài)效果使用。
Id和class是分開使用的，id給js使用，class給css使用
案例:
21E#sql{
22colonblue;
23)
24</style>
25</head>
26日<body>
<pclass="my">HTML</p>
28<hl>CSS</hl>
29日<ul>
30<li>PHP</li>
31|<liid="sql">MYSQL</li>
32<li>thinkPHP</li>
33<li>Yii</li>
復(fù)雜選擇器：多元素選擇器、后代選擇器、子類選擇器、偽類選擇器
1.多元素選擇器：
說明：把CSS的基本選擇器進(jìn)行組合，組合成多種選擇器方式
語法：div,p,ul,li,.class,.my,#id{coloured;}
注意：大型的網(wǎng)站一般都是用多元素來替代通配符
每個選擇器用逗號(,)隔開
案例：
0I
24/*所有的標(biāo)記在瀏覽器中的默認(rèn)效果不一樣，所以必須對網(wǎng)站進(jìn)行CSS初始化(去掉所有默認(rèn)效果)*/
25/*谷歌公司工程師推薦的CSS初始化樣式和表*/
26Bp,div,hl,h2,h3,h4,h5,h6,ul,li,ol,dl,dd,dt,img,.my,#sql{
padding:0px;
28margin:0px;
29bordenOpx;
30}
2.后代選擇器
說明：在制作網(wǎng)站時會出現(xiàn)“嵌套”的形式，有可能是多級，而且沒個多級里面的標(biāo)記還相同，這個
時候就可以選擇某個標(biāo)記中的某個內(nèi)容
語法：第一代第二代第三代....(colonred;}
注意：
如果某一代有相同的標(biāo)記都會選擇，需要每代都寫清楚
P標(biāo)記中不能嵌套一些塊元素
案例：
n
6日<styletype=text/css">
7s.divlpspan{
8color:red;
9}
10</style>
11</head>
12s<body>
13B<divclass="divl">
14B<P>
15B<div>
16s<P>
17<span>PHP</span>
18</p>
19</div>
20<span>HTMLl</span>
3.子類選擇器
說明：就是選擇一代（子孫）
語法：父類（選擇器）>子類（選擇器）{colored;}
案例：
10日.divl>span{
11color:green;
丫L一
4.偽類選擇器：
說明：給超鏈接加樣式的方法<ahref=',#,,x/a>
L1ink：默認(rèn)狀態(tài)
Hover：放上狀態(tài)
Active：當(dāng)點擊時的狀態(tài)（不放手）
Visited：訪問過的狀態(tài)
語法：選擇器:狀態(tài){coloured;}
注意：一般是默認(rèn)狀態(tài)和訪問過狀態(tài)設(shè)置成一樣的效果
所有的標(biāo)記都可以加偽類選擇器
案例:
6日<styletype="text/css">
7a:link{color:#333;}
8a:hover{colonred;}
9a:active{colongreen;}
10a:visited{color:#333;}
11.al:link{font-size:100px;}
12.al:hover{color:red;font-size:20px;}
13</style>
14</head>
15B<body>
16<ahref="#">首頁</a>
17<ahref="#">企業(yè)簡介</a>
18<ahref="#">行業(yè)新聞</a>
19<aclass="al"href="#"〉聯(lián)系我們</a>
20</body>
第三章CSS常用的屬性
一、文字屬性
屬性名描述屬性值
Font-size文字大小像素(px)、em(倍數(shù))、百分比(％)
Font-family字體類型宋體、微軟雅黑、黑體等
值可以是一個也可以是多個，用逗號隔開，目的就檢索你的
電腦的字體，有那個用那個
Font-style斜體Italic（斜體）
Font-weight加粗Bold（加粗）、100-900
案例：
6㈢<styletype="text/css">
7口p{
8/*font-size:30px;*/
font?size:2em;/*字體的大小*/
font-family:"楷體沫體"；/*字體的類型*/
font-style:italic;/*斜體*/
12font-weight:bold;/*加粗*/＜火孤主員X網(wǎng)頁標(biāo)舞x+
13）file:///D:/itbull/lCj?E
14</style>多最常訪問火狐官方站點.Links
15</head>
16H<body>
<p>PHP07學(xué)的是CSS</p>
18</body>PHP07學(xué)的
19</html>
20是CSS
二、文本屬性
屬性名描述屬性值
Color文本顏色3種：rgb(0-255,0-255,0-255)、十六進(jìn)制(#OOOOOOffffff)。
單詞(red、blue>greenpink^yellow>black)
Text-align文本水平對齊方式Left|center|right
必須在塊元素中
Text-decoration文本修飾線underline（下劃線）、overline（上劃線）、line?through（刪除線）、
none（無--在超鏈接默認(rèn)有下劃線）
Line-height行高設(shè)置當(dāng)前行的高度，目的就是讓文本上下居中，高度和行高一致
Text-indent首行縮進(jìn)數(shù)值（px）,基本是翻倍
Letter-spacing字符間距數(shù)值（px）
Word-spacing單詞間距數(shù)值（px）
案例：
6日<styletype="text/css">
7日p{
bordenlpxsolidred;
9text-indent:28px;/*首行縮進(jìn)*/
10line-height:50px;/*行高*/
11colongreen;/*顏色*/
12text-aligrdeft;/*文本水平對齊方式*/
13text-decoration:line-through;/*修飾線*/
14/*letter-spacing:20px;*//*字符間距*/
15word-spacing:30px;/*單詞間距*/
16}
17</style>
18</head>
19B<body>
<p>sfefhlfeljfkiefihsfkhsfiesfhsifhi作為程序員，英語閱讀能力是最基本的要求,相對口語
.?*I—.,t———、I<■/?■■一?一■■■a、*——-.a■.、?/■■?、，■■'■、(■■-??，，、—I———Ia**——?—■■■—■■■■、a■■一、?、——
三、尺寸屬性
說明：其實就是元素的寬和高，任何的標(biāo)記元素都有寬和高
屬性名描述屬性值
Width寬像素（px）、百分比（％）
Height高像素（px）、百分比（％）
Px像素瀏覽器都是由像素點（顯像針）
注意：塊元素都可以設(shè)置寬和高，行內(nèi)元素設(shè)置寬和高不起作用，一般不設(shè)置高度，讓內(nèi)容自動撐出來
<styletype="text/css">
7日p(
8width:300px;
height:100px;
四'列表屬性
說明：對uLohli,dl,dt,dd進(jìn)行樣式的修改
屬性名描述屬性值
List-style-type列表的符號樣式類型None(無)
值3
none無標(biāo)記.
disc默認(rèn).'fed己是實心園.
circle標(biāo)記是空心園e
square標(biāo)記是實心方塊.
decimal
decimal-leading-zero冊頭的數(shù)字標(biāo)記.（01,02,03,等。）
lower-roman小號羅馬數(shù)字(i,ii,iii,iv,v,等.)
upper-roman大寫羅馬數(shù)字（Ui,m,iv,v,等.）
lower-alpha英文字母Themarkerislower-alpha(a.b,c,d,e,等0)
upper-alpha大寫英文字母Themarkerisupper-alpha(A,B,C,D,E,等0)
lower-greek〃年茬It字號(alpha,beta,gamma,等°)
lower-latin拉丁字母(a,b,c,d,e,等°)
upper-latin大寫拉丁字母（AB,C,D,E,等。）
hebrew傳統(tǒng)的箝伯采編號方式
armenian傳統(tǒng)的亞美尼亞編號方式
georgian傳婉的喬治亞編號方式（an,ban,gan,等.）
gk-ideographic管單的表意數(shù)字
hiragana標(biāo)記是：a,i,u,e,o,ka,ki,等.（日文片假名）
katakana話記是:A,I,U,E,0,KA,KI,等，（日文片假名）
List-style-image列表圖片Uri地址如：list-style-image:url(./liOl.jpg)
List-style-position列表符號的位置，只對li用Inside(內(nèi))、outside(外)
List-style把三個屬性的值都寫到一個屬Noneurlinside
性中如果三個屬性都有那就按照上面的順序，如果那
個沒有可以不寫,如:noneurl
案例:
ul{margin:100pxauto;width:600px;}
9日li{
10/*list-style-type:none;/*CSS初一項
11list-style-image:url(./images/li01jpg);
12list-style-position:inside;*/
13list-style:noneurl(./images/li01.jpg);
14border:lpxsolidred;
15height:50px;
line-height:50px;/*行高需要文本上下對齊，必須是一行*/
17)
18</stylo
19</head>
204<body>
21B<ul>
22<li>每天堅持一小時，這本書讀完，你就會發(fā)現(xiàn)自己的閱讀能力提高了一大截。</\\>
23<li>每天堅持一小時，這本書讀完，你就會發(fā)現(xiàn)自己的閱讀能力提高了一大截。</li>
Tip：邊框
Border:粗細(xì)樣式顏色；如：border:1pxdashedred;
Border-bottom：下邊框
五、背景屬性
屬性名描述屬性值
Background-color背景顏色3種值，常用16進(jìn)制
Background-image背景圖片Uri地址，如：url(./xxxjpg)
Background-repeat背景平鋪方式No-repeat（不平鋪）、repeat-x（x軸平鋪）、repeat-y（y軸平鋪）
Background-position背景定位X軸定位和y軸定位如：position:lefttop;--設(shè)置左右和上下
定位方式：
1.單詞定位方式：left|center|righttop|center|bottom,單詞定位可以理解一個九宮格
LefttopCentertopRighttop
leftcenterCentercenterRightcenter
LeftbottomCenterbottomRightbottom
2.像素定位方式：background-position:50pxlOOpx;離左邊50像素，離.匕面100像素,像素只有離左和離上
3.百分比方式：background-position:10%20%;離左邊百分之10,離上口萬百分之20
4.混合方式：background-position:left100px;
Background-attachment背景固定Scroll（滾動--默認(rèn)）、fixed（固定）
Background簡寫形式顏色圖片平鋪方式定位固定，其中的選項可以沒有
普通案例:
6日<styletype="text/css">
7Bdiv{
8height:800px;
9background-color:#ccc;
10background-image:url(./images/ball.gif);
11background-repeat:no-repeat;
12/*background-repeat:repeat-x;/*導(dǎo)航背景*/
13/*background-position:rightbottom;*/
14"background-position:20Px60px;*/
15background-position:centerlOOpx;
16)
17</style>
18</head>
19B<body>
固定案例：
6日<styletype="text/css">
body{background-color:#ccc;}
8日div(
width:700px;
10background-color:#fff;
11margin:0pxauto;
12padding:20px;
13background-image:url(./images/4-13.jpg);
14Ibackground-attachment:fixed：I
15/*background-repeat:no-repeat;
16/*700-135
17background-position:565pxbottom;*/
18)
精靈圖：
說明：就是把很多的小圖片放入一個大的背景圖中，這個圖就稱為“精靈圖”。
在制作網(wǎng)站時只要精靈圖必須是背景才能設(shè)置。
中文郵箱第一品牌
@163.com
JBB□
7日div{
8width:100px;
9height:50px;
10bordenlpxsolidred;
11margin:100pxauto;
12background-image:url(./images/bg_v3.png);
13background-repeat:no-repeat;
14backgrgund-position:-120Px-208px;
文件⑹編輯㈤查看Q）歷史回音］齒喑
15)
16</style><|Rgfig同里后塞>+-
17</head>file:///D:/itbull/l?
18曰<body>2最常訪問火狐官方站點Links
19<div></div:
20</body>
21</html>
22
一個任務(wù)：去163郵箱把郵箱首頁扒下載。
第四章DIV+CSS標(biāo)準(zhǔn)化布局
4.1.DIV+CSS布局
說明：在網(wǎng)頁開發(fā)制作中，需要對頁面內(nèi)容進(jìn)行“模塊化標(biāo)準(zhǔn)布局”，把內(nèi)容放入到某個位置，讓頁面形成固
定規(guī)律展示出來
模塊化：在網(wǎng)頁中所有的內(nèi)容都是以塊來展示的
標(biāo)準(zhǔn)化：在開發(fā)網(wǎng)站時是有一定的標(biāo)準(zhǔn)的，W3c給的。
好處：為了把HTML頁面和CSS代碼進(jìn)行分離，在以后的維護(hù)時和合作開發(fā)、有利于搜索引用的抓取。
4.2.無意義"div"和"span"
說明：在HTML標(biāo)記中一般都是有自帶“名稱”，如：hl是加標(biāo)題的，a加超鏈接的。
只有div和span是沒有意義的，所以布局就使用div和span,div—■般給大塊的內(nèi)容布局，span是給行內(nèi)的內(nèi)
容布局。
塊元素：不管內(nèi)容多少，都會占一行，可以改變大小當(dāng)時還是獨占一行。
行內(nèi)元素：內(nèi)容多少占多少
42塊元素和行內(nèi)元素的轉(zhuǎn)換
屬性名描述屬性值
display塊元素和行內(nèi)元素的轉(zhuǎn)換Block（塊）、inline（行內(nèi)）、inline-block（行內(nèi)塊）
顯示和隱藏None（隱藏）、block（顯示）
案例：
7日a{
bordenlpxsolidred;
width:100px;
10/*display:block;/*轉(zhuǎn)換極元素*/
11display:inline-block;/*轉(zhuǎn)^^亍內(nèi)塊*/
12text-align:center;
13}
14日a.a4{
15displaymone;/*隱藏和顯示*/
16display:block;
17）
18</style>
19</head>
20日<body>
21<!一元素之間的轉(zhuǎn)換一〉
22<ahref="#”>首頁</a>
23<ahref="#”>企業(yè)簡介</a>
4.4.盒子模型
說明：在HTML中的每個元素可以是一個以盒子的形狀來存在的，盒子模型。
盒子特點：由“內(nèi)容-元素”+“內(nèi)填充”+“邊框”+“外邊距”；
在計算盒子大?。?00*100+10+1+10
寬：100+20+2+20
Border屬性
屬性名描述屬性值
Border-top上邊框Border“op:粗細(xì)樣式顏色
Border-top:Ipxdashedred;
Border-right右邊框Border-right:粗細(xì)樣式顏色
Border-bottom下邊框Border-bollom:粗細(xì)樣式顏色
Border-left左邊框Border-left:粗細(xì)樣式顏色
Border四邊Border:粗細(xì)樣式顏色
案例:
none:默認(rèn)無邊框
dotted:dotted^^—4^點
?dashed:定義f去設(shè)框
solid:定義賣送邊界
double:定義兩個邊界.兩個邊界的寬度卻border-width的值相同
|groove:定義3D溝蓿邊界.效果取關(guān)于邊界的藪色值
卜idge:定義3D普邊界.效果取決亍邊界的斐色值
inset:定義一個3D的或25框.效果取決于邊界的或色值
outset:定義一介3D突出邊框°效果取?關(guān)于邊界的度色值
重試一下:設(shè)置邊悟枉式
6日<styletype="text/css">
7日div(
8width:100px;
9height:200px;
10/*border:lpxsolidred;*/
11border-top:20pxsolidgreen;
12border-right:5pxdashedred;
13border-bottom:5pxdottedyellow;
14border-left:5pxgroovepink;
15)
16</stylo
習(xí)近平：讓互聯(lián)網(wǎng)更好造福國家和人民
發(fā)焉時間:來源：勤華網(wǎng)
Padding屬性
屬性名描述屬性值
Padding-top上內(nèi)填充數(shù)值如：padding-top:1Opx;
Padding-right右內(nèi)填充數(shù)值如：padding-right:20px;
Padding-bottom下內(nèi)填充數(shù)值如：padding-bottom:30px;
Padding-left左內(nèi)填充數(shù)值如：padding-left:40px;
Padding簡寫形式Padding:10px;//4邊都是10
Padding:10px20px;//上下各10.左右各20
Padding:10px20px30px;±10,左右各20,下30
Padding:10px20px30px40px;按上右下左的順序
案例：注意padding是占背景的
______?__________________________________________________
7日div(
width:300px;
height:300px;
10bordenlpxsolidred;
11/*padding-top:10px;
12padding-right:20px;
13padding-bottom:30px;
14padding-left:40px;*/
15padding:10px20px30px;
background:url(./images/ball.gif);
17)
18</style>
Margin屬性
屬性名描述屬性值
Margin-top上外邊距數(shù)值如：margin-top:1Opx;
Margin-right右外邊距數(shù)值
Margin-bottom下外邊距數(shù)值
Margin-left左外邊距數(shù)值
Margin簡寫形式Margin:10px;〃4邊各10
Margin:10px20px;〃上下各10,左右各20
Margin:10px20px30px;〃上10,左右各20,下30
Margin:10px20px30px40px;〃按上右下左的順序
案例:
<styletype="text/css">
7sdiv{
width:300px;
height:300px;
10bordenlpxsolidred;
11s/*margin-top:50px;*/
12margin:10px20px30px40px;
13)
14</style>
4.5.浮動布局
說明：元素在網(wǎng)頁中進(jìn)行左或右的“漂浮”，脫離原來的文檔流
屬性名描述屬性值
float浮動Left|right
浮動的普通情況，脫離原來的文檔流，其他沒有浮動的元素會鉆入到浮動元素的下面
需要所有的元素都顯示，都加浮動
如果某個元素的寬度加上其他元素后比最大的包裹元素，最后的一個會被擠下去
如果前面的元素比其他高，會卡住其他元素
案例:
冒頁笑話大全搞笑圖片爆蝌文哈哈曲事緣含趣味智郵錠名人名言哈哈舸段子漫畫
<!DOCTYPEhtml>
<html>
<head>
<metacharset=uUTF-8"/>
<title>網(wǎng)頁標(biāo)題〈/title〉
<styletype=*'text/css',>
/?CSS初始化*/
*{padding:Opx;margin:Opx;}
ulji{list-style:none;}
body{font-size:14px;background:#ccc;}
/*導(dǎo)航*/
.nav{
width:100%;
height:48px;
background:url(./images/index_x.jpg)repeat-xleft-lOOpx;
)
ul{
width:960px;
margin:0pxauto;
)
ulli{
float:left;
width:87px;
height:48px;
text-align:center;
line-height:48px;
background:url(./images/index_x.jpg)no-repeatlefttop;
ul.lilO{
width:2px;
)
ullia{
color:#fff;
font-size:16px;
text-decoration:none;
display:block;
)
ullia:hover{
background:url(./images/menu_hover.jpg)no-repeat;
}
</style>
</head>
<body>
<divclass=nnavH>
<ul>
<lixahref="#”>首頁</a>v/li>
<lixahref="#”>笑話大全</a></li>
<lixahre—搞笑圖片v/a>v/li>
<lixahref="#”>爆笑網(wǎng)文</a>v/li>
<lixahref="#”>哈哈故事</a></1i>
<lixahref二"#">綜合趣味</a>v/li>
<lixahref="#”>智慧快餐</a></li>
<lixahref='鏟〉名人名言
<lixahref="#”>哈哈趣聞</a></li>
<lixahref="#”>段子v/a></li>
<li><ahref="#">漫畫</a>v/li>
<liclass=nlilOMx/U>
</ul>
</div>
</body>
</html>
浮動元素和文本的關(guān)系
說明：文本是不會鉆入到浮動元素下面的。
7日.divl{文件(D卷第(￡)SS(Y)歷史⑤書答?IB??Sj(H)
8width:300px;火鞋頁x網(wǎng)頁忘塞晨\+
9height:500px;￡le:〃/D:/itbull/1esson/PHP07/day05/8C11Q百度☆盒?倍?
10bordenlpxsolidred;a最常訪問火狐官方站點Links?新手上星Microsoft網(wǎng)站MSN網(wǎng)站W(wǎng)indowsLive
11floatleft;經(jīng)過其中一家。1933年秋，一輛神秘鬼車緩緩駛?cè)腴L沙
12)首"張大佛爺"張啟山身為布防官，奉命調(diào)查始末。張/
嘴一路探訪，發(fā)現(xiàn)長沙城勺陌一座疑點重重的礦山，一1
13日.div2{伺。為破解礦山之謎，張啟山求助同為九門上三門的戲E
14width:500px;無奈二月紅雖出身考古世家，卻心系重病的妻子丫頭，i
張啟山為了國家大義和手足之情，北上去往新月坂店為二
15height:300px;藥。在北平，張啟山邂逅了新月飯店的大小姐尹新月，5
16borderlpxsolidgreen;三盞天燈，散盡家財。尹新月幫助張啟山等人順利返回I
情愫。二月紅爰妻病入膏肓，服藥后不見好轉(zhuǎn)，最終故=
17floatleft;之余卻意外發(fā)現(xiàn)家族祖輩與礦山亦有重大關(guān)聯(lián)，于是振彳
張啟山聯(lián)手，解開礦山之謎。
18)
19B.div3{
20width:100px;
21height:100px;
22background:ye11ow;
23)
清除浮動:
屬性名描述屬性值
clear清除浮動Left|right|both（清除左右浮動）
清除浮動的目的：當(dāng)浮動完成（布局完成），再回來，再落回普通文檔流上。
寫法：在浮動元素的下面（緊挨著）添加一個空的div,這個div就用來清除上面元素浮動的，直接給div加清除浮
動的屬性。
,2最第訪問火SB百方站點links?新手上路Micr
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 二零二五年度可再生能源發(fā)電項目施工合同范本（完整版）3篇
- 2025年度文化信用擔(dān)保藝術(shù)品交易協(xié)議3篇
- 2024年紙板產(chǎn)品綠色包裝研發(fā)與應(yīng)用合同3篇
- 2024月餅禮盒設(shè)計及采購一體化合同范本3篇
- 2024某城市基礎(chǔ)設(shè)施建設(shè)項目外包合同
- 2025年度校車駕駛員聘用合同（含駕駛員健康管理與保障措施）3篇
- 二零二五年度供水、供電設(shè)施智能化改造合同范本3篇
- 二零二五年度體育賽事贊助合作意向協(xié)議書范本3篇
- 2024版體育隊伍贊助協(xié)議條款與格式一
- 2025年度消防裝備租賃與維修服務(wù)合同2篇
- ASTM-A269-A269M無縫和焊接奧氏體不銹鋼管
- 中、高級鉗工訓(xùn)練圖紙
- 2024-2030年中國車載動態(tài)稱重行業(yè)投融資規(guī)模與發(fā)展態(tài)勢展望研究報告
- 乒乓球教案完整版本
- 2024年重慶公交車從業(yè)資格證考試題庫
- 銀行解押合同范本
- 2024-2030年中國紋身針行業(yè)市場發(fā)展趨勢與前景展望戰(zhàn)略分析報告
- 部編版道德與法治九年級上冊每課教學(xué)反思
- 2024云南保山電力股份限公司招聘（100人）（高頻重點提升專題訓(xùn)練）共500題附帶答案詳解
- 人教版（2024）七年級上冊英語 Unit 1 You and Me 語法知識點復(fù)習(xí)提綱與學(xué)情評估測試卷匯編（含答案）
- 六年級期末家長會課件下載
評論
0/150
提交評論