HTML學習筆記Day8

2022-09-08 05:36:09 字數 4459 閱讀 9616

一、設定元素背景透明屬性

1.元素背景透明,內容正常顯示;

注:opacity:value;元素背景透明內容也透明;

2.rgba分別指red、green、blue、透明度

二、flash和marquee(滾動字幕)

1.插入flash

1)語法:

2)將flash背景設定為透明 

給標記新增屬性:wmode="transparent"

3)ie中不顯示flash,可做如下操作: 

b.開啟ie瀏覽器,選擇工具選單--internet選項----安全----低。

2.滾動字幕的應用:

beh**ior(行為)="scroll(滾動)/alternate(晃動)"

direction(方向)="up(從下而上)/down(從上向下)/left(從右到左)/right(從左到右)"

scrollamount(滾動速度)="value"

height(上下滾動範圍)="value"

width(左右滾動範圍)="value">

內容三、整合技術(精靈圖、雪碧圖)

1.css sprites的原理:

1)將背景,按鈕背景等有規則的合併成一張背景圖,即將多張整合成一整張圖,然後用background-position來實現背景圖的定位技術。

1)通過整合來減少對伺服器的請求次數,從而提高頁面的載入速度;

2)通過整合來減少的體積;

1)邊切圖邊整合;

2)定位時避免bottom、right等,用具體的數值,為了避免當你的寬度或高度上擴充套件時出現位置的錯誤;

3)將小圖示預留足夠的空間,因為使用這些圖示元素通常會有大量的內容而且可能需要擴充套件的間距,以至於其他的可能會意外出現在本區域內;一般情況下,會將這些小圖示整合到檔案的最右側;

4)單張整合好的sprite在100kb以內;

5)按分類整合;

6)為了方便計算尺寸,一般情況會將sprites圖的座標計算成整數倍;

7)整合好的必須是背景透明的png或者gif。

拓展:滑動門技術

1)滑動門是乙個形象的稱呼,它利用css背景影象可層疊性,並允許彼此之上進行滑動來創造一些特殊動態效果;

2)通過滑動門技術,可以使css設計出來的導航選單具有傳統布局的影象效果與css布局高效擴充套件性。

三、瀏覽器相容

2.最早的瀏覽器:mosaic/netscape n**igator(網景領航者)(1994~2008)簡稱nn

3.五大瀏覽器核心:

•trident (mshtml) (三叉戟;三叉線;三齒魚叉)

•gecko (壁虎)

•presto ( 迅速的)

•webkit (safari核心,chrome核心原型,它是蘋果公司自己的核心,也是蘋果的safari瀏覽器使用的核心)

•blink (由google和opera software開發的瀏覽器排版引擎)

4.五大瀏覽器核心的代表作:

*gecko:代表作品mozilla firefox 是開源的,它的最大優勢是跨平台,能在microsoft windows、linux和macos x等主要作業系統上執行;

*webkit : 代表作品safari、chrome ,是乙個開源專案;

*presto : 代表作品opera ,presto是由opera software開發的瀏覽器排版引擎。它也是世界上公認的渲染速度最快的引擎;

*blink :由google和opera software開發的瀏覽器排版引擎,2023年4月發布。

5.為什麼會出現相容問題?

由於各大主流瀏覽器由不同的廠家開發,所用的核心架構和**也很難重和,這就為各種莫名其妙的bug(**錯誤)提供了溫床。再加上各大廠商出於自身利益考慮而設定的種種技術壁壘,都讓css應用起來比想象得要麻煩。瀏覽器的相容問題是我們必須去克服的。

6.css bug、css hack和filter

1)css bug:css樣式在各瀏覽器中解析不一致的情況,或者說css樣式在瀏覽器中不能正確顯示的問題稱為css bug;

2)css hack:css中,hack是指一種相容css在不同瀏覽器中正確顯示的技巧方法,他們都屬於個人對css**的非官方修改,或非官方的補丁,有些人更喜歡使用patch(補丁)來描述這種行為;css hack的弊端:會增加一些css**,從而增加瀏覽器的負擔;

3)filter表示過濾器的意思,它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則和宣告的方法;本質上講,filter是一種用來過濾不同瀏覽器的hack型別;

7.使用hack帶來的***:降低了css**的可讀性,增加了**的負擔;

8.設計css hack和filter通常有兩種方法:

1)一種是利用瀏覽器自身的bug,來隱藏或顯示樣式或宣告;

2)另一種是利用瀏覽器對css支援的不完善,如對某些規則或語法還沒有形成支援,來隱藏或顯示樣式。

9.css bug:

1)有邊框

2)div中間隙

hack1:將div與img寫在同一行上

hack2:將img轉為塊狀元素,新增宣告display:block;

