Day9:html和css

收藏待读

Day9:html和css

Day9:html和css

標題圖

Day9: htmlcss

    
    
    
    
    
    
    
    
    
    
    

案例:


    
    Dome
    
     div {
        border: 1px solid #000;
        float: left;
        width: 300px;
        height: 100px;
     }
     img {
        width: 100%;
        height: 100%;
     }
    


    

盒子模型布局

width >  padding  > margin
margin
padding
width

圓角邊框( CSS3 )

border-radius: 50%;

盒子陰影( CSS3 )

box-shadow:水平陰影 垂直陰影 模糊距離(虛實)  陰影尺寸(影子大小)  陰影顏色  內/外陰影;
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);
box-shadow:水平位置 垂直位置 模糊距離 陰影尺寸(影子大小) 陰影顏色  內/外陰影;

浮動( float )

什麼是浮動?

指設置了浮動屬性的元素會脫離標準標準流的控制

選擇器{float:屬性值;}
屬性值描述
left元素向左浮動
right元素向右浮動
none元素不浮動

清除浮動的方法

選擇器{clear:屬性值;}
屬性值描述
left(清除左側浮動的影響)
right(清除右側浮動的影響)
both同時清除左右兩側浮動的影響

額外標籤法

父級添加 overflow 屬性

overflow為 hidden|auto|scroll

使用 after 偽元素清除浮動

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}

使用 beforeafter 雙偽元素清除浮動

.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}

常用新標籤

header:定義文檔的頁眉
nav:定義導航鏈接的部分
footer:定義文檔或節的頁腳
article:定義文章
section:定義文檔中的節
aside:定義其所處內容之外的內容
datalist   標籤定義選項列表
embed:標籤定義嵌入的內容
audio:播放音頻
video:播放視頻

多媒體 audio

loop 循環播放
autoplay 自動播放
controls 是否顯不默認播放控件

多媒體 video

autoplay 自動播放

controls 是否顯示默認播放控件

loop 循環播放

width 設置播放窗口寬度

height 設置播放窗口的高度

如果看了覺得不錯

點贊!轉發!

達叔小生:往後餘生,唯獨有你

You and me, we are family !

90後帥氣小伙,良好的開發習慣;獨立思考的能力;主動並且善於溝通

簡書博客: 達叔小生

https://www.jianshu.com/u/c785ece603d1

結語

  • 下面我將繼續對 其他知識 深入講解 ,有興趣可以繼續關注
  • 小禮物走一走 or 點贊

原文 : 簡書

相關閱讀

免责声明:本文内容来源于簡書,已注明原文出处和链接,文章观点不代表立场,如若侵犯到您的权益,或涉不实谣言,敬请向我们提出检举。