2. css基本樣式

  • 背景
  • 文本
  • 字體
  • 鏈接
  • 列表
  • 表格
  • 輪廓

1. 背景

說明:css允許應(yīng)用純色作為背景宣脉,也允許使用背景圖片創(chuàng)建相當(dāng)復(fù)雜的效果霜第。主要的背景屬性如下

屬性 描述
background-attachment 背景圖片是否固定或者隨著頁面的其它部分滾動(dòng)
background-color 設(shè)置元素的背景顏色
background-image 把圖片設(shè)置為背景
background-position 設(shè)置圖片背景的起始位置
background-repeat 設(shè)置背景是否以及如何重復(fù)
background-size 規(guī)定背景圖片的尺寸
background-origin 規(guī)定背景圖片的定位區(qū)域
background-clip 規(guī)定背景的繪制區(qū)域

(1) background

body{
  background: darkgray;
}

p{
  background: greenyellow;
  width: 200px;
  padding: 10px;
}
<body>
  <p>當(dāng)元素未指定背景顏色時(shí)侈贷,背景顏色不可被繼承;當(dāng)指定時(shí)葫隙,采用自身定義的背景顏色</p>
</body>

拓展:小程序中背景顏色可以被繼承且p便簽的寬度默認(rèn)會(huì)包裹自身统屈,p標(biāo)簽設(shè)置寬度不起作用;html中背景顏色不可被繼承且p便簽的寬度默認(rèn)會(huì)超出自身需自定義寬度撑毛。
(2) background-image

body{
  background-image: url("icon_nav_study.png");
}

p{
  background-image: url("icon_nav_study.png");
  width: 200px;
}
<body>
  <p>當(dāng)元素未指定背景顏色時(shí)书聚,背景圖片不可被繼承</p>
</body>

拓展:小程序的本地資源無法通過 WXSS 獲取。background-image可以使用網(wǎng)絡(luò)圖片,或者 base64雌续,或者使用<image/>標(biāo)簽
(3) background-repeat
說明:默認(rèn)允許重復(fù)鋪滿全屏斩个。可設(shè)置為不允許重復(fù)驯杜;允許重復(fù)且鋪滿全屏萨驶;允許在X軸重復(fù)鋪滿;允許在Y軸重復(fù)鋪滿艇肴。


background-repeat.PNG

(4) background-position
eg1:

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: right;
}

等同于

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: right center;
}

說明:第一個(gè)參數(shù)代表圖片在視圖的右邊腔呜,第二個(gè)參數(shù)代表圖片從自身中間(默認(rèn))顯示。
eg2:數(shù)值

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
}

說明:圖片在視圖左上角位置再悼。

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: 100px 100px;
}

說明:圖片左邊距視圖100px的距離核畴,上邊距視圖100px的距離。
eg2:百分比

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-position: 30% 50%;
}

說明:圖片左邊距視圖寬30%的距離冲九,上邊距視圖高50%的距離谤草。
(5) background-attachment

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
}
<body>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
  <p>圖片背景是否隨內(nèi)容滾動(dòng)</p>
</body>

說明:默認(rèn)圖片背景隨內(nèi)容滾動(dòng)。
(6) background-size

body{
  background-image: url("icon_nav_study.png");
  background-repeat: no-repeat;
  background-size: 500px 500px;
}

說明:設(shè)置背景圖片大小為500px * 500px莺奸。
(7) background-clip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相關(guān)屬性</title>
    <style>
        div{
            background-color: #FF8C00;
            border: dashed 10px green;
            padding: 10px;
        }
        .div1{
            background-clip: content-box;/*背景只覆蓋內(nèi)容區(qū)域*/
        }
        .div2{
            margin-top: 40px;
            background-clip: padding-box; /*背景覆蓋內(nèi)容區(qū)域和內(nèi)邊距*/
        }
        .div3{
            margin-top: 40px;
            background-clip: border-box;/*背景覆蓋內(nèi)容區(qū)域丑孩、內(nèi)邊距和邊框*/
        }
    </style>
</head>
<body>
    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>
</body>
</html>
background-clip.png