3)雙倍浮向(雙倍邊距只有ie6會出現)

bug:當ie6及更低版本瀏覽器在解析時,會錯誤地把浮向邊界(margin)加倍顯示

hack:給浮動新增宣告:display:inline;

4)預設高度(ie6、ie7)

bug:在ie6及以下版本中,部分塊元素擁有預設高度(在16px左右;)

hack1:給元素新增宣告:font-size:0;

hack2:給元素新增宣告:overflow:hidden;

5)表單元素行高對齊不一致

bug:表單元素行高對齊方式不一致

hack:給表單元素新增宣告:float:left;

6)按鈕元素預設大小不一

bug:各瀏覽器中按鈕元素大小不一致

hack1: 統一大小/(用a標記模擬)

hack2:input外邊套乙個標籤,在這個標籤裡寫按鈕的樣式,把input的邊框去掉。

hack3:如果這個按鈕是乙個,直接把作為按鈕的背景圖即可。

7)百分比bug

bug:在ie6及以下版本中在解析百分比時,會按四捨五入方式計算從而導致50%加50%大於100%的情況。 (也會受系統影響) 

hack: 給右面的浮動元素新增宣告:

clear:right; 意思:清除右浮動;

clear:left:清除左浮動

clear:both:清除兩邊的浮動

8)滑鼠指標bug

bug:cursor屬性的hand屬性值只有ie9以下瀏覽器識別,其它瀏覽器不識別該宣告,cursor屬性的pointer屬性值ie6.0以上版本及其它核心瀏覽器都識別該宣告。

hack: 如統一某元素滑鼠指標形狀為手型,

應新增宣告:cursor:pointer

拓展:cursor:auto預設 

crosshair加號

text文字 

wait等待 

help幫助 

progress過程 

inherit繼承 

move移動 

ne-resize向上或向右移動

pointer手形

9)透明屬性相容其他瀏覽器寫法:opacity:value;(value的取值範圍0-1; 例:opacity:0.5; ) 

hack:

ie瀏覽器寫法:filter:alpha(opacity=value);取值範圍 1-100(整數)

10)li列表的bug

bug1:當父元素(li) 有float:left;子元素(a) 沒設定浮動的情況下會出現垂直bug;

hack:給父元素li和子元素a都設定浮動;

bug2:

當給li中的a轉成block;並且有height,並有float的,li中沒設定浮動會出現階梯顯示;

hack:同時給li加float和width:100%;

11)margin上下重疊

bug:當前元素(父元素裡面第乙個子元素)與父元素沒有設定任何浮動的情況下,設定margin-top後,會錯誤的把margin-top加在父級元素上

hack1:給父級元素新增overflow:hidden;(推薦使用) 

hack2:

給父元素或者子元素加浮動

12)margin bug

bug:當兩個上下排列的元素,上元素有margin-bottom:30px;下面元素有margin-top:20px;他們中間的距離不會疊加,而是會設定為較大的值

10.filter過濾器

1)_下劃線屬性過濾器:選擇器

當乙個屬性前面增加了乙個下劃線後,由於符合標準的瀏覽器不能識別帶有下劃線的屬性二忽略了這個宣告,但是在ie6以下低版本瀏覽器中會繼續解析這個規則

2)「*」、「+」屬性過濾器:選擇器

「*」、「+」過濾ie7及以下的瀏覽器

拓展:ie8瀏覽器的相容符號「\0」,用這個符號來進行hack技術(選擇器);

相容ie瀏覽器符號「\9」(選擇器)。

DAY8學習筆記

檔案操作的基本概念 開啟檔案的模式有三種純淨模式 r 預設的 w a。控制操作檔案內容格式的兩種模式 t 預設的 b。大前提 tb模式均不能單獨使用,必須與純淨模式結合使用。t文字模式 1.讀寫檔案都是以字串為單位的。2.只能針對文字檔案。3.必須指定encoding引數。b二進位制模式 1.讀寫檔...

java學習筆記day8

多型 定義 某一類事物的多種存在形式。例 動物中貓,狗。貓這個物件對應的型別是貓型別。貓 x new 貓 同時貓也是動物中的一種,也可以把貓稱為動物。動物 y new 貓 動物是貓和狗具體事物中抽取出來的父型別。父型別引用指向了子類物件。多型 可以理解為事物存在的多種體現形態。人 男人,女人。動物 ...

python學習筆記 day8

if 條件 語句if 條件 語句else 語句if 條件 語句elif 條件 語句else 語句python中使用elif代替else if,所以if語句的關鍵字是if elif else 需要注意的是 語句的縮排 python中沒有switch case語句 如果語句只有一條,可以寫在 if 後 ...