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


文檔為doc格式
聲明:本文內容由互聯網用戶自發貢獻自行上傳,本網站不擁有所有權,未作人工編輯處理,也不承擔相關法律責任。如果您發現有涉嫌版權的內容,歡迎發送郵件至:645879355@qq.com 進行舉報,并提供相關證據,工作人員會在5個工作日內聯系你,一經查實,本站將立刻刪除涉嫌侵權內容。
黑馬程序員php培訓:3天帶你玩轉HTML教程
兩個概念 客戶端和服務器端 瀏覽者使用的計算機客戶端,用來給服務器發送請求,注意:管理員使用的計算機也是客戶端(在服務器上直接操作除外) 存放網頁文件的計算機是服務器端。 文......
黑馬程序員php培訓:2天搞定Bootstrap框架教程[合集]
按鈕 可以加按鈕效果的有哪些標簽 按鈕 內容 .btn 是按鈕樣式的基類 按鈕樣式 .btn-primary .btn-default .btn-success .btn-warning .btn-danger 按鈕的大小 .btn-lg(最大......
黑馬程序員php培訓:3天帶你玩轉HTML教程(推薦五篇)
滾動文字的設置 路徑 路徑分為兩種 1、 絕對地址:從盤符開始 2、 相對地址:以自身文件為準 注意:../代表上一級目錄 ./代表當前目錄 點擊 ./代表當前目錄 鏈接 連接的標記是 內......
黑馬程序員php培訓:3天帶你玩轉HTML教程(12)
ps和fw中幾個常用快捷鍵(兩個軟件中是一樣的) 1、ctrl+加號:放大 2、ctrl+減號:縮小 3、雙擊手型工具,將圖片自適應大小顯示 4、Tab鍵全部顯示/隱藏工具面板,在FW中F4也可以顯示......
黑馬程序員PHP培訓教程:Linux介紹
Linux介紹 1、計算機資源 計算機資源是由兩部分組成: 硬件資源:鍵盤、顯示器、鼠標、硬盤、內存等等。 軟件資源:應用程序,如office、qq等等。 問題:用戶在鍵盤上的操作(打字)為什......
黑馬程序員PHP培訓教程:GET請求
GET請求 語法:open(get|post,URL地址) PHP頁面......
黑馬程序員PHP培訓教程:AJAX聊天室
AJAX聊天室 設計message表:用來保存聊天信息 獲取最新的聊天記錄 PHP頁面:大于最大聊天編號的記錄肯定是新的聊天記錄 1 2 3 4 5 6 7 8 9......
黑馬程序員PHP培訓教程:同步和異步
同步和異步 req.open(參數傳遞的方法,URL,[true|false]) true:異步:同一個時間點允許多個進程,【默認】 false:同步:同一個時間點只能執行一個進程。 HTML代碼 window.onload=......