(8) background-origin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景相關(guān)屬性</title>
    <style>
        div{
            background-color: #FF8C00;
            border: dashed 10px green;
            padding: 10px;
            background-image: url("jokul.jpg");
            background-repeat: no-repeat;
        }
        .div1{
            background-clip: content-box;/*背景只覆蓋內(nèi)容區(qū)域*/
            background-origin: content-box;/*背景圖片從內(nèi)容區(qū)域左上角開始*/
        }
        .div2{
            margin-top: 40px;
            background-clip: padding-box; /*背景覆蓋內(nèi)容區(qū)域和內(nèi)邊距*/
            background-origin: padding-box;/*背景圖片從內(nèi)邊距左上角開始*/
        }
        .div3{
            margin-top: 40px;
            background-clip: border-box;/*背景覆蓋內(nèi)容區(qū)域、內(nèi)邊距和邊框*/
            background-origin: border-box;/*背景圖片從邊框左上角開始*/
        }
    </style>
</head>
<body>
    <div class="div1">示例1</div>
    <div class="div2">示例2</div>
    <div class="div3">示例3</div>
</body>
</html>

background-origin.png

示例:在一個(gè)元素中顯示多個(gè)背景圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在一個(gè)元素中顯示多個(gè)背景圖片</title>
    <style>
        div{
            width: 350px;
            height: 200px;
            background-image: url("../img/11.png"),url("../img/crab.png");/*設(shè)置多個(gè)背景圖片*/
            background-repeat: repeat-x,no-repeat;/*第一張?jiān)趚軸重復(fù)灭贷,第二張不重復(fù)*/
            background-position: 100%,100%,center,center;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
多個(gè)背景圖片.png

2. 文本

說明:css文本屬性定義文本外觀温学,可改變文本的顏色、字符間距甚疟、對齊文本仗岖、裝飾文本、對文本縮進(jìn)等览妖。常用的屬性有文本的顏色轧拄、對齊方式、對文本縮進(jìn)讽膏。

屬性 描述
color 設(shè)置文本顏色
direction 設(shè)置文本方向
line-height 設(shè)置行高
text-align 設(shè)置元素中文本的水平對齊方式
text-decoration 規(guī)定添加到文本的修飾
text-indent 設(shè)置文本首行縮進(jìn)
text-transform 設(shè)置文本的大小寫
unicode-bidi 設(shè)置文本方向
white-space 設(shè)置元素中空白的處理方式
letter-spacing 設(shè)置字符間距
word-spacing 設(shè)置字間距
word-wrap 規(guī)定文本的換行規(guī)則
text-shadow 向文本添加陰影

(1) color

body{
  color: red;
}
h1{
   color: blue;
}
<body>
  <p>顏色可被繼承</p>
  <h1>采用元素指定顏色</h1>
</body>

(2) text-aligen : 左中右

p{
  color: red;
  text-align: center;
}
<body>
  <p>對齊方式</p>
</body>

說明:小程序中p標(biāo)簽設(shè)置對齊方式未起作用檩电。
(3) text-indent
eg1:數(shù)值

h1{
  text-indent:  -2em;
  padding-left: 2em
}

p{
  padding-left: 2em
}
<body>
  <div>
    <h1>標(biāo)題</h1>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
    <p>文本</p>
  </div>
</body>

eg2:百分比

h1{
  text-indent:  10%;
}

(4) text-transform:元素中字母的處理

#p1{
  text-transform: capitalize;
}
#p2{
  text-transform: lowercase;
}
#p3{
  text-transform: uppercase;
}
<body>
  <p id="p1">tHis iS my pagE</p>
  <p id="p2">thIs Is mY pAGe</p>
  <p id="p3">this Is mY pAGe</p>
</body>

說明:capitalize表示首字母大寫。
(5) text-shadow:為文本添加陰影
eg1:基本使用

p{
  text-shadow: 20px,20px,2px,#FF0000;
  color: black;
  font-size: 40px;
  font-weight: bold;
  font-family: 宋體;
}
<body>
  <p>陰影效果</p>
</body>

說明:text-shadow: length,length,length,color;第一個(gè)參數(shù)為陰影距當(dāng)前文本左邊的距離(陰影離開文字橫向的距離)府树,第二個(gè)參數(shù)為陰影距當(dāng)前文本上邊的距離(陰影離開文字縱向的距離)俐末,第三個(gè)參數(shù)為浮雕效果的清晰度(陰影模糊程度),第四個(gè)參數(shù)為陰影顏色挺尾。
eg2:可設(shè)置多重陰影效果

