Day9:html和css

weixin_34253539發表於2019-01-09
HTMLCSS
11158618-c465745c55e4d18d.jpg
標題圖

Day9:html和css

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="description" content="" />
    <meta name="Keywords" content="" />
    <link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>
    <!-- 針對瀏覽器 -->
    <link rel="stylesheet" href="css/normalize.css" />
    <!-- 對網頁 頭部和底部樣式 -->
    <link rel="stylesheet" href="css/base.css" />
    <!-- 首頁的css  只寫首頁的 獨有的-->
    <link rel="stylesheet" href="css/index.css">
</head>

案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dome</title>
    <style>
     div {
        border: 1px solid #000;
        float: left;
        width: 300px;
        height: 100px;
     }
     img {
        width: 100%;
        height: 100%;
     }
    </style>
</head>
<body>
    <div>
        <img src="images/pic.jpg" height="250" width="700" alt="">
    </div>
</body>
</html>

盒子模型佈局

width >  padding  > margin
  1. margin 會有外邊距合併
  2. padding 會影響盒子大小
  3. 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 同時清除左右兩側浮動的影響

額外標籤法

<div style=”clear:both”></div>

父級新增overflow屬性

overflow為 hidden|auto|scroll

使用after偽元素清除浮動

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

 .clearfix {*zoom: 1;}

使用before和after雙偽元素清除浮動

.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 點贊

相關文章