Day14 HTML補充
1、認識前端javascript
前端開發的核心語言：css
- html - 超文本標記語言 結構
- css - 層疊樣式表 樣式
- javascript - 腳本語言 行爲
<html></html> 雙標記 雙標籤 <meta/> 標記 單標籤
css的語法就是html
屬性名:屬性值;前端
第一個HTML文件java
<html> <head> <meta charset="utf-8"> <title>我是頭</title> </head> <body> <div style="width:100px; height:100px; background:red; border:10px solid yellow; text-align:center; line-height:100px; transition:1s;" onclick="this.style.width='400px'">我是身體</div> </body> </html>
a標籤css3
<html> <a>git</a> </html>
2、HTML模板git
第一個網頁程序員
<!DOCTYPE html> <!-- 文檔頭聲明 --> <html> <head> <meta charset="utf-8"> <title>我是擡頭</title> </head> <body> 我是內容 </body> </html>
HTML5以前的文檔頭聲明瀏覽器
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> </head> <body> </body> </html>
HTML模板服務器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
HTML回顧
<!DOCTYPE html> <!-- 文檔頭聲明 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div style="width:100px; height:100px; background:red;">隨便</div> <!-- 你看不見我，只有程序員能看到我 註釋的快捷鍵 ctrl + / div 雙標籤 語義：無心義 CSS的語法 屬性名:屬性值; --> </body> </html>
CSS引入方式
<!DOCTYPE html> <!-- 文檔頭聲明 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/1.css"> <style> </style> </head> <body> <!-- <div style="width:200px;height:200px;background:green;"></div> --> <div id="box1" class="cla1" style="width:500px; background:pink;"></div> <div></div> <div class="cla1"></div> <div></div> <p class="cla1">我是p1</p> <p>我是p2</p> <h2 class="cla1">我是H1</h2> <h2>我是H2</h2> <!-- 1.行間樣式的引入 寫法：在標籤中，寫一個style的屬性 好比：style="....." 在引號當中，寫相應的css樣式 缺點：不利於維護，不利於代碼重用 優勢：優先級最高 2.內部樣式表的引入 寫法：在head標籤裏，寫一個style的標籤，在標籤中，經過選擇器來控制樣式 選擇器？ 標籤名選擇器 寫法 ： div { ... css的樣式 } ID選擇器 寫法： 首先在相應標籤中設置一個ID的屬性 如： id="id名" 在樣式表中，經過 # + id名 { ... css的樣式 } 舒適小提示： id名要以英文字母開頭 id名不能重複，是惟一的 class選擇器 寫法： 首先在相應標籤中設置一個class的屬性 如：class="class名" 在樣式表中，經過 . + class名 { ... css的樣式 } 舒適小提示 class名以英文字母開頭 優先級 標籤名選擇器 < class選擇器 < id選擇器 < 行間樣式 優勢：加載速度快，不須要去請求服務器 缺點：不利於代碼重用 3.外部樣式表的引入 寫法：在head標籤裏，寫一個link標籤，用來關聯一個css的文件，在css文件中，經過選擇器來控制樣式 舒適提示. <link rel="stylesheet" href="css文件的路徑"> 優勢：利於代碼重用 缺點：須要加載服務器 --> </body> </html>
1.css
div { width:100px;height:100px;background:green; } #box1 { width:300px; height:350px; background: blue; } .cla1 { width:200px; height:200px; background: yellow; }
前端項目目錄結構
project_name
|------img
|------css
|------js
*.html
CSS基礎樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:700px; height: 500px; /*background-color: #db7791;*/ /*background-color: rgb(219,119,145);*/ /*background-color: blue; background-image: url("img/1.jpg"); background-repeat: no-repeat; background-position: right bottom;*/ background: red url("img/1.jpg") no-repeat; /*background-attachment: fixed;*/ background-size: 700px 500px; } </style> </head> <body> <div></div> <!-- width 寬 height 高 background 背景 背景色 background-color:顏色值 英文單詞 十六進制 rgb 背景圖 background-image:url("圖片路徑") 背景圖平鋪 background-repeat:no-repeat repeat-x repeat-y 背景圖定位 background-position:第一個值(X軸的位置) 第二個值(Y軸的位置); 第一個值: left center right 30px; 第二個值: top center bottom 100px; 複合寫法 background: color image position repeat; 背景圖滾動 background-attachment:fixed; 背景圖尺寸 background-size:第一個值(X軸的比例) 第二個值(Y軸的比例); 舒適小提示：css3的樣式 不兼容 --> </body> </html>
CSS基礎樣式border
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:0px; height:0px; /*background: url("img/1.jpg") no-repeat;*/ /*border:10px solid yellow;*/ /*border-top-width:100px; border-right-width:120px; border-bottom-width:140px; border-left-width:150px; border-style:solid; border-color: green;*/ /*border: 10px dotted #A100F9;*/ /*border-top:100px solid red; border-right:100px solid yellow; border-bottom: 100px solid green; border-left:100px solid transparent; border-radius: 10px;*/ border-top:100px solid #ccc; border-right:100px solid transparent; border-bottom:100px solid #ccc; border-left:100px solid #ccc; border-radius: 50%; } </style> </head> <body> <div></div> <!-- border 邊框 複合寫法 border: border-width border-style border-color; border-width 邊框寬度 border-style 邊框樣式 solid 實線 dashed 虛線 dotted 點線 （點線IE6不認） border-color 邊框顏色 英文單詞 十六進制 rgb border-radius 圓角 透明 transparent --> </body> </html>
CSS基礎樣式padding
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:100px; border:1px solid red; /*padding-top:20px; padding-right:40px; padding-bottom: 60px; padding-left:80px;*/ padding:10px 20px 40px 80px; } </style> </head> <body> <div>培訓</div> <!-- padding 內邊距 內填充 padding-top 上內邊距 padding-right 右內邊距 padding-bottom 下內邊距 padding-left 左內邊距 padding的複合寫法 padding:10px; 一個值表明 上右下左都是10px padding:10px 20px; 兩個值 第一個值表明上下 第二個值表明左右 padding:10px 20px 40px; 三個值 第一個值表明上 第二個值表明左右 第三個值表明下 padding:10px 20px 40px 80px; 4個值 第一個值表明上 第二個值表明右 第三個值表明下 第四個值表明左 --> </body> </html>
padding效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:466px; height:383px; border:10px solid #C6D8F0; border-radius: 10px; padding:10px 40px 80px 160px; } </style> </head> <body> <div> <img src="img/2.jpg" alt=""> </div> </body> </html>
空間大小的問題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:100px; height:100px; background: red; border:10px solid blue; padding:33px; } </style> </head> <body> <div></div> </body> </html>
CSS基礎樣式margin
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:100px; height:100px; background: red; margin:50px 100px 150px 200px; } </style> </head> <body> <div></div> <!-- margin 外邊距 margin-top 上外邊距 margin-right 右外邊距 margin-bottom 下外邊距 margin-left 左外邊距 margin的複合寫法 margin:10px; 一個值表明 上右下左都是10px margin:10px 20px; 兩個值 第一個值表明上下 第二個值表明左右 margin:10px 20px 40px; 三個值 第一個值表明上 第二個值表明左右 第三個值表明下 margin:10px 20px 40px 80px; 4個值 第一個值表明上 第二個值表明右 第三個值表明下 第四個值表明左 --> </body> </html>
margin的小性子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width:300px; background: red; /*border:1px solid #000;*/ /*overflow:hidden;*/ /*padding-top:100px;*/ } #box2 { width:300px; height:200px; background: yellow; /*margin-top: 100px;*/ margin-bottom: 30px; } #box3 { width:300px; height:200px; background: blue; margin-top:30px; } </style> </head> <body> <div id="box1"> <div id="box2"></div> <div id="box3"></div> </div> <!-- 標籤的嵌套 肯定父子級關係 1. 第一個子級的margin-top會在特定的狀況下穿透父級 規避方法： 1.給父級加邊框 2.給父級加overflow:hidden; 3.不要用margin-top，父級的padding-top代替 2. 兄弟關係的margin-top和margin-bottom 會疊壓 --> </body> </html>
盒模型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { width:100px; height:100px; border:10px solid red; padding:40px; margin:30px; }*/ div { width: 154px; height:35px; border:4px solid red; padding:28px; margin:12px; } </style> </head> <body> <div></div> <!-- 盒模型 空間大小 ： 盒子的總寬度 ： border-left + padding-left + width + padding-right + border-right 盒子的總高度 ： border-top + padding-top + height + padding-bottom + border-bottom 位置 margin --> </body> </html>
3、CSS文本樣式的設置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:160px; font-family: "sans-Serif"; color:rgb(41,232,32); } </style> </head> <body> <div>培訓</div> </body> </html>
line-height
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border:1px solid red; height:100px; line-height: 100px; } </style> </head> <body> <div>我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪我今天晚上吃炸醬麪</div> </body> </html>
text-align
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:200px; height:200px; line-height: 200px; border:1px solid red; text-align: center; } </style> </head> <body> <div>培訓</div> </body> </html>
text-indent
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { border: 1px solid red; font-size:20px; line-height: 25px; text-indent: 40px; } </style> </head> <body> <div>前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端</div> </body> </html>
font-weight
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size: 50px; font-weight: bold; } </style> </head> <body> <div>培訓</div> </body> </html>
font-style
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:50px; /*font-style:oblique;*/ } em { font-size:50px; font-style: normal; } </style> </head> <body> <div>培訓</div> <em>培訓</em> </body> </html>
text-decoration
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:50px; text-decoration: none; } a { text-decoration: none; } </style> </head> <body> <div>100元RMB</div> <a href="###">藍鷗科技</a> </body> </html>
letter-spacing
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { font-size:50px; letter-spacing: 10px; word-spacing: 100px; } </style> </head> <body> <div>I like html</div> </body> </html>
複合樣式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:500px; height:500px; background: red url("img/1.jpg") 100px 100px no-repeat; border: 10px solid yellow; padding:10px 20px 30px 40px ; margin:20px 40px 80px 160px ; font: italic bold 50px/500px "stkaiti"; } </style> </head> <body> <div>培訓</div> </body> </html>
font-family
font-family能夠取的值
宋體 SimSun
黑體 SimHei
微軟雅黑 Microsoft YaHei
微軟正黑體 Microsoft JhengHei
新宋體 NSimSun
新細明體 PMingLiU
細明體 MingLiU
標楷體 DFKai-SB
仿宋 FangSong
楷體 KaiTi
仿宋_GB2312 FangSong_GB2312
楷體_GB2312 KaiTi_GB2312
宋體：SimSuncss中中文字體（font-family）的英文名稱
Mac OS的一些：
華文細黑：STHeiti Light [STXihei]
華文黑體：STHeiti
華文楷體：STKaiti
華文宋體：STSong
華文仿宋：STFangsong
儷黑 Pro：LiHei Pro Medium
儷宋 Pro：LiSong Pro Light
標楷體：BiauKai
蘋果儷中黑：Apple LiGothic Medium
蘋果儷細宋：Apple LiSung Light
Windows的一些：
新細明體：PMingLiU
細明體：MingLiU
標楷體：DFKai-SB
黑體：SimHei
新宋體：NSimSun
仿宋：FangSong
楷體：KaiTi
仿宋_GB2312：FangSong_GB2312
楷體_GB2312：KaiTi_GB2312
微軟正黑體：Microsoft JhengHei
微軟雅黑體：Microsoft YaHei
裝Office會生出來的一些：
隸書：LiSu
幼圓：YouYuan
華文細黑：STXihei
華文楷體：STKaiti
華文宋體：STSong
華文中宋：STZhongsong
華文仿宋：STFangsong
方正舒體：FZShuTi
方正姚體：FZYaoti
華文彩雲：STCaiyun
華文琥珀：STHupo
華文隸書：STLiti
華文行楷：STXingkai
華文新魏：STXinwei
4、常見標籤及標籤類型的轉換
reset.css(去掉默認樣式)
/*margin的樣式初始化*/
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
margin:0;
}
/*padding的樣式初始化*/
ul,ol {
padding:0;
}
/*列表的樣式初始化*/
ul,ol,li {
list-style:none;
}
/*font-style的樣式初始化*/
em {
font-style: normal;
}
/*下劃線的樣式初始化*/
a {
text-decoration: none;
}
塊屬性標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> </head> <body> <!-- 語義：你說的話究竟是什麼意思 權重：優先先考慮誰 title標籤 寫法:<title></title> 雙標籤 語義：網頁標題 權重最大 div標籤 寫法：<div></div> 雙標籤 語義：無心義 默認樣式：無 h標籤 h1~h6 寫法： <h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6> 雙標籤 語義：標題 默認樣式：font-size font-weight margin 權重 ：h1 最大 h2 次之 h3更次之 。。。。。。。 h1頁面中最好不要超過一個 h2頁面中最好不要超過12個 h3以後的h標籤就隨便了 樣式初始化文件 reset.css 羣組選擇器 , 例 : h1,h2,h3,h4,h5,h6{ margin:0; } p標籤 寫法：<p></p> 雙標籤 語義：段落 默認樣式：margin p標籤在嵌套時不要包含塊元素的標籤 ul標籤 寫法：<ul></ul> 雙標籤 語義：無序列表 默認樣式：margin padding-left list-style-type li標籤 寫法：<li></li> 雙標籤 語義：列表項 默認樣式：list-style-type ol標籤 寫法：<ol></ol> 雙標籤 語義：有序列表 默認樣式：margin padding-left list-style-type ul,ol和li 是組合標籤 ul,ol的第一層子級必定是li li的父級必定是ul或ol <ul> <li> <h2></h2> </li> </ul> <div> <ul> <li></li> </ul> </div> <ol> <li> <ul> <li></li> </ul> </li> </ol> <div> <ol> <li></li> </ol> </div> dl標籤 自定義列表 字典標籤 dl dt dd 寫法：<dl></dl> 雙標籤 語義：自定義列表 默認樣式：margin dt 寫法：<dt></dt> 雙標籤 語義：列表標題 默認樣式：無 dd 寫法：<dd></dd> 雙標籤 語義：列表說明 默認樣式：margin-left 塊標籤 特性： --> <div>我是DIV</div> <h1>我是h1</h1> <h2>我是h2</h2> <h3>我是h3</h3> <h4>我是h4</h4> <h5>我是h5</h5> <h6>我是h6</h6> <p>我是p</p> <!-- --> <p> 我是P1 <!-- <p>我是P2</p> --> <!-- <div>我是DIV</div> --> </p> <ul> <li>我是li 1</li> <li>我是li 2</li> <li>我是li 3</li> <li>我是li 4</li> </ul> <ol> <li>我是li 1</li> <li>我是li 2</li> <li>我是li 3</li> <li>我是li 4</li> </ol> <dl> <dt>美女</dt> <dd>古代用來形容女子很漂亮</dd> <dd>打招呼</dd> </dl> </body> </html>
塊標籤的特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> <style> div { /*border:1px solid red;*/ } /*#box1 { width:500px; height:400px; background: red; } #box2 { height:100px; background: yellow; }*/ #box1 { width:400px; height:200px; background: red; } #box2 { width:200px; height:300px; background: yellow; } </style> </head> <body> <!-- 塊屬性的標籤 特性： 1.默認是父級100%的寬 2.支持全部CSS樣式 3.獨佔一行 --> <!-- <div>1</div> <div>2</div> <div>3</div> <div>4</div> --> <!-- <div id="box1"> <div id="box2"></div> </div> --> <div id="box1"></div> <div id="box2"></div> </body> </html>
內聯屬性的標籤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> <style> img { /*width:300px; height:300px;*//* padding:10px; margin:20px;*/ border:1px solid red; } </style> </head> <body> <!-- 內聯屬性的標籤 內聯標籤 特性： 1.同屬性的標籤排在同一排 2.內容撐開寬度 3.不支持寬高，不支持上下的padding和margin 4.代碼換行被解析 間距大小取決於父級的font-size的大小 span標籤 寫法：<span></span> 雙標籤 語義：無心義 默認樣式：無 strong標籤 寫法：<strong></strong> 雙標籤 語義：強調 默認樣式：font-weight 權重比較高 em標籤 寫法：<em></em> 雙標籤 語義：強調 默認樣式：font-style 權重比較高 a標籤 寫法：<a href="須要連接的網頁地址" target="打開網頁的方式"></a> 雙標籤 語義：超連接 默認樣式：color text-decoration cursor 舒適提示： href屬性中 1.若是要連接一個網站地址的話，必定要加 http:// 2. # 表明連接到當前頁 target _self 默認 在當前窗口打開 _blank 在新窗口打開 內聯塊標籤 內聯塊屬性 特性： 1.同屬性的標籤排在同一排 2.內容撐開寬度 3.支持全部的css的樣式 4.代碼換行被解析，間距大小取決於父級的font-size大小 img標籤 寫法：<img src="圖片的路徑地址" alt="圖片說明"> 單標籤 語義：圖片 默認樣式：低版本瀏覽器中有默認的邊框 舒適小提示： 1.路徑地址必定要正確 2.alt屬性必定要寫 --> <div>我是div1</div> <div>我是div2</div> <div>我是div3</div> <div>我是div4</div> <span>我是span1</span><span>我是span2 我比較寬</span><span>我是span3</span> <span>我是span4</span> <!-- <div>我是下面的DIV</div> --> <strong>我是strong1</strong> <strong>我是strong2</strong> <strong>我是strong3</strong> <strong>我是strong4</strong> <em>我是em1</em> <em>我是em2</em> <em>我是em3</em> <em>我是em4</em> <a href="http://www.baidu.com" target="_blank">連接到百度</a> <a href="#">我是A2</a> <a href="#">我是A3</a> <a href="#">我是A4</a> <img src="imgs/1.jpg" alt="機器貓"> <img src="imgs/1.jpg" alt="機器貓"> <img src="imgs/1.jpg" alt="機器貓"> </html>
標籤類型的轉換
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { border:1px solid red; display: inline; width:100px; height:100px; }*/ span { border:1px solid red; height:100px; display: block; } h2 { border:1px solid red; display: inline-block; width:100px; height:100px; } p { border:1px solid red; display: none; } </style> </head> <body> <!-- 標籤類型的轉換 顯示爲無：display:none; 塊屬性 display:block; 內聯屬性 內聯 display:inline; 內聯塊 display:inline-block; --> <div>1</div> <div>2</div> <span>span1</span> <span>span2</span> <h2>我是h2</h2> <h2>我是h2</h2> <p>我是p標籤</p> <div>我是DIV</div> </body> </html>
5、樣式佈局
reset.css
/*margin的樣式初始化*/ body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ margin:0; } /*padding的樣式初始化*/ ul,ol { padding:0; } /*列表的樣式初始化*/ ul,ol,li { list-style:none; } /*font-style的樣式初始化*/ em { font-style: normal; } /*下劃線的樣式初始化*/ a { text-decoration: none; } /*BFC的方法*/ .clear:after{ content: "";display: block;clear: both; } clear { zoom:1; }
浮動是什麼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*body { font-size:0px; }*/ div { width:100px; height:100px; text-align: center; line-height: 100px; border:1px solid red; /*display: inline-block;*/ font-size:16px; float:right; } </style> </head> <body> <!-- display:inline-block; 浮動 float --> <div>我是DIV1</div> <div>我是DIV2</div> <div>我是DIV3</div> <div>我是DIV4</div> </body> </html>
浮動的特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { border:1px solid red; float:left; }*/ /*span { width:100px; height:100px; border:1px solid red; float: left; padding:10px; }*/ /*div { width: 100px; height: 100px; background: red; float: left; } span,strong { display: inline-block; width:40px; height:40px; border:1px solid yellow; } p { height:50px; width:400px; background: pink; }*/ div{ background: red; overflow: hidden; } h2 { margin:0; width:300px; height:300px; border:1px solid black; background: yellow; float: left; } p{ height:300px; background: blue; } </style> </head> <body> <!-- 浮動的特性 1.浮動的元素排在同一排 2.浮動的元素內容撐開寬度 3.浮動的元素支持全部的css樣式 4.浮動的元素脫離文檔流 5.浮動的元素提高層級半級 --> <!-- <div>div1dfadfa</div> <div>div2</div> <div>div3</div> <div>div4</div> --> <!-- <span>span1</span> <span>span2</span> <span>span3</span> <span>span4</span> --> <!-- <div>div</div> <span>span</span> <strong>strong</strong> <p></p> --> <div> <h2>我是H2</h2> </div> <p></p> </body> </html>
BFC
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*div { width:300px; height:300px; border:10px solid red; font-size:24px; overflow: hidden; margin:0 auto; }*/ /*div:hover{ color:blue; text-decoration: underline; }*/ /*div:after{ content: "我是僞類";background: red; }*/ #box1 { width:540px; border:10px solid red; margin:0 auto; /*height:108px;*/ } span { width:100px; height:100px; border:4px solid blue; text-align: center; line-height: 100px; float:left; } .clear:after{ content: "";display: block;clear: both; } </style> </head> <body> <!-- 1.overflow 溢出 會從新計算元素的空間 hidden 溢出隱藏 auto 溢出出現滾動條 scroll 出現滾動條的位置 2.元素的居中 margin:0 auto; 3.元素的僞類 僞類：就是CSS一些元素身上的特殊屬性 :hover 鼠標停留 :after 在元素內容以後插入一些內容 浮動：其實就是使元素脫離文檔流，按照必定的方式排列，遇到相鄰的浮動元素或者父級的邊界停下來。 BFC 就是清浮動 就是用來處理浮動元素脫離文檔流的問題 1.父級也浮動 弊端：左右的margin:0 auto; 會失效； 2.父級加display:inline-block 弊端：左右的margin:0 auto; 會失效； (若是須要讓元素居中能夠給父級加text-align:center) 3.給父級加高 弊端：擴展性很差 4.br標籤 寫法：<br/> 做用：換行 5.clear clear 元素的某一方向不容許出現其餘的浮動元素 left right both 推薦使用 one 舒適小提示 不符合W3C規範 違反結構 樣式 行爲 三者分離原則 6.僞類清浮動 :after{ content:"";display:block;clear:both; } 舒適提示：目前主流方法。建議使用 <div id="box1" class="clear"> <span class="class1">1</span> <span class="class2">2</span> <span class="class3">3</span> <span class="class4">4</span> <span class="class5">5</span> </div> <!-- <div> 我是DIV <br/> 我是DIV </div> --> </body> </html>
提高層級半級
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width:100px; height:100px; background: red; float:left; margin-right:3px; } #box2 { width:200px; height:210px; background: yellow; } </style> </head> <body> <div id="box1">div1</div> <div id="box2">前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習前端學習</div> </body> </html>
定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:300px; height:300px; border:10px solid black; position: relative; } span { width:100px; height:100px; background: red; text-align: center; line-height: 100px; font-size:40px; position: absolute; } .span1{ left:100px; } .span2{ top:100px; } .span3{ right:0px; top:100px; } .span4{ bottom: 0px; left: 100px; } </style> </head> <body> <div> <span class="span1">1</span> <span class="span2">2</span> <span class="span3">3</span> <span class="span4">4</span> </div> </body> </html>
定位的屬性及特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { width:400px; height:400px; border:10px solid red; margin:0 auto; position: relative; /*left:300px;*/ } #box2{ width:100px; height:100px; background: yellow; position: absolute; left:10px; top:30px; } </style> </head> <body> <!-- 定位： 把一個元素 按照必定的方式 定到頁面的某一個位置 position 相對定位 relative 針對本身自己的位置進行定位 絕對定位 absolute 針對有定位的父級的原點進行定位，若是父級沒有定位，會找父級的父級身上有沒有定位，若是有，針對父級的父級的原點進行定位，以此類推，若是都沒有定位，針對document進行定位 舒適小提示： 絕對定位即便沒有初始值，也必定要設置值 left:0px; top:0px; 固定定位 fixed 針對頁面窗口進行定位 舒適提示： IE6 不支持固定定位 偏移量 left top right bottom 舒適提示 left top 比 right bottom 的優先級要高 --> <div id="box1"> <div id="box2"></div> </div> </body> </html>
三種定位的特性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box1 { background: red; position: absolute; /*float:left;*/ } #box2 { width:200px; height:200px; background: yellow; } span { width:100px; height:100px; background: red; position: fixed; left:0px; } .span1 { z-index: 1; } .span2{ z-index: 2; } .span4{ z-index: 10; } </style> </head> <body> <!-- 定位的三種特性 相對定位 relative 1.不影響元素自己的特性 2.不使元素脫離文檔流 3.提高層級 4.沒法觸發BFC 5.針對本身自己進行定位 絕對定位 absolute 1.會使元素徹底脫離文檔流 2.內容撐開寬度和高度 3.使元素支持全部的CSS樣式 4.提高層級 z-index:數值; 定位層級設置 數值越大，層級越高 5.絕對定位要和相對定位配合使用 6.若是有定位父級，針對定位父級發生偏移，沒有定位父級，針對document進行偏移 7.若是絕對定位的子級有浮動，能夠省略清浮動的操做 固定定位 fixed 1.不兼容IE6 2.針對窗口進行定位 3.若是固定定位的子級有浮動，能夠省略清浮動的操做 --> <!-- <div id="box1">div1</div> <div id="box2">div2</div> --> <!-- <span class="span1">span1</span> --> </body> </html>
定位和BFC
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:350px; border:10px solid #000; position: relative; } span { width:100px; height:100px; background: red; text-align: center; line-height: 100px; font-size:40px; float:left; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> <span>4</span> </div> </body> </html>
定位的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { width:400px; height:400px; border:4px solid #000; background: yellow; position: relative; overflow: hidden; } span { width:400px; height:100px; background: red; position: absolute; top:400px; transition:0.01s; } div:hover span{ top:300px; } </style> </head> <body> <div> <span></span> </div> </body> </html>
派生選擇器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> /*span { border:1px solid red; }*/ #box1 span { border:1px solid red; } #box2 span { display: inline-block; width:100px; height:100px; background: yellow; } </style> </head> <body> <!-- 派生選擇器 是由 id選擇器 class選擇器 標籤名選擇器組合而成 id選擇器 10000 class選擇器 100 標籤名選擇器 1 #box2 span 10000 + 1 10001 --> <div id="box1"> <span>我是box1的span</span> <span>我是box1的span</span> <span>我是box1的span</span> <span>我是box1的span</span> </div> <div id="box2"> <span>我是box2的span</span> <span>我是box2的span</span> <span>我是box2的span</span> <span>我是box2的span</span> </div> </body> </html>
派生選擇器的小例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/reset.css"> <style> #box1 { width:550px; margin:0 auto; border:1px solid #E4AD7F; } #box1 li { width:100px; height:50px; background: #A5EEA2; float:left; margin-right: 10px; text-align: center; line-height: 50px; font-size:24px; } #box1 li a { color:#E99B1E; } #box1 .cla1{ background: red; } #box1 .cla1 a { color:#fff; }/**/ /* id 10000 class 100 div 1 #box1 li 10000 + 1 #box1 li a 10000 + 1 + 1 #box1 .cla1 10000 + 100 #box1 .cla1 a 10000 + 100 + 1 */ </style> </head> <body> <div id="box1"> <ul> <li class="cla1"> <a href="#">導航1</a> </li> <li> <a href="#">導航2</a> </li> <li> <a href="#">導航3</a> </li> <li> <a href="#">導航4</a> </li> <li> <a href="#">導航5</a> </li> </ul> </div> </body> </html>
6、兼容性
reset.css
/*margin的樣式初始化*/ body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{ margin:0; } /*padding的樣式初始化*/ ul,ol { padding:0; } /*列表的樣式初始化*/ ul,ol,li { list-style:none; } /*font-style的樣式初始化*/ em { font-style: normal; } /*下劃線的樣式初始化*/ a { text-decoration: none; } /*BFC的方法*/ .clear:after{ content: "";display: block;clear: both; } clear { zoom:1; }
兼容性究竟是個什麼玩意
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width:400px; } .left { width:200px; background: red; height:300px; float:left; } .right{ width: 200px; float:right; } .div { width:170px; height:170px; padding:15px; background: blue; } </style> </head> <body> <!-- 兼容性：頁面在不一樣的瀏覽器中可能會顯示不一樣。 在IE6下，子級的寬度會撐開父級設置好的寬度 舒適小提示：盒模型的計算必定要精確，不然IE瀏覽器可能會顯示不一樣 --> <div id="box"> <div class="left"></div> <div class="right"> <div class="div"></div> </div> </div> </body> </html>
兼容性1
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:400px; } .left { background: red; float:left; } .right{ background: yellow; float:right; } h3{ margin:0; height:40px; float:left; } </style> </head> <body> <!-- ie6中，元素浮動，若是寬度須要內容撐開，須要給裏面的塊元素都添加浮動才能夠 --> <div class="box"> <div class="left"> <h3>左側</h3> </div> <div class="right"> <h3>右側</h3> </div> </div> </body> </html>
兼容性2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .left { width:100px; height:100px; background: red; float:left; } .right { width:200px; height:100px; background: blue; /*margin-left: 100px;*/ float: left; } </style> </head> <body> <!-- 在IE6.7下 元素要經過浮動排在同一排，就須要給這行元素都加浮動 --> <div class="box"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
兼容性3
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> p { width:100px; height:100px; background: red; } </style> </head> <body> <!-- 注意標籤的嵌套規則 --> <p> <div></div> </p> </body> </html>
兼容性4
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { height:2px; background: red; overflow: hidden; } </style> </head> <body> <!-- 在IE6下元素的高度若是小於19px的時候，會被當成19px來處理 解決方法：overflow:hidden; --> <div class="box"></div> </body> </html>
兼容性5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:100px; height:100px; border:2px dotted red; } </style> </head> <body> <!-- 在IE6下不支持1px的dotted邊框樣式 解決方法：切背景平鋪 --> <div class="box"></div> </body> </html>
兼容性6
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { background: red; zoom:1; } .div { width:200px; height:200px; background: blue; margin:100px; } </style> </head> <body> <!-- haslayout 在IE下大部分兼容性都是由於haslayout屬性的觸發問題，儘可能觸發haslayout屬性，能夠減小不少IE下的兼容下的問題。 在IE下父級有邊框的時候，子元素的margin會失效 解決方法：觸發父級的haslayout屬性 --> <div class="box"> <div class="div"></div> </div> </body> </html>
兼容性7
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{ margin:0; } .box { width:200px; height: 200px; background: red; float:left; margin:100px; display: inline; } </style> </head> <body> <!-- ie6下雙邊距的bug 在ie6下，塊元素有浮動有橫向的margin的值的時候，橫向的margin的值會擴大兩倍 --> <div class="box"></div> </body> </html>
兼容性8
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { border:10px solid red; float:left; } .box div { width: 100px; height: 100px; background: red; margin-right: 30px; border:5px solid #000; float:left; display: inline; } </style> </head> <body> <!-- margin-left 一行中左側的第一個元素有雙邊距 margin-right 一行中右側的第一個元素有雙邊距 --> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
兼容性9
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { margin:0; padding:0; list-style: none; width:300px; } li { list-style: none; height:30px; border:1px solid #000; /*float:left;*/ vertical-align: top; } a { width:100px; height:30px; float:left; background: red; } span { width:100px; height:30px; float: right; background: blue; } </style> </head> <body> <!-- 在IE6,7下，li自己沒有浮動，li裏面的內容有浮動，li下會產生一個間隙 解決方法： 1.給li加浮動 2.給li加vertical-align:top --> <ul> <li> <a href="#"></a> <span></span> </li> <li> <a href="#"></a> <span></span> </li> <li> <a href="#"></a> <span></span> </li> </ul> </body> </html>
兼容性10
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { margin:0; padding:0; list-style: none; width:300px; } li { list-style: none; height:12px; border:1px solid #000; overflow: hidden; float:left; /*vertical-align: top;*/ } a { width:100px; height:12px; float:left; background: red; } span { width:100px; height:12px; float: right; background: blue; } </style> </head> <body> <!-- 在IE6,7下，li自己沒有浮動，li裏面的內容有浮動，li下會產生一個間隙 解決方法： 1.給li加浮動 2.給li加vertical-align:top 在IE6下最小高度的bug 和 li的間隙問題共存的時候，給li加浮動 ，vertical-align很差使 --> <ul> <li> <a href="#"></a> <span></span> </li> <li> <a href="#"></a> <span></span> </li> <li> <a href="#"></a> <span></span> </li> </ul> </body> </html>
兼容性11
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { border:10px solid red; /*float:left;*/ width:600px; overflow: hidden; } .box div { width:100px; height:100px; background: blue; border:5px solid #000; margin:20px; float: left; display: inline; } </style> </head> <body> <!-- 當一行子級元素寬度之和和父級的寬度相差超過3px，或者子級元素不滿行的狀況的時候，最後一行的子級元素的margin-bottom會失效 --> <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body> </html>
兼容性12
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:400px; } .left { float: left; } .right { float: right; width:400px; } </style> </head> <body> <!-- 在ie6下的文字溢出bug 子元素的寬度和父級的寬度若是相差小於3px的時候， 兩個浮動元素中間有註釋或者內聯元素，就會出現文字溢出，內聯元素越多，溢出越多 解決辦法：用div把註釋或者內聯元素包起來 --> <div class="box"> <div class="left"></div> <!-- 上面的是left部分 --> <div> <span></span> <span></span> </div> <div class="right">老白是個大胖子</div> </div> </body> </html>
兼容性13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:200px; height: 200px; border:1px solid #000; position: relative; } a { position: absolute; width:40px; height:40px; background: red; right: 20px; top:0px; } ul { width: 150px; height: 150px; background: yellow; margin:0 0 0 50px; padding:0; float: left; display: inline; } </style> </head> <body> <!-- 在IE6下，當浮動元素和絕對定位元素是兄弟關係的時候，絕對定位會失效 解決方法： 不讓浮動元素和絕對定位元素是兄弟關係，用div或者其餘標籤把a標籤包起來 --> <div class="box"> <ul></ul> <div> <a href="#"></a> </div> </div> </body> </html>
兼容性14
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 200px; height: 200px; border:1px solid #000; overflow: auto; position: relative; } .div { width:150px; height: 300px; background: red; position: relative; } </style> </head> <body> <!-- 在IE6.7下，子級元素有相對定位，父級overflow包不住子級元素 解決方法：給父級也加相對定位 --> <div class="box"> <div class="div"></div> </div> </body> </html>
兼容性15
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:200px; height:200px; border:1px solid #000; position: relative; } .box span { width:20px; height:20px; background: yellow; position: absolute; right:-1px; bottom:-1px; } </style> </head> <body> <!-- 在IE6下，若是絕對定位的父級寬高是奇數的時候，子級元素的right和bottom值會有1px的誤差 --> <div class="box"> <span></span> </div> </body> </html>
兼容性16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { height: 2000px; background: red; } .box { width:200px; height: 200px; background: yellow; position: fixed; top:30px; left:100px; opacity: 0.5; filter:alpha(opacity=50); } </style> </head> <body> <div class="box"></div> </body> </html>
兼容性17
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:200px; height:32px; border:1px solid #000; } input { width:100px; height:30px; border:1px solid blue; margin:0; padding:0; float:left; } </style> </head> <body> <!-- 在IE6.7下 輸入型的表單標籤控件上下會有1px的間隙。 處理方法：給input加浮動 --> <div class="box"> <input type="text"> </div> </body> </html>
兼容性18
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body { background: #000; } .box { width:400px; height:400px; background: url("img/1.png"); } </style> <script src="js/DD_belatedPNG_0.0.8a.js"></script> <script> DD_belatedPNG.fix('.box'); </script> </head> <body> <div class="box"></div> </body> </html>
兼容性19
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!--[if ie]> 我是IE <![endif]--> <!--[if ie 6]> 我是IE6 <![endif]--> <!--[if ie 7]> 我是IE7 <![endif]--> <!--[if ie 8]> 我是IE8 <![endif]--> </body> </html>
兼容性20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width:100px; height:100px; background: red; background: yellow\9; +background: black; _background:pink; } </style> </head> <body> <!-- css hack: \9 ie10以前的ie瀏覽器解析的代碼 +或者* 表示ie7包括7以前的ie瀏覽器 _表示 ie6包括6以前的ie瀏覽器 --> <div class="box"></div> </body> </html>
相關文章
- 1. day14 HTML
- 2. 前端之HTML補充
- 3. Day15 HTML補充、初識JavaScript
- 4. day 46 html 標籤補充
- 5. Html中的轉義符（待補充）
- 6. web前端-html基礎-補充知識
- 7. 補充
- 8. springboot rabbitmq 補充
- 9. MemoryAnalyzer補充
- 10. channel補充
- 更多相關文章...
- • HTML 指南 - 網站建設指南
- • W3C HTML 活動 - W3C 教程
- • 適用於PHP初學者的學習線路和建議
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. day14 HTML
- 2. 前端之HTML補充
- 3. Day15 HTML補充、初識JavaScript
- 4. day 46 html 標籤補充
- 5. Html中的轉義符（待補充）
- 6. web前端-html基礎-補充知識
- 7. 補充
- 8. springboot rabbitmq 補充
- 9. MemoryAnalyzer補充
- 10. channel補充