text{
  text-shadow: -10px -10px 1px red,
                10px 10px 3px green,
                25px 25px 1px blue,
                45px 45px 5px yellow;
  color: black;
  font-size: 40px;
  font-weight: bold;
  font-family: 宋體;
}
<view>
  <text>為文字添加陰影</text>
</view>

(6) 文本換行

  • word-wrap:規(guī)定文本的換行規(guī)則
p{
  width: 50px;
  word-wrap: normal;
}
<body>
  <p>這是測試換行這是測試換行這是測試換行這是測試換行這是測試換行</p>
  <p>This is a test This is a test This is a test This is a test This is a test</p>
</body>

說明:英文單詞換行時(shí)不會(huì)被拆分鹅搪,能夠保證單詞的完整性。

  • word-break:文本自動(dòng)換行
    normal:使用瀏覽器的自動(dòng)換行規(guī)則
    keep-all:只能在半角遭铺、空格和連字符處進(jìn)行換行
    break-all:強(qiáng)制換行丽柿,英文將被拆分

3. 字體

說明:css字體屬性定義文本的字體系列恢准、字體、大小甫题、加粗馁筐、風(fēng)格和變形。

屬性 描述
font-family 設(shè)置字體系列
font-size 設(shè)置字體尺寸
font-style 設(shè)置字體風(fēng)格
font-variant 以小型大寫字體或正常字體顯示文字
font-weight 設(shè)置字體粗細(xì)
p{
  font-family: fantasy;
  font-size: 40px;
}
<body>
  <p>字體屬性設(shè)置</p>
</body>

注意:雖然css3已經(jīng)突破了安全字體的限制(通過@font-face的方式來引入一個(gè)字體)坠非,但是在實(shí)際開發(fā)的過程中還是會(huì)出現(xiàn)各種各樣的問題敏沉,所有盡量仍使用計(jì)算機(jī)系統(tǒng)自帶的十幾種安全字體,其他字體需慎重使用炎码。
(1) 引入一個(gè)字體并調(diào)用(如使用服務(wù)器端字體)

@font-face{
  font-family: myfont;
  src: url("服務(wù)器端的字體地址")format("truetype");
}

text{
  font-family: myfont;
}

說明:url("")括號(hào)內(nèi)為服務(wù)器端的字體地址(字體上傳到服務(wù)器上盟迟,用戶在使用時(shí)會(huì)自動(dòng)下載下來)。
備注:字體文件拓展名為ttfsrc: url()format("truetype");潦闲;字體文件拓展名為otfsrc: url()format("opentype");攒菠。
優(yōu)化:客戶端有Arial字體則直接加載客戶端Arial字體,沒有則從服務(wù)器加載并使用服務(wù)器端字體歉闰。

@font-face{
  font-family: myfont;
  src: local("Arial"),
       url("服務(wù)器端的字體地址");
}

text{
  font-family: myfont;
}

(2) 修改文字種類而保持字體尺寸不變
說明:文字的樣式不同字體的大小將會(huì)發(fā)生變化辖众,可使用 font-size-adjust屬性來使字體尺寸不變。

<view>
  <text id='text1'>字體樣式1</text>
</view>
<view>
  <text id='text2'>字體樣式2</text>
</view>
<view>
  <text id='text3'>字體樣式3</text>
</view>
#text1{
  font-family: monospace;
  font-size: 16px;
  font-size-adjust: 0.58;
}
#text2{
  font-family: cursive;
  font-size: 16px;
  font-size-adjust: 0.6;
}
#text3{
  font-family: fantasy;
  font-size: 16px;
  font-size-adjust: 0.78;
}

備注:可通過不斷嘗試調(diào)節(jié)font-size-adjust: aspect;aspect的數(shù)值來使各種樣式的字體尺寸操持一致和敬;更為精細(xì)的aspect數(shù)值的獲取可通過高度尺寸計(jì)算得出凹炸,如:x-height:58 font-size:100px aspect=0.58。瀏覽器中的計(jì)算公式為:c=(a/b)*s昼弟,a為實(shí)際使用的字體的aspect值啤它,b為修改前字體的aspect值,s為當(dāng)前字體的尺寸私杜,c為瀏覽器實(shí)際顯示的字體尺寸蚕键。


4. 鏈接

<body>
  <a >百度</a>
</body>

