網頁CSS樣式表設計十條技巧3

2021-04-12 20:34:21 字數 577 閱讀 2214

7.將塊元素居中

假設你的**使用了固定寬度的布局,所有的內容置於螢幕**,可以使用

以下的css:

以下是引用片段:

#content

你可以把html的body之內任何專案置於當中,該專案將自動獲得相等的左右邊界值從而保證了居中顯示。不過,這在ie6之前版本的瀏覽器中仍然有問題,將不會居中,因此必須修改如下:

以下是引用片段:

body

#content

對body的設定將導致主體內容居中,但是連所有的文字也居中了,這恐怕不是你想要的效果,為此#content 的div還要指定乙個值:text-align: left

8.使用css實現垂直居中

垂直居中對**來說是小菜一碟,只需指定單元格為vertical-align: middle即可,但這在css布局中不管用。假設你將乙個導航選單的高度設為2em,然後在css中指定垂直對齊的規則,文字還是會被排到盒的頂部,根本沒有什麼區別。

要解決這一問題,只需將盒的行高設為與盒的高度相同即可,以這個例子來說,盒高2em,那麼只需在css中再加入一條:line-height: 2em 就可實現垂直居中了!

網頁CSS樣式表設計十條技巧1

1.css 字型簡寫規則 當使用css定義字型時你可能會這樣做 以下是引用片段 font size 1em line height 1.5em font weight bold font style italic font variant all caps font family verdana,s...

網頁 CSS樣式表

昨天,我主要是對css樣式表進行了一下複習。css樣式表主要有三類 內聯樣式表 內嵌樣式表 外部樣式表,我們平時一般使用第二種樣式表。選擇器主要包括 標籤選擇器 class選擇器 id選擇器 復合選擇器等。在格式與布局中,主要學習了 position fixed鎖定位置,position absol...

HTML靜態網頁 css樣式表

css cascading style sheet,疊層樣式表 作用是美化html網頁。注釋區域 此為注釋語法 一 樣式表 一 樣式表的分類 1.內聯樣式表 和html聯合顯示,控制精確,但是可重用性差,冗餘較多。例 內聯樣式表 2.內嵌樣式表 作為乙個獨立區域內嵌在網頁裡,必須寫在head標籤裡面...