html css快速入門教程(5)

2022-08-19 19:00:14 字數 1951 閱讀 1268

1.畫盒子1 2.畫盒子2 3.京東特色購物 4.京東發現好貨 5.京東玩3c

通過使用 position 屬性,我們可以選擇 3 種不同型別的定位,這會影響元素框生成的方式。

relative

相對定位的參照物是原來自己的位置,元素框偏移某個距離。元素仍保持其未定位前的形狀,它原本所佔的空間仍保留。

相對定位會按照元素的原始位置對該元素進行移動。

樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。

樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。

absolute

絕對定位的參照物是有定位屬性的上級元素,一層一層往外找定位的參照物,直到body

通過絕對定位,元素可以放置到頁面上的任何位置。

下面的標題距離頁面左側 100px,距離頁面頂部 150px。

fixed

固定定位的參照物是瀏覽器可視區域

一些文字。

更多的文字。

1、京東固定定位 2、網易欄目 3、**輪播圖

相鄰選擇器可以選擇緊跟其後的相鄰元素,注意:相鄰選擇器用+號來連線

當幾個元素有共同屬性的時候,可以使用多元素選擇器,注意:選擇多個元素的時侯,用逗號隔開

後代選擇器作用于父元素下面的所有子元素

一江春水向東流

飛流直下三千尺

床前明月光

子元素選擇器作用于父元素的子元素,子元素選擇器與後代選擇器的區別在於後代選擇器可以作用於子孫元素,而子元素選擇器只能作用於它的子元素

一江春水向東流

飛流直下三千尺

床前明月光

e[attr] 匹配所有具有att屬性的e元素,不考慮它的值,例如: input[name],只要有name屬性的input元素都會被選中

e[attr = val] 匹配所有attr屬性值等於val的e元素 input[id=ipt2] 屬性值一般不加引號

e[attr ~= val],"~"包含的意思,只要屬性值包含了val的e元素都會被選中

title 屬性中包含單詞 "flower" 的會獲得黃色邊框。

注釋:對於 ie8 及更早版本的瀏覽器中的 [attribute~=value],

必須宣告 。

e[attr = val],""以某個值開頭的意思,只要屬性值以val開頭的e元素都會被選中

第乙個 div 元素。

第二個 div 元素。

第三個 div 元素。

這是段落中的文字。

e[attr = $val],"$"以某個值結尾的意思,只要屬性值以val開頭的e元素都會被選中

第乙個 div 元素。

第二個 div 元素。

第三個 div 元素。

這是段落中的文字。

原生js社群

未訪問鏈結(link)、滑鼠放上狀態(hover)、已訪問鏈結(visited)、當前活動鏈結(active)。

原生js

上述**中,對a元素使用:before 和 :after偽選擇器,使用這類選擇器對時候,通過設定content屬性對值可以指定耀插入的內容。這個屬性比較特別,只能跟偽選擇器一起使用。after表示在a元素內容之前插入,before表示在a元素內容之後插

html css快速入門教程(4)

1.網易考拉下拉列表 2.愛奇藝新聞 3.ps濾鏡選單 4.愛奇藝列表 網頁設計,首先要做好整體的布局,網頁布局就是將不同的元素按照一定的規則放置在瀏覽器的不同位置,因此會經常用到一些內容 填充 邊框 邊界等屬性,html布局元素經過不同的巢狀與位置的擺放,就類似於日常生活中的用盒子裝東西,把每乙個...

dart快速入門教程 (5)

語法 返回值型別 函式名 引數型別 引數1,引數型別 引數2,舉例 void main num sum int a,int b 引數型別是可以省略的 void main sum a,b 如果沒有指定返回值,預設返回null void main sum a,b 支援箭頭函式 void main 1.可...

html css零基礎入門教程

html即超文字標記語言 hyper text markup language 是用來描述網頁的一種語言。超文字標記語言的結構包括 頭 部分 外語 head 和 主體 部分 外語 body 其中 頭 部提供關於網頁的資訊,主體 部分提供網頁的具體內容。標記語言是一套標記標籤 markup tag h...