說明:小程序不起作用救欧,需改成對應(yīng)的標(biāo)簽衰粹、屬性和語法。
(1) css鏈接的四種狀態(tài):通過如下的4種屬性來設(shè)置對應(yīng)的4種狀態(tài)

  • a:link :普通的笆怠、未被訪問的鏈接狀態(tài)
  • a:hover :鼠標(biāo)指針位于鏈接上方的狀態(tài)
  • a:active :鏈接被點(diǎn)擊時(shí)的狀態(tài)
  • a:visited :用戶已訪問過的鏈接狀態(tài)
a:link{
  color: red;
}
a:hover{
  color: yellow;
}
a:active{
  color: blue;
}
a:visited{
  color: green;
}
<body>
  <a >百度</a>
</body>

(2) 常見的鏈接方式: text-decoration屬性常用于去除鏈接下劃線

a:link{
  color: red;
  text-decoration: none;
}

(3) 背景顏色:background-color

a:link{
  color: red;
  text-decoration: none;
  background-color: blueviolet
}

5. 列表

說明:css列表屬性運(yùn)行放置铝耻、改變列表(ul)標(biāo)志,或者將圖像作為列表項(xiàng)(li)標(biāo)志蹬刷。默認(rèn)列表項(xiàng)標(biāo)志是一個(gè)原點(diǎn)瓢捉。

<body>
  <ul>
    <li>酸</li>
    <li>甜</li>
    <li>苦</li>
    <li>辣</li>
    <li>咸</li>
  </ul>
</body>
屬性 描述
list-style 簡寫列表項(xiàng)
list-style-image 列表項(xiàng)圖像
list-style-position 列表標(biāo)志位置
list-style-type 列表類型

(1) list-style-type:修改列表項(xiàng)標(biāo)志為空心圓

ul li{
  list-style-type: circle;
}

(2) list-style-image:修改列表項(xiàng)標(biāo)志為本地圖片

ul li{
  list-style-image: url("vcode.gif");
}

(3) list-style-position

.ul1{
  list-style-position: inside;
}
.ul2{
  list-style-position: outside;
}
ul li{
  list-style-type: circle;
}
<body>
  <p>列表1效果</p>
  <ul class="ul1">
    <li>酸</li>
    <li>甜</li>
    <li>苦</li>
    <li>辣</li>
    <li>咸</li>
  </ul>
  
  <p>列表2效果</p>
  <ul class="ul2">
    <li>酸</li>
    <li>甜</li>
    <li>苦</li>
    <li>辣</li>
    <li>咸</li>
  </ul>
</body>

6. 表格

說明:css表格屬性幫助改善表格的外觀。主要屬性有

  • 表格邊框:border
  • 折疊邊框: border-collapse
  • 表格寬高:width & height
  • 表格文本對齊: text-align
  • 表格內(nèi)邊距:padding
  • 表格顏色:color & background-color
    說明: color 為字體顏色办成,background-color 為背景顏色泡态。
#tb,tr,th,td{
  border: 1px solid blue;
  text-align: center;
  padding: 5px;
  color: white;
  background-color: greenyellow;
}

#tb{
  border-collapse: collapse;
  width: 400px;
  height: 400px;
}
<body>
  <table id="tb">
    <tr>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
  </table>
</body>

優(yōu)化:

#tb{
  border-collapse: collapse;
  width: 500px;
}

#tb th,#tb td{
  border: 1px solid bisque;
  padding: 5px;
}

#tb th{
  text-align: center;
  color: white;
  background-color: aqua;
}

#tb tr.alt td{
  color: black;
  background-color: aquamarine;
}
<body>
  <table id="tb">
    <tr>
      <th>姓名</th>
      <th>性別</th>
      <th>年齡</th>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr class="alt">
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
    <tr>
      <td>小李</td>
      <td>男</td>
      <td>20</td>
    </tr>
  </table>
</body>

7. 輪廓

說明:css的輪廓屬性主要用于突出元素的作用。加粗和斜體也有突出元素效果的作用迂卢。

屬性 描述
outline 設(shè)置輪廓屬性
outline-color 設(shè)置輪廓顏色
outline-style 設(shè)置輪廓樣式
outline-width 設(shè)置輪廓寬度
p{
  outline-color: greenyellow;
   outline-style: dotted;
  outline-width: 1px;
}
<body>
  <p>文本突出效果</p>
