国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運營 > CSS常見樣式

CSS常見樣式

時間：2023-09-26 10:30:01 | 來源：網(wǎng)站運營

時間：2023-09-26 10:30:01 來源：網(wǎng)站運營

CSS常見樣式：

一、列表樣式

1、list-style

/*去掉默認的符號。這個常用*/ul, ol { list-style: none;}/*列表方形符號*/ul { list-style: square;}/*符號在盒模型內(nèi)*/ul { list-style: inside; /*outside*/}/*可以用圖形符號*/ul { list-style: url(https://i.loli.net/2019/11/08/4vriKTQR6sXnFBW.png)}

二、背景樣式（background）

1、background-color

.header{ background-color: rgba(0, 0, 0, 0.3);}

2、background-image

.content { background-image: url(../images/bg.png);}.header { background-image: linear-gradient(#ddd, #fff); /* 漸變背景*/}

3、background-repeat

4、background-position

5、background-size

6、CSS3 background-clip

7、其他寫法

.box{ background: #ccc url(images/bg.png) center no-repeat;}.box{ background: #ccc url(images/bg.png) center no-repeat, #ccc url(images/bg2.png) 20px 20px no-repeat;}

三、邊框樣式（border）

border: 1px solid red;

  1. solid 實線
  2. dotted 點線
  3. dashed 虛線
.list { border: 1px solid #ddd;}.list > .item { border-bottom: 1px solid #ddd; /* 下邊框 */}

1、border-radius

.box{ border-radius: 4px; border-radius: 4px 8px 16px 32px; /*左上 右上右下左下*/}寬高相等，border-radius為寬高的一半以上

.box{ width: 100px; height: 100px; border-radius: 50%; border-radius: 50px;}.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; }.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; border-right-color: red; }.box { width: 0; height: 0; border: 50px solid transparent; border-top-color: red;}.box { width: 100px; height: 200px; background: red; border-radius: 50%;}.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red;}.box { width: 0; height: 0; border: 50px solid transparent; border-radius: 50%; border-top-color: red; border-right-color: red;}

三、表格樣式

用于設(shè)置表格邊框是分開還是合并。

  1. collapse 合并
  2. separate 分開
table { border-collapse: collapse;}

四、行高（line-height）

  1. line-height: 1.5; 當(dāng)前元素font-size的1.5倍。該倍數(shù)會繼承給孩子。推薦的用法。
  2. line-height: 20px; 占據(jù)高度固定值
  3. line-height: 150%; 當(dāng)前元素font-size的1.5倍。會計算具體值，把具體值繼承給孩子。
body { font: 14px/1.4 Arial;}注意：文字占據(jù)的高度不是由font-size決定的，而是由line-height決定的。

五、對齊（vertical-align）

  1. 父元素的基線由父元素最后一個行盒的基線決定，如果父親為空那基線就是下margin
  2. baseline 使元素的基線與父元素的基線對齊
  3. middle 使元素的中部與父元素的基線加上父元素x高度的一半對齊。
  4. top 使元素及其后代元素的頂部與整行的頂部對齊。
  5. bottom 使元素及其后代元素的底部與整行的底部對齊。


關(guān)鍵詞：樣式

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