html5 css3 微信開發 學習例項

2022-02-14 21:04:11 字數 3597 閱讀 4463

例子1.控制資料只顯示兩行並且最後使用省略號

樣式如下:

.controldatarows

效果:

code:

1

<

ul class

="list"

data-cmsareaid

="70"

>23

<

li>

4<

a href

=""title

="傳谷歌將發布vr頭戴裝置,androidn已加入vr模式"

style

="display:inline-block;width:100%;"

><

span

class

="fr"

style

="display:inline-block;"

>2016-04-21

span

><

i class

="fl"

i><

div

style

="width:75%;"

class

="controldata rows"

>傳谷歌將發布vr頭戴裝置,androidn已加入vr模式

div>

a>56

li>

7<

li>

8<

a href

=""title

="「闖入者」平安迫使汽車之家啟動控制權大戰一觸即發"

style

="display:inline-block;width:100%;"

><

span

class

="fr"

style

="display:inline-block;"

>2016-04-21

span

><

i class

="fl"

i><

div

style

="width:75%;"

class

="controldata rows"

>「闖入者」平安迫使汽車之家啟動控制權大戰一觸即發

div>

a>910

li>

11<

li>

12<

a href

=""title

style

="display:inline-block;width:100%;"

><

span

class

="fr"

style

="display:inline-block;"

>2016-04-21

span

><

i class

="fl"

i><

div

style

="width:75%;"

class

="controldata rows"

div>

a>

1314

li>

1516

17ul

>

例子2:固定頭部,下面列表可以上下滑動

效果:

css:樣式:

@charset "utf-8";

/*全域性樣式*/

html, body, body > form

address,

caption,

cite,

code,

em,strong,

th,optgroup

:focus

table

em button

input,

button,

textarea,

select,

optgroup,

option

select,

input,

label,

button,

img

input,

button,

textarea,

img

input,

textarea,

select,

button

body,

div,

dl,dt,

dd,ul,

ol,li,

h1,h2,

h3,h4,

h5,h6,

form,

fieldset,

legend,

input,

textarea,

p,th,

td,table,

img,

span,

dl,dt,

dd img

h1,h2,

h3,h4,

h5,h6

dl,dt,

dd,li,

ul i

a a:link,

a:active,

a:visited

a:hover

.clearfix:after

.clearfix

.fl

.fr

@media screen and (max-width: 320px)

}@media screen and (min-width: 320px) and (max-width: 375px)

}@media screen and (min-width: 376px)

}body

/* 共享服務 */

.gxfw

.gxfw .guditop

.gxfw .contbody

.gxfu_titimg

.gxfw .tit

.gxfw .tit a

.gxfw .tit a.on

.gxfw .cont

.gxfw .cont table

.gxfw .cont table td:first-child

.gxfw .cont table td:first-child img

.gxfw .cont table td:first-child span

.gxfw .cont table td .list li

.gxfw .cont table td .list li:first-child

.gxfw .cont table td .list li i

.gxfw .cont table td .list li a

.graybg

html頁面:

創業服務|石家莊北大科技園

菜鳥學習HTML5 CSS3(一)

主要內容 1.新的文件型別宣告 dtd 2.新增的html5標籤 3.刪除的html標籤 4.重新定義的html標籤 一 新的文件型別宣告 dtd html 5的dtd宣告為 等也是正確的,因為html語法是不區分大小寫的。在編寫html5文件時,要求指定文件型別,以確保瀏覽器能在html5的標準模...

初學HTML5 CSS3動畫

乙個完整的css animations由兩部分構成 在css3中使用 keyframes規則來建立動畫,keyframes可以設定多個關鍵幀,每個關鍵幀表示動畫過程中的乙個狀態,多個關鍵幀就可以使動畫十分絢麗。keyframes animationname animation屬性用於描述動畫的css...

重頭學習html5 css3系列筆記(3)

復合選擇器 字型屬性 文字屬性 css 設定文字內容 字型,大小,對齊方式 的外形 寬度,邊框樣式,邊距 版面的布局和外觀顯示樣式 css美化html 讓html專注於結構 css由兩部分構成 選擇器 一條或多條宣告 css選擇器 又分基礎選擇器和復合選擇器兩大類 基礎選擇器 由單個選擇器構成,又包...