CSS基礎入門06

2021-09-22 19:58:03 字數 1859 閱讀 6880

一.  定位:

定位中的z-index:

作用:設定頁面中元素的層級關係。

取值:正整數。

二.  html中標籤的巢狀規則:

行內元素:

塊級元素:

標籤之間是不能夠隨意巢狀的。

如果一定要巢狀,要滿足下面幾條:

1.0行內元素只能包含行內元素

2.0塊級元素可以包含所有的行內元素和部分塊級元素。

3.0p標籤,h標籤都不能包含塊級元素

文字一文字二

判斷:這樣做可以嗎?

(看我黑魔法) 

三.  精靈圖:

1  什麼是精靈圖:

2  為什麼要有精靈圖:

最早的時候網速十分有限,為了提公升使用者的體驗我們會將一張大圖分解成為多張小圖來提高頁面的開啟速度。但是網速得到提公升,為了能夠讓伺服器承載更多的請求,我們要減少瀏覽器對伺服器的請求,最直接的方式,就是將多張小的放在一張大圖上。從而減輕伺服器的壓力。而將多張小圖放在一張大圖上的操作就叫做精靈圖,也可以叫做雪碧圖,雪碧技術。css sprite.

3  精靈圖的使用:

一張大的上有很多小的,那麼如何將這個小的拿出來呢?

1.0如果我們需要的一張在精靈圖,必須要了解這個的大小,以級在精靈圖上的位置。

比如:我們要**上面的阿里旺旺的圖示,得到了寬高為60*60,得到圖示所在的位置:0 * 133.

比如:我們要html頁面上放了乙個div,寬高為60*60

4  製作精靈圖:

1.0精靈圖必須是一些小的。

2.0精靈圖的多個小圖之間一定要留有足夠的間隙

3.0精靈圖的大小一定要大於所有中最大小的那個

4.0完成精靈圖以後一定要在精靈圖的下方留足夠的空隙,方便將來再次新增其它的精靈圖。

四.  綜合練習:京東首頁(整站的練習)

1  設計師設計出來的。

準備元素

jd:將來這個凡是與這個**相關的檔案都放在乙個叫jd的文字夾中

css:所有的css檔案放在css資料夾中

js:所有的js檔案都放在js資料夾中

index:**的首頁是index.html;

3  決定頁面的開發方式:

從上到下依次編寫:符合我們的認知。(選擇)

從模組化的角度來分析:符合有經驗的開發人員。

4  css的初始化:(css reset)

每個瀏覽器有自己不同解析標籤的方式:為了能夠讓不同的瀏覽器顯示的頁面效果是一樣的,我們需要清除瀏覽器的預設樣式:

* //我們讓你成為歷史

css的初始化:

1.0清除標籤的margin和padding:

html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img

2.0清除img的邊框

img ;

3.0清除li標籤之前的小點

ul4.0給頁面設定乙個統一的字型大小和顏色,還要設定body的背景顏色。

body

5.0清除浮動

.clearfix:after

6.0a標籤設定字型顏色,去掉下劃線,以及a:hover

a a:hover

7.0設定浮動:

.fl

.fr

5  開始進行開發:

通欄:預設佔瀏覽器的一整行。

版心:頁面中用來存放內容的部分的固定寬度。

Opencv基礎入門筆記06

1.影象對比度和亮度 首先,我們先說影象的變換,可以分成以下兩類 1 畫素變換 在畫素變換中,僅僅根據輸入的畫素值 有時可能加上某些全域性資訊或者引數 來計算相應的輸出畫素值。該類變換的常見方法有亮度和對比度調整 顏色校正和顏色變換等等。該類變換可以用下面的通用變換公式來表示。f x,y 表示原影象...

CSS入門基礎

一 選擇器詳解 下 符合選擇器部分 標籤指定式選擇器 交集選擇器 語法 標籤名 其他選擇器 示例 段落文字1 段落文字2 效果 段落文字1顯示紅色 結論 標籤指定式選擇器中的兩個選擇器是既 又的關係,如示例中,既是p標籤,又必須class屬性為content的元素被選中。後代選擇器 語法 選擇器1 ...

CSS基礎入門

css是w3c協會 全球資訊網聯盟 為了彌補html在顯示屬性設定上面的不足而制定的一套擴充套件樣式標準。css的基本規則是 選擇符。css選擇器常用的是標記選擇器 類別選擇器和id選擇器,使用選擇器可對不同的html標籤進行控制,從而實現各種效果。標記選擇器是直接對標籤名稱進行選擇,選擇符為標籤名...