原创 HTML5學習_day05(3)--html之float定義

        1.什麼是浮動?         浮動的框可以向左或向右移動,知道它的外邊緣碰到包含框或者是另外一個浮動元素的浮動框爲止。         2.float語法:         float:         left 元

原创 三個span水平垂直對齊方式

三個span標籤都要添加下面的屬性 vertical-align:top; 就可以實現水平對齊 點贊 收藏 分享 文章舉報 woaiwanshumen 發佈了53 篇原創文章

原创 HTML5學習_day05(8)--html之僞類元素選擇器(僞元素)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>僞類元素選擇器</title> <style type="text/css"> div:afte

原创 HTML5學習_day06(3)--html之絕對定位

絕對定位的定義 position: absolute; 它使相對不是static的最近一次的有定位父元素來進行定義的。((這裏的所有定位都不能是默認值 static)一開始設置定位時 就找上一級的父元素是否有定位 有就以它爲基準定位 若是

原创 HTML5學習_day03(2)--html之a標籤(超鏈接)

a標籤: 語法: <a href="鏈接跳轉地址" target="瀏覽器打開方式" name="錨點:用於頁面不同位置跳轉,僅僅限於當前文件"></a> target 屬性值: 1._blank 在空白頁打開 <a href="ht

原创 HTML5學習_day12(3)--響應式佈局

響應式佈局設計的一般步驟 第一步:在head標籤內設置meta標籤 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,ma

原创 HTML5學習_day11(1)--HTML新標籤

一.<article></article> 用法:定義了獨立的內容,內容通常是一篇帖子,一篇博客,一篇短文,雜誌,新聞文章,一條完整的回覆,評論等 內部可以使用header,footer,section,article標籤 提示: 每一個

原创 HTML5學習_day06(5)--html之固定總結(輪播圖 垂直居中)

1.position:relative 不會脫離文檔流 2.position:absolute | fix 脫離文檔流 3.absolute是相對於父級非static(沒有設置定位默認值)進行定位(若父級是static 繼續往上找有定位的

原创 HTML5學習_day09(1)--(iframe embend dispalu_table !important)的使用

一.浮動框架 iframe       iframe可以稱之爲內斂框架, 它可以在網頁中局部插入另一個文件或者頁面。可添加樣式。        用法:     <span style="white-space:pre"> </span>

原创 HTML5學習_day13(2)--nth-child(n)僞類選擇器(多標籤時不通過id,class來快速選中標籤)

nth-child 作用:可以不通過id,class來快速選中標籤 用法: <div>1</div> <div>2</div> <div>3</div> <div>4</div> 可以通過 div:nth-child(2)

原创 HTML5學習_day13(3)--border-radius屬性(圓角邊框)

border-radius屬性 <div style="width:50px;height:50px;background:red;border-radius:10px"></div>用法: border-radius:像素; 複合

原创 HTML5學習_day07(2)--BFC定義

1.BFC? 塊級格式化上下文(block formatting context)簡稱BFC 它規定了塊級盒子的渲染布局方式。   2.什麼元素可以觸發產生一個BFC? 1.根元素(HTML) 2.float浮動屬性爲非none,如設置

原创 HTML5學習_day10(4)--兼容性個例

兼容性個例 1.並一行的元素,第一個元素沒有設置浮動,第二個元素設置了向左浮動。在IE6,7下連兩個元素之間會多出3px的空隙。 解決辦法:如果一行有一個元素設置了浮動,那麼給ital元素都設置浮動就可以消除空隙。 2.並列一行元素,

原创 HTML5學習_day12(2)--流式佈局

流式佈局 流式佈局的實質:百分比佈局 轉換公式 目標元素的寬度/上下級元素的寬度(父級元素的寬度)=百分比寬度; 彈性圖片 去掉圖片的寬高,指定max-width:100%;可以使圖片縮放到與包含其容器的寬度的100%匹配。 兩個簡單例

原创 HTML5學習_day11(2)--H5多媒體標籤

多媒體標籤 一.audio音頻標籤 <audio src="music.mp3" controls="controls">瀏覽器不支持該標籤時,才顯示這部分文字</audio>屬性: 1.src:表示文件地址 2.controls 向用