WEB前端第九課 div背景

2022-07-03 03:33:09 字數 1844 閱讀 3183

1.div+css布局

特徵① 可以定義文件中的分割槽或節(division/section)

② 可以把文件分割為獨立的、不同的部分,可以用作嚴格的組織工具

③ 是乙個塊級元素,它的內容會自動開始乙個新行

④ 一般通過 id 或 class 標記與css配合使用

常用到的css屬性:

width:數值、height:數值、background-color:顏色、float-left(是div不佔據一行)

2.background-color背景顏色

預設值是transparent(透明的)

當同時定義了背景影象和背景顏色時,背景影象將覆蓋背景顏色之上

顏色取值方式:

① 關鍵字,如red、blue等

② 16進製制,如#000000、#cccccc、#ff0000等

③ rgb(0,0,0)

④ rgba(0,0,0, .n),n為0~1,透明度

3.background-image背景

預設值是none(沒有)

元素背景佔據了元素的全部尺寸,包括內邊距和邊框,但不包括外邊距

通過url使用絕對或相對路徑指定,background-image:url("");

4.background-repeat背景是否重複

常用屬性:

repeat,預設值,background-image預設水平方向和垂直方向平鋪顯示

repeat-x,背景將在水平方向重複

repeat-y,背景將在垂直方向重複

no-repeat,背景將僅顯示一次

語法示例

body

5.background-size背景尺寸

length,設定背景的寬度和高度,第乙個值設定寬度,第二個值設定高度,如果只設定乙個值,則第二個值會被設定為「auto」

percentage,以父元素的百分比來設定的寬度和高度,後文同上

cover,把背景擴充套件至足夠大,以是背景完全覆蓋背景區域,背景某些部分也許無法完全顯示在背景區域中

contain, 把擴充套件至最大尺寸,以使其寬度和高度完全適應內容區域,背景區域某些部分可能無法完全覆蓋

6.background-position背景位置

position是相對於外部容器而言,非整個頁面

屬性值書寫方式:

② 使用百分比定義,第乙個值定義水平方向,第二個值定義垂直方向,左上角是「0% 0%」,右下角是「100% 100%」

③ 使用具體數字定義,第乙個值定義水平方向,第二個值定義垂直方向,左上角是「0px 0px」

屬性特點:

① position的預設值為區域的左上角,即0點座標

② 以上三種方式,如果僅定義了乙個值,則另乙個值為居中(center或50%)

③ 以上三種方式可以混合搭配使用

7.background-attachment背景是否隨內容滾動

屬性值:

① scroll,預設值,隨頁面其餘部分的滾動而移動

② fixed,頁面滾動時,背景不動

body

8.background簡寫

background 簡寫屬性可以在乙個宣告中設定所有的背景屬性。

可以設定屬性如下:

background-color

background-image

background-repeat

background-attachment

background-position

background-size

如果不設定其中某個值,也不會出問題,自動取預設值

在書寫屬性值時,沒有嚴格順序要求,建議按照上文列表順序依次設定

第九課 變數

任務與 修改 沒有定義變數r,在第四行float r1,r2之後加上r就可以 include include intmain 閱讀程式 閱讀下面的程式,在閱讀過程中,請為每乙個變數畫出乙個方框,代表對應的記憶體空間。隨著閱讀,標明變數的變化過程,達到讀懂程式的目的。include intmain 圖...

C語言第九課

主要內容 高階指標 結構體指標 一 結構體指標 指向結構體變數的指標叫做結構體指標 typedef struct student student student stu student p stu student 結構體型別的指標 型別 p 結構體指標變數 變數名 結構體訪問成員變數 示例 type...

第九課 VBO索引

到目前為止,我們在建立vbo時總是重複儲存三角形公共邊的頂點。本課將介紹索引。索引是通過索引緩衝 index buffer 來實現的頂點復用。索引緩衝儲存的是整數 每個三角形有三個整數索引,分別指向各種屬性緩衝 attribute buffer 頂點位置 顏色 uv座標 其他uv座標 法線緩衝法線等...