第二天 HTML5之CSS3特效

2021-07-15 07:03:05 字數 1299 閱讀 9766

1.css3屬性選擇器

你最好

1.有class屬性的input標記

input[class]

2.input標籤中class屬性是first的元素

input[class="first"]

3.所有標籤中class

等於first的元素

[class='first']

4.input的name屬性以first開頭*,^=是以什麼開頭

input[name^=first]

5.input的name屬性以name結尾,$=表示以什麼結尾

input[name$=name]

2.css3偽類選擇器

(這裡就不把**貼過來了)

①文件的根(html):   :root

②某元素x的父元素的第乙個子元素:x:first-child

③某元素x的父元素的最後乙個子元素:x:last-child

④某元素x的父元素的第n個子元素: x:nth-child(n)

⑤某元素x的父元素的倒數第n個子元素: x:nth-last-child(n)

可以通過上面的對元素的css進行設定

3.偽類物件選擇器

類名:before、類名:after  before和after選擇器必須和content一起使用,即使content為空,也要寫出來

4.垂直居中

給需要垂直居中的父元素的display屬性設為table,本身的display:table-cell(單元格)、vertical-aline-middle,此時內容居中顯示。

鋤禾日當午,

汗滴禾下土。

誰知盤中餐,

粒粒皆辛苦。

#content

#word

5.圓角矩形

border-radius:百分比/長度;

6.陰影的製作

陰影的製作很簡單的 只需要乙個屬性就可以搞定  那當然是 box-shadow啦 

box-shadow: 水平陰影 垂直陰影 羽化值 陰影大小 陰影顏色 外部陰影(outset)和內部陰影(inset);

7.iphone的製作

這個可以當做是對上面知識的乙個鞏固練習

這些內容是個人的理解,可能與標準的還有些出入,見諒啦。

html5學習第二天

h1 h6標題標籤 img引入標籤 p段落標籤 div布局標籤 span文字修飾標籤 b,strong文字加粗標籤 i,em文字斜體標籤 sup上標題標籤 sub下標題標籤 a超連結標籤 ul,li無序列表標籤 ol,li有序列表標籤,dl,dt,dd定義列表標籤 br換行標籤 hr水平線標籤 特殊...

CSS3筆記之第二天

指定元素的寬度和高度width,height border style solid border width 5px border top width 15px border bottom width 15px border right width 15px border left width 15...

學習HTML第二天

1 margin 復合標籤,乙個值表示四個外邊距都為0。2 margin 0 auto自動定寬居中。3 div divsion的縮寫,起到劃分 分割作用,將頁面劃分為不同的區域。同時還是乙個塊元素,在不設定寬高時,高度由內容撐開,寬度和父級元素等寬。1 h1標題標籤。2 span標記網頁中的普通文字...