6.1.2 網站首頁 - 頭部及海報區域的搭建(下)
本節簡介:海報區域輪播圖的框架搭建,左右和下方切換按鈕制作,以及定位方式的優化等
本節課同學們做的筆記 點擊播放按鈕可自動定位到對應時間進行播放
圖像居中:left:50%;margin-left:頁面寬度/2px;
定位后居中:left:50%;margin-left:-720px;
想要居中顯示,首先需要定位元素位置為絕對值,即position:absolute,然后將其top和left設置為50%,隨后將其margin-top和margin-left值設置為其高度的一半負數
給元素添加旋轉屬性:transform:rotate(45deg);給元素添加鼠標屬性:cursor:pointer;
給三張banner輪播圖添加位置屬性;因為要將三張圖重合在一起,所以給三張圖添加“absolute”屬性,給父級banner添加“relative”屬性
deg程度;transform:改變形式;transform:rotate(45deg):旋轉45度
display:inline-block行級塊元素
position:absolute;top:0;left:0才能出現改圖像的現象
行級塊元素只要給父級添加TextAlignCenter就會居中顯示。
輪播圖的小圓點用ol li實現;行級塊元素的居中用text-align:center;塊元素的居中用margin:0 auto;