CSS背景及列表

  • 背景顏色
    background-color:顏色|transparent(默認(rèn))

    1.transparent是全透明黑色(black)的速記法垛叨,類似rgba(0伦糯,0,0,0)這樣的值
    2.顏色值(顏色名 | RGB | 十六進(jìn)制)
    3.背景區(qū)包括內(nèi)容敛纲、內(nèi)邊距(padding)和邊框喂击、不包含外邊距(margin)
    4.如果不給邊框設(shè)置顏色,那邊框顏色默認(rèn)=文本的顏色
    

    RGBA 顏色值得到以下瀏覽器的支持:IE9+淤翔、Firefox 3+翰绊、Chrome、Safari 以及 Opera 10+旁壮。

  • 背景圖片
    background-image:URL | none(默認(rèn))

      1.URL地址可以是相對(duì)地址也可以是絕對(duì)地址
      2.元素的背景占據(jù)了元素的全部尺寸监嗜,包括內(nèi)邊距和邊框,但不包括外邊框
      3.默認(rèn)地抡谐,背景圖像位于元素的左上角裁奇,并在水平和垂直方向上重復(fù)
    
  • 背景圖片重復(fù):background-repeat 是設(shè)置背景圖片的重復(fù)方式
    repeat是默認(rèn)的重復(fù),全部重復(fù)麦撵;
    no-repeat是不重復(fù)框喳;
    repeat-x是水平重復(fù),
    repeat-y是垂直重復(fù)厦坛;
    inherit(透明)


    image.png
  • 背景圖片顯示方式
    background-attachment:scroll(默認(rèn))/fixed

    scroll 默認(rèn)值 背景圖片隨滾動(dòng)條滾動(dòng)
    fixed 當(dāng)頁(yè)面的其余部分滾動(dòng)時(shí) 背景圖片不會(huì)移動(dòng)
    Internet Explorer6-11版本都不支持屬性值"inherit"五垮。
    
image.png
image.png
    所有瀏覽器都支持 background-position 屬性。
    background-position屬性值可以是百分比杜秸、關(guān)鍵字放仗、單位是像素 (0px 0px) 或任何其他的 CSS 單位。
列表項(xiàng)標(biāo)記

設(shè)置列表項(xiàng)的標(biāo)記樣式類型:
list-style-type:關(guān)鍵字|none(無(wú)標(biāo)記)

  • 無(wú)序列表:none(無(wú)標(biāo)記)|disc(默認(rèn)實(shí)心點(diǎn))|circle(空心圓點(diǎn))|square(實(shí)心方塊)

  • 有序列表
    none無(wú)標(biāo)記 | decimal 從1開(kāi)始的整數(shù) | lower-roman小寫羅馬數(shù)字 | upper-roman大寫羅馬數(shù)字 | lower-alpha小寫英文字母 | upper-alpha大寫英文字母

  • 使用圖片設(shè)置列表項(xiàng)標(biāo)記
    list-style-image:URL|none

ul  li{
list-style-image:url(圖片地址)
}
  • 列表項(xiàng)標(biāo)記位置
    list-style-position:inside|outside(默認(rèn)值)
    inside:列表項(xiàng)目放在文本以內(nèi)撬碟,且環(huán)繞文本根據(jù)標(biāo)記對(duì)齊诞挨。
    outside:默認(rèn)值,列表項(xiàng)目標(biāo)記放在文本意外呢蛤,且環(huán)繞文本不根據(jù)標(biāo)記對(duì)齊惶傻。
  • 列表樣式縮寫


    image.png

總結(jié)

背景樣式

image.png
image.png

image.png

image.png

列表樣式:

image.png
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市其障,隨后出現(xiàn)的幾起案子银室,更是在濱河造成了極大的恐慌,老刑警劉巖励翼,帶你破解...
    沈念sama閱讀 217,509評(píng)論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蜈敢,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡汽抚,警方通過(guò)查閱死者的電腦和手機(jī)抓狭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)造烁,“玉大人否过,你說(shuō)我怎么就攤上這事午笛。” “怎么了苗桂?”我有些...
    開(kāi)封第一講書人閱讀 163,875評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵药磺,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我誉察,道長(zhǎng),這世上最難降的妖魔是什么惹谐? 我笑而不...
    開(kāi)封第一講書人閱讀 58,441評(píng)論 1 293
  • 正文 為了忘掉前任持偏,我火速辦了婚禮,結(jié)果婚禮上氨肌,老公的妹妹穿的比我還像新娘鸿秆。我一直安慰自己,他們只是感情好怎囚,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布卿叽。 她就那樣靜靜地躺著,像睡著了一般恳守。 火紅的嫁衣襯著肌膚如雪考婴。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書人閱讀 51,365評(píng)論 1 302
  • 那天催烘,我揣著相機(jī)與錄音沥阱,去河邊找鬼。 笑死伊群,一個(gè)胖子當(dāng)著我的面吹牛考杉,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播舰始,決...
    沈念sama閱讀 40,190評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼崇棠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了丸卷?” 一聲冷哼從身側(cè)響起枕稀,我...
    開(kāi)封第一講書人閱讀 39,062評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎谜嫉,沒(méi)想到半個(gè)月后抽莱,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,500評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡骄恶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評(píng)論 3 335
  • 正文 我和宋清朗相戀三年食铐,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片僧鲁。...
    茶點(diǎn)故事閱讀 39,834評(píng)論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡虐呻,死狀恐怖象泵,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情斟叼,我是刑警寧澤偶惠,帶...
    沈念sama閱讀 35,559評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站朗涩,受9級(jí)特大地震影響忽孽,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谢床,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評(píng)論 3 328
  • 文/蒙蒙 一兄一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧识腿,春花似錦出革、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,779評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至成箫,卻和暖如春展箱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背蹬昌。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,912評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工析藕, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人凳厢。 一個(gè)月前我還...
    沈念sama閱讀 47,958評(píng)論 2 370
  • 正文 我出身青樓账胧,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親先紫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子治泥,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評(píng)論 2 354