第一篇:黑馬程序員php培訓(xùn):4天帶你搞定CSS視頻教程(8)
當(dāng)父元素?zé)o法測(cè)定子元素的高度
盒子里面的內(nèi)容浮動(dòng)起來(lái)了,那么他就脫離標(biāo)準(zhǔn)流了,所以這時(shí)候父元素盒子就不能精確的檢測(cè)到它內(nèi)部的內(nèi)容到底有多高,父元素會(huì)變成一根線,完全沒(méi)背撐開(kāi);
解決:給父元素自動(dòng)overflow:hidden,,這個(gè)屬性可以觸發(fā)盒子的haylayout屬性(是否是布局),就可以精確檢測(cè)一下內(nèi)部的高度;盒子就會(huì)自動(dòng)撐開(kāi)了
腳下留心:overflow可以觸發(fā)除了ie6以外的瀏覽器的haslayout屬性。Zoom:1可以觸發(fā)ie6的haslayout屬性,通過(guò)zoom:1來(lái)兼容ie6.例題:雪
核心代碼如下:
上面的css是分開(kāi)寫(xiě)的,我們可以合在一起寫(xiě),上面的代碼等價(jià)于如下:
例題:西湖春天
需要注意的地方
1、塊盒子要左右排列,將左右排列的盒子全部左浮動(dòng)
2、塊盒子的邊界左自動(dòng),右自動(dòng)是將盒子居中
3、文字的盒子向下移動(dòng)30px,方法有三種
a)第一種:以part4為標(biāo)準(zhǔn),使用padding-top:30px;b)第二種:以wenzi為標(biāo)準(zhǔn),使用margin-top:30px c)第三種:以wenzi為標(biāo)準(zhǔn),使用padding-top:30px
4、內(nèi)減模式
a)默認(rèn)情況下,盒子的尺寸是外加模式,盒子實(shí)際寬度=盒子的寬度+填充+邊框粗細(xì)。所以很多情況下,指定了填充以后,盒子尺寸會(huì)變大,解決方法:我們可以使用內(nèi)減模式,就是指定盒子的寬度就是總寬度,如果指定填充,盒子中內(nèi)容的寬度-填充=實(shí)際內(nèi)容的寬度。b)代碼:box-sizing:border-box;
5、將圖片居中
a)第一種方法:part1的text-align:center;b)第二種方法:img也是一個(gè)盒子,塊盒子的左自動(dòng),右自動(dòng)是居中。
#content #center #part1 img{ margin-left:auto;margin-right:auto;display:block;/*如果不是塊顯示,左自動(dòng)右自動(dòng)不居中*/ } 完整代碼
第二篇:黑馬程序員php培訓(xùn):4天帶你搞定CSS視頻教程
標(biāo)簽的顯示模式
行顯示標(biāo)記
標(biāo)記是從左往右排稱為行顯示標(biāo)記 特性:
1、從左往右排列
2、不指定高度默認(rèn)高度是0
3、不指定寬度默認(rèn)寬度是0
4、行顯示標(biāo)記不能指定寬度和高度
5、轉(zhuǎn)換成塊顯示:display:block 多學(xué)一招:如果標(biāo)記轉(zhuǎn)成塊顯示以后,可以設(shè)定寬度和高度,但是排列變成了上下排列,如果要實(shí)現(xiàn)左右排列,同時(shí)設(shè)定寬度和高度,可以將顯示模式設(shè)置為display:inline-block;塊顯示標(biāo)記
標(biāo)記從上往下排稱為塊顯示標(biāo)記 特性:
1、從上往下排
2、如果不指定寬度默認(rèn)寬度是100%
3、如果不指定高度,高度是0px
4、可以設(shè)置寬度和高度
拼版中所以用非常多的兩個(gè)塊標(biāo)記
跨段塊標(biāo)記,div中可以標(biāo)題,段落,圖片,文字
1、2、行顯示標(biāo)記
跨字符塊標(biāo)記,span中只能放文字
Div + Css 排版優(yōu)點(diǎn)
執(zhí)行效率高。
學(xué)完div+css后思考為什么div+css執(zhí)行效率高?
盒子模型
什么是盒子?
只要是能存放內(nèi)容的標(biāo)簽都是盒子。最大的盒子是HTML標(biāo)記
邊界(margin):盒子的外面叫邊界,邊界有四個(gè),上下左右 填充(padding):盒子的里面叫填充,填充有四個(gè),上下左右 邊框(border):盒子的本身有邊框,邊框有四個(gè),上下左右 練習(xí)
CSS例題一(邊框和邊界)
請(qǐng)輸入您的信息: >” id=“btn” />CSS例題二(細(xì)線表格)
學(xué)號(hào) | 姓名 | 性別 | 年齡 |
---|---|---|---|
1 | 令狐沖 | 男 | 22 |
2 | 任盈盈 | 女 | 18 |
3 | 任我行 | 男 | 55 |
例題:銀杏的葉子
/*背景圖片*/ /*背景不平鋪*/
/*沿著y軸平鋪*/ /*左填充是110px*/
銀杏的優(yōu)點(diǎn)
1.葉色秀雅,花色清淡。2.樹(shù)體高大,壽命綿長(zhǎng),樹(shù)粗可達(dá)4米,壽命可達(dá)3000年之多。固長(zhǎng)與古老寺廟相配伍,以名山大川、風(fēng)景名勝為伴。
3.樹(shù)干光潔,愈傷力強(qiáng),輕微的損傷很快便可愈合。
4.發(fā)芽晚落葉早,有利于早春和晚秋樹(shù)下能及時(shí)得到和曖的陽(yáng)光。
5.銀杏冠大蔭濃,具有降溫作用;直射陽(yáng)光下,氣溫高達(dá)40.20c,銀杏樹(shù)下的氣溫僅為35.30c。降溫4.90c,優(yōu)于其它樹(shù)種。
6.萌蘗力強(qiáng)、耐修剪。根際萌蘗旺盛,可以形成五代同堂”,懷中抱孫”等自然風(fēng)景。
7.銀杏絕少病蟲(chóng)害,不污染環(huán)境,是著名的無(wú)公害樹(shù)種。
8.抗旱力較強(qiáng)。
9.抗煙塵、抗火災(zāi)、抗有毒氣體(如二氧化硫、氨氣、臭氧等),抗輻射能力也強(qiáng)。
第三篇:黑馬程序員php培訓(xùn):4天帶你搞定CSS視頻教程
按CSS的位置來(lái)分類(lèi)
1、內(nèi)嵌樣式:在HTML頁(yè)面中以結(jié)束,這里邊的樣式只能供本頁(yè)面使用
2、外部樣式:寫(xiě)一個(gè)css文件,在需要使用css的頁(yè)面中引入外部css。我們可以將頁(yè)面公用的css寫(xiě)到外部css中
3、行內(nèi)樣式:通過(guò)元素的style屬性直接寫(xiě)的樣式。
內(nèi)嵌樣式
在HTML頁(yè)面的內(nèi)部嵌入樣式
行內(nèi)樣式
通過(guò)元素的style屬性直接寫(xiě)的樣式 <標(biāo)記 style=’樣式’ >
外部樣式
首先新建一個(gè)css文件。在HTML頁(yè)面中鏈接或?qū)氲姆椒▉?lái)引用外部樣式。
1、鏈接外部樣式
語(yǔ)法: rel:表示鏈接的類(lèi)型,這個(gè)屬性不能省略 rel=“stylesheet”表示鏈接的類(lèi)型是樣式表
type=“text/css”:表示這個(gè)文件是css文本
2、導(dǎo)入外部樣式
3、鏈接樣式和導(dǎo)入樣式的區(qū)別
鏈接樣式只能在HTML頁(yè)面中引入外部樣式
導(dǎo)入樣式既可以在HTML中導(dǎo)入外部樣式也可以在樣式文件中導(dǎo)入外部樣式
注釋
1、HTML注釋
2、CSS注釋
/* CSS注釋 */ 注釋是給開(kāi)發(fā)人員看的,不參加計(jì)算機(jī)的執(zhí)行。
第四篇:黑馬程序員php培訓(xùn):4天帶你搞定CSS視頻教程(10)
Css的方法
border-radius:用來(lái)做圓角矩形
border-radius后面的參數(shù)和margin類(lèi)似,記憶的時(shí)候?qū)⒕匦雾槙r(shí)針旋轉(zhuǎn)45度。
第五篇:黑馬程序員php培訓(xùn):4天帶你搞定CSS視頻教程(14)
表單元素新增的三個(gè)屬性
required:必填字段
autofocus:自動(dòng)獲得焦點(diǎn) placeholder:默認(rèn)顯示內(nèi)容
HTML5表單的變化
HTML5的表單元素可以不放在表單域中,可以通過(guò)id關(guān)聯(lián)起來(lái)
新增的inpu元素
音頻播放
方法一:
Controls:表示顯示控制面板 Autoplay:自動(dòng)播放
如果不支持此音頻格式,顯示
如果不支持第一個(gè)音頻就播放下一個(gè)。
視頻播放
方法一:
方法二:
偽對(duì)象選擇器
:before在盒子的前面插入(內(nèi)部的前面):after在盒子的后面插入(內(nèi)部的后面)
Content是用來(lái)插入內(nèi)容,如果沒(méi)有內(nèi)容,content也必須要寫(xiě),content的內(nèi)容是空。