</body>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末某弦,一起剝皮案震驚了整個(gè)濱河市桐汤,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌靶壮,老刑警劉巖怔毛,帶你破解...
    沈念sama閱讀 217,509評論 6 504
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異腾降,居然都是意外死亡拣度,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,806評論 3 394
  • 文/潘曉璐 我一進(jìn)店門螃壤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人窖张,你說我怎么就攤上這事蚁滋∷藿樱” “怎么了?”我有些...
    開封第一講書人閱讀 163,875評論 0 354
  • 文/不壞的土叔 我叫張陵睦霎,是天一觀的道長走诞。 經(jīng)常有香客問我副女,道長,這世上最難降的妖魔是什么蚣旱? 我笑而不...
    開封第一講書人閱讀 58,441評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮沟涨,結(jié)果婚禮上异吻,老公的妹妹穿的比我還像新娘诀浪。我一直安慰自己棋返,他們只是感情好睛竣,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,488評論 6 392
  • 文/花漫 我一把揭開白布射沟。 她就那樣靜靜地躺著,像睡著了一般幽污。 火紅的嫁衣襯著肌膚如雪簿姨。 梳的紋絲不亂的頭發(fā)上扁位,一...
    開封第一講書人閱讀 51,365評論 1 302
  • 那天,我揣著相機(jī)與錄音刑然,去河邊找鬼暇务。 笑死垦细,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的腻豌。 我是一名探鬼主播嘱能,決...
    沈念sama閱讀 40,190評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼惹骂,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了兜叨?” 一聲冷哼從身側(cè)響起衩侥,我...
    開封第一講書人閱讀 39,062評論 0 276
  • 序言:老撾萬榮一對情侶失蹤茫死,失蹤者是張志新(化名)和其女友劉穎履羞,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體被环,經(jīng)...
    沈念sama閱讀 45,500評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡筛欢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,706評論 3 335
  • 正文 我和宋清朗相戀三年唇聘,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了迟郎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,834評論 1 347
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡表制,死狀恐怖夫凸,靈堂內(nèi)的尸體忽然破棺而出阱持,到底是詐尸還是另有隱情,我是刑警寧澤鸽扁,帶...
    沈念sama閱讀 35,559評論 5 345
  • 正文 年R本政府宣布桶现,位于F島的核電站鼎姊,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏慰于。R本人自食惡果不足惜婆赠,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,167評論 3 328
  • 文/蒙蒙 一佳励、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧妙黍,春花似錦拭嫁、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,779評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽堵泽。三九已至,卻和暖如春睬愤,著一層夾襖步出監(jiān)牢的瞬間纹安,已是汗流浹背厢岂。 一陣腳步聲響...
    開封第一講書人閱讀 32,912評論 1 269
  • 我被黑心中介騙來泰國打工塔粒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人船老。 一個(gè)月前我還...
    沈念sama閱讀 47,958評論 2 370
  • 正文 我出身青樓圃酵,卻偏偏與公主長得像辜昵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子躬存,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,779評論 2 354

推薦閱讀更多精彩內(nèi)容

  • 首先了解css的塊級(jí)元素及行內(nèi)元素 塊級(jí)元素:block-level岭洲,可以包含塊級(jí)和行內(nèi)元素盾剩,其數(shù)據(jù)占據(jù)整行空間替蔬,...
    王瓷錘閱讀 696評論 0 0
  • 1.替換元素:元素內(nèi)容非文檔內(nèi)容直接顯示而由外部內(nèi)容替換承桥,如img,input(type指定) 2. 屬性medi...
    czhui_js閱讀 439評論 0 0
  • 1.如何在頁面引用 CSS 1.內(nèi)聯(lián)樣式蜀撑; 2內(nèi)部引用樣式酷麦; 3外部引用link標(biāo)簽喉恋,引用樣式; 4外部引用@im...
    好奇男孩閱讀 1,715評論 0 4
  • 塊級(jí)元素行內(nèi)元素 block-level line-level 塊級(jí)元素包含塊級(jí)和行內(nèi) 行內(nèi)只能包括含文本行和行內(nèi)...
    Frank_Yi閱讀 465評論 0 0
  • 一玖详、背景 1、background-position :默認(rèn)圖片主要從左上角方向偏移 x y x% y% [to...
    饑人谷_遠(yuǎn)方閱讀 428評論 0 0