最常用和實用的CSS技巧

2022-09-25 14:27:10 字數 830 閱讀 1655

設定水平居中

複製**

**如下:

div#container

.控制位置:絕對位置,相對位置

假如有兩個div

複製**

**如下:

將重要元素放置在螢幕**

如果你希望將您想要的東西放在最**,可以使用以下css:

複製**

**如下:

div.popup

div.popup

您必須明確的指定寬度和高度,再把top和left屬性設為他們的一半,這樣就可以是這個部分回到螢幕的中心。

5.可以重複利用的規則

複製**

**如下:

.left

.right

img .left

img .right

設定自己的css樣式表,就可以在您需要的時候直接的新增標記即可。

6. 解決ie6 的浮動元素的雙倍邊距問題

對乙個div設定了float:left 和 margin-left:100px 那麼在ie6中,這個bug就會出現。您只需要多設定乙個display即可,**如下:

複製**

**如下:

div

7.簡單的導航選單

在您的設計中預設乙個導航欄是非常有益的。可以讓別人對你網頁的主要內容有乙個大致的了解。第一tboxclu次來的xhtml:

複製**

代程式設計客棧碼如下:

《程式設計客棧li>站長查詢工具

本文標題: 最常用和實用的css技巧

本文位址: /web/css/29113.html

實用的CSS技巧

盒陰影 box shadow 屬性幾乎可以運用在任何元素上,它們看起來都非常好看。下面這段 主要聚焦內層陰影的設計。mydiv下面介紹一段外層陰影 設計,注意,裡的第三個引數表示模糊距離 blur distance 而第四個引數表示鋪開的 spread 距離。關於這些值的設計,你可以前往 w3sch...

CSS實用小技巧

1 不要使用過小的做背景平鋪。這就是為何很多人都不用 1px 的原因,這才知曉。寬高 1px 的平鋪出乙個寬高 200px 的區域,需要 200 200 40,000 次,占用資源。2 無邊框。推薦的寫法是 border none 哈哈,我一直在用這個。border 0 只是定義邊框寬度為零,但邊框...

CSS實用技巧

做豆瓣的時候模仿豆瓣的正在熱映的列表做的乙個樣式,效果及 如下 最主要的就是要在在父元素設定white space nowrap 來保證子元素強制不換行 之前我們寫這樣的了能就是為子元素設定width 100 height 100 其實也可以使用如下的寫法 parent 也就是說子元素不設定高度和寬...