文檔為doc格式
聲明:本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)自行上傳,本網(wǎng)站不擁有所有權(quán),未作人工編輯處理,也不承擔(dān)相關(guān)法律責(zé)任。如果您發(fā)現(xiàn)有涉嫌版權(quán)的內(nèi)容,歡迎發(fā)送郵件至:645879355@qq.com 進(jìn)行舉報(bào),并提供相關(guān)證據(jù),工作人員會(huì)在5個(gè)工作日內(nèi)聯(lián)系你,一經(jīng)查實(shí),本站將立刻刪除涉嫌侵權(quán)內(nèi)容。
黑馬程序員php培訓(xùn):3天帶你玩轉(zhuǎn)HTML教程
兩個(gè)概念 客戶端和服務(wù)器端 瀏覽者使用的計(jì)算機(jī)客戶端,用來(lái)給服務(wù)器發(fā)送請(qǐng)求,注意:管理員使用的計(jì)算機(jī)也是客戶端(在服務(wù)器上直接操作除外) 存放網(wǎng)頁(yè)文件的計(jì)算機(jī)是服務(wù)器端。 文......
黑馬程序員php培訓(xùn):2天搞定Bootstrap框架教程[合集]
按鈕 可以加按鈕效果的有哪些標(biāo)簽 按鈕 內(nèi)容 .btn 是按鈕樣式的基類(lèi) 按鈕樣式 .btn-primary .btn-default .btn-success .btn-warning .btn-danger 按鈕的大小 .btn-lg(最大......
黑馬程序員php培訓(xùn):3天帶你玩轉(zhuǎn)HTML教程(推薦五篇)
滾動(dòng)文字的設(shè)置 路徑 路徑分為兩種 1、 絕對(duì)地址:從盤(pán)符開(kāi)始 2、 相對(duì)地址:以自身文件為準(zhǔn) 注意:../代表上一級(jí)目錄 ./代表當(dāng)前目錄 點(diǎn)擊 ./代表當(dāng)前目錄 鏈接 連接的標(biāo)記是 內(nèi)......
黑馬程序員php培訓(xùn):3天帶你玩轉(zhuǎn)HTML教程(12)
ps和fw中幾個(gè)常用快捷鍵(兩個(gè)軟件中是一樣的) 1、ctrl+加號(hào):放大 2、ctrl+減號(hào):縮小 3、雙擊手型工具,將圖片自適應(yīng)大小顯示 4、Tab鍵全部顯示/隱藏工具面板,在FW中F4也可以顯示......
黑馬程序員php培訓(xùn):javascript+jquery九天課程第九天(8)
動(dòng)畫(huà): 基本: Show(shijian,fn)(顯示)【在效果完成之后,會(huì)執(zhí)行fn】 Hide(shijian,fn)(隱藏)【在效果完成之后,會(huì)執(zhí)行fn】 Toggle:切換【show和hide之間】 滑動(dòng): slideDown:下滑,顯示......
黑馬程序員PHP培訓(xùn)教程:Linux介紹
Linux介紹 1、計(jì)算機(jī)資源 計(jì)算機(jī)資源是由兩部分組成: 硬件資源:鍵盤(pán)、顯示器、鼠標(biāo)、硬盤(pán)、內(nèi)存等等。 軟件資源:應(yīng)用程序,如office、qq等等。 問(wèn)題:用戶在鍵盤(pán)上的操作(打字)為什......
黑馬程序員PHP培訓(xùn)教程:GET請(qǐng)求
GET請(qǐng)求 語(yǔ)法:open(get|post,URL地址) PHP頁(yè)面......
黑馬程序員PHP培訓(xùn)教程:AJAX聊天室
AJAX聊天室 設(shè)計(jì)message表:用來(lái)保存聊天信息 獲取最新的聊天記錄 PHP頁(yè)面:大于最大聊天編號(hào)的記錄肯定是新的聊天記錄 1 2 3 4 5 6 7 8 9......