本節簡介:使用系統提供類名打破系統默認寬度制作全屏海報
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
第一個div定義元素高度,第二個div讓元素來到50%,第三個div定義元素居中對齊,left:元素寬度一半,~碼工助手-通欄模塊-模塊高度1920,高度570,把圖片代碼復制黏貼過去,生成代碼。
第一個div定義元素高度,第二個div讓元素來到50%,第三個div定義元素居中對齊,left:元素寬度一半,~碼工助手-通欄模塊-模塊高度1920,高度570,把圖片代碼復制黏貼過去,生成代碼。會發現生成的代碼與我們自己寫的代碼非常相似。~網頁代碼中left值已經設置過了我們沒有必要再設置,padding的設置我們也需要清除,在border寫下代碼padding:0;
第一個div定義元素高度,第二個div讓元素來到50%,第三個div定義元素居中對齊,left:元素寬度一半,
碼工助手-通欄模塊-模塊高度1920,高度570,把圖片代碼復制黏貼過去,生成代碼。會發現生成的代碼與我們自己寫的代碼非常相似。
網頁代碼中left值已經設置過了我們沒有必要再設置,padding的設置我們也需要清除,在border寫下代碼padding:0;
因為網頁代碼中有個默認的邊框border,所以如果不去掉邊框就會有一個邊框出現,我們在代碼中class前面加入代碼border:none;
把代碼放進裝修頁面里面會發現淘寶是會自動屏蔽掉我們的定位代碼的,我們查看原網頁代碼css,會發現footer-more-trigger的代碼
現在還有一個問題就是圖像沒有在屏幕中心-圖像一直是左對齊,而不是盒子正中心,考慮到不同客戶的屏幕分辨率不同,所以我們要把圖片移動到屏幕正中心-所以left改為50%-ctrl s保存-刷新,圖像就一直在屏幕正中心但是也不對,要讓圖像始終在盒子中間要再源代碼下再寫一個div;
6. 樣式<style>*{padding:0;margin:0}指通用選擇器 .out{width:950px;height:570px;border:3px solid #000; margin:0 auto;} </style>指淘寶默認寬度,圖像高度,加了個黑色邊框。margin后面的代碼表示居中對齊
分析:無論屏幕多寬,屏幕中心是一樣的,把left值對齊到中心位置,再返回向左移動圖像一半,比方說圖像是1920,那就向左移動960
碼工助手-通欄海報-點擊圖像-選擇尺寸950-自定義模塊-編輯-插入剛才復制的圖像地址-會看到圖像沒有辦法全部顯示出來,因為尺寸是950
選擇950,自定義模塊-編輯-插入圖像地址-自定義內容不顯示