css樣式設計

1.行內元素（、文字）水平居中

通過給父元素設定text-align:center

html**：

<
body
>
<
div 
class
="txtcenter"
>我想要在父容器中水平居中顯示。
div>
body
>
css**：
<
style
>
.txtcenter
style
>

設定「左右margin」值為「auto」來實現

html**：

<
body
>
<
div>我是定寬塊狀元素，哈哈，我要水平居中顯示。
div>
body
>
css**：
<
style
>
divstyle
>

1）加入 table 標籤

利用table標籤的長度自適應性---即不定義其長度也不預設父元素body的長度（table其長度根據其內文字長度決定），因此可以看做乙個定寬度塊元素，然後再利用定寬度塊狀居中的margin的方法，使其水平居中

html**：

<
div>
<
table
>
<
tbody
>
<
tr><
td>
<
ul>
<
li>我是第一行文字
li>
<
li>我是第二行文字
li>
<
li>我是第三行文字
li>
ul>
td>
tr>
tbody
>
table
>
div>
css**：
<
style
>
table
style
>

顯示），然後使用text-align:center

html**：

<
body
>
<
div 
class
="container"
>
<
ul>
<
li><
a href
="#"
>1
a>
li>
<
li><
a href
="#"
>2
a>
li>
<
li><
a href
="#"
>3
a>
li>
ul>
div>
body
>
css**：
<
style
>
.container
/*margin:0;padding:0（消除文字與div邊框之間的間隙）
*/.container ul
/*margin-right:8px（設定li文字之間的間隔）
*/.container li
style
>

通過給父元素設定 float ，然後給父元素設定 position:relative和left:50%，子元素設定position:relative 和left: -50%來實現水平居中

<

div 
class
="outer"
>
<
div 
class
="wrap"
>
<
div 
class
="inner"
>
div>
div>
div>
css**為
4.父元素高度確定的單行文字垂直居中
設定父元素的 height 和 line-heigh高度一致來實現
<

div 
class
="container"
>
hi,imooc!
div>
css**：
<
style
>
.container
style
>
5.父元素高度確定的多行文字、垂直居中

使用插入 table(包括tbody、tr、td)標籤，同時設定vertical-align：middle
html**：

<
body
>
<
table
><
tbody
><
tr><
td class
="wrap"
>
<
div>
<
p>看我是否可以居中。
p>
div>
td>
tr>
tbody
>
table
>
body
>
css**：
table td
 
css樣式設計 基本樣式
盒子陰影 box shadow 盒子陰影 水平方向上陰影偏移量 垂直方向上陰影偏移量 模糊的程度 正值 陰影的外延伸 數值正負皆可 陰影的顏色 inset box shadow 0px 0px 10px red inset 顏色 表示顏色的方式 顏色名，英文 rgb red green blue 0...
CSS樣式設計 一
css的樣式規則 selector 其中selector是乙個css的選擇器,property為乙個css的屬性 例如 1 標籤為div的字型為紅色,字型為16px div 2 id值為div的字型為紅色,字型為16px div 3 class值為div的字型為紅色,字型為16px div 在htm...
css背景樣式css背景樣式
css背景樣式 css背景樣式 序號中文說明 標記語法 1背景顏色2背景 3背景重複 4背景固定 5背景定位 6背影樣式 1 背景顏色 background color 語法 說明 引數取值和顏色屬性一樣 注意 在 html當中，要為某個物件加上背景色只有一種辦法，那就是先做乙個 在 中設定完背景色...