-
一、制作靜態(tài)網(wǎng)頁(yè)的樣式 1. 按鈕(卡片模式和列表模式)的樣式 2. 卡片模式和列表模式中的圖片和文字的樣式 二、使用JS實(shí)現(xiàn)，點(diǎn)擊不同的按鈕(卡片模式和列表模式)顯示不同的模式。查看全部
-
代碼修改查看全部
-
實(shí)現(xiàn)點(diǎn)擊圖片按鈕完成卡片模式與列表模式的切換 1.設(shè)計(jì)好兩種顯示模式的樣式 2.添加頁(yè)面加載函數(shù) 3.獲取操作按鈕，添加點(diǎn)擊響應(yīng)事件 4.兩種樣式疊加在一起時(shí)，最后編輯的樣式將被采用。所謂就近原則是指網(wǎng)頁(yè)代碼的執(zhí)行是自上而下地順序進(jìn)行的，設(shè)計(jì)在最后的樣式將覆蓋前面的樣式。查看全部
-
overflow:hidden重要的兩個(gè)作用：把多余的部分裁減掉／清除浮動(dòng) 1.圖片的大小超過(guò)了a標(biāo)簽的范圍： （通過(guò)a標(biāo)簽來(lái)限定img的大小，overflow隱藏部分） <a>標(biāo)簽為內(nèi)聯(lián)元素，所以給其設(shè)定寬高是達(dá)不到效果的，必須將其設(shè)置為塊級(jí)元素。同時(shí)給其設(shè)定寬高后，其內(nèi)部的大圖片也會(huì)溢出，可以用overflow屬性隱藏溢出部分。 2.li設(shè)置浮動(dòng)后，不會(huì)把父級(jí)標(biāo)簽ul撐起來(lái)，需要清除浮動(dòng)--overflow:hidden;（給ul加overflow:hidden;）查看全部
-
overflow:hidden重要的兩個(gè)作用：把多余的部分裁減掉／清除浮動(dòng) 1.圖片的大小超過(guò)了a標(biāo)簽的范圍： （通過(guò)a標(biāo)簽來(lái)限定img的大小，overflow隱藏部分） <a>標(biāo)簽為內(nèi)聯(lián)元素，所以給其設(shè)定寬高是達(dá)不到效果的，必須將其設(shè)置為塊級(jí)元素。同時(shí)給其設(shè)定寬高后，其內(nèi)部的大圖片也會(huì)溢出，可以用overflow屬性隱藏溢出部分。查看全部
-
切換效果，即改變顯示的樣式 class值還可以新加一個(gè)列如加一個(gè)small<a href="#" class="a-img small">如是.small引用了small的所有內(nèi)容都會(huì)發(fā)生樣式變化 如是.a-img .small說(shuō)明在引用a-img的標(biāo)簽下引用small的內(nèi)容發(fā)生樣式變化。查看全部
-
overflow:hidden重要的兩個(gè)作用：把多余的部分裁減掉／清除浮動(dòng) 1.圖片的大小超過(guò)了a標(biāo)簽的范圍： （通過(guò)a標(biāo)簽來(lái)限定img的大小，overflow隱藏部分） <a>標(biāo)簽為內(nèi)聯(lián)元素，所以給其設(shè)定寬高是達(dá)不到效果的，必須將其設(shè)置為塊級(jí)元素。同時(shí)給其設(shè)定寬高后，其內(nèi)部的大圖片也會(huì)溢出，可以用overflow屬性隱藏溢出部分。 2.li設(shè)置浮動(dòng)后，不會(huì)把父級(jí)標(biāo)簽ul撐起來(lái)，需要清除浮動(dòng)--overflow:hidden;（給ul加overflow:hidden;）查看全部
-
css sprite技術(shù) 基本的原理，就是利用background-postion的負(fù)值來(lái)進(jìn)行調(diào)節(jié)。 當(dāng)我們定位于background-position:-50px -50px;時(shí)發(fā)現(xiàn)圖片向左上，移動(dòng)了，也就以DIV的左上角為中心，圖向左移動(dòng)了50PX，向右也移動(dòng)了50PX．查看全部
-
1、列表模式和卡片模式的區(qū)別： ① 兩個(gè)按鈕的className的區(qū)別 ② 每個(gè)li里圖片img路徑的區(qū)別 ③ 以及圖片的父節(jié)點(diǎn)a標(biāo)簽里的class值的區(qū)別a.parentNode查看全部
-
overflow:hidden重要的兩個(gè)作用：把多余的部分裁減掉／清除浮動(dòng) 1.圖片的大小超過(guò)了a標(biāo)簽的范圍： （通過(guò)a標(biāo)簽來(lái)限定img的大小，overflow隱藏部分） <a>標(biāo)簽為內(nèi)聯(lián)元素，所以給其設(shè)定寬高是達(dá)不到效果的，必須將其設(shè)置為塊級(jí)元素。同時(shí)給其設(shè)定寬高后，其內(nèi)部的大圖片也會(huì)溢出，可以用overflow屬性隱藏溢出部分。 2.li設(shè)置浮動(dòng)后，不會(huì)把父級(jí)標(biāo)簽ul撐起來(lái)，需要清除浮動(dòng)--overflow:hidden;（給ul加overflow:hidden;）查看全部
-
css sprite技術(shù) 基本的原理，就是利用background-postion的負(fù)值來(lái)進(jìn)行調(diào)節(jié)。 當(dāng)我們定位于background-position:-50px -50px;時(shí)發(fā)現(xiàn)圖片向左上，移動(dòng)了，也就以DIV的左上角為中心，圖向左移動(dòng)了50PX，向右也移動(dòng)了50PX． ■右上角按鈕圖片的定位： 背景圖片設(shè)置的代碼順序：background:顏色 路徑 是否平鋪 left top (透明度,如果有的話); 按鈕設(shè)置<a href="#" title="列表模式"></a>；a是內(nèi)聯(lián)元素，設(shè)置display：block 記得a標(biāo)簽的title屬性查看全部
-
overflow:hidden重要的兩個(gè)作用：把多余的部分裁減掉／清除浮動(dòng) 1.圖片的大小超過(guò)了a標(biāo)簽的范圍： <a>標(biāo)簽為內(nèi)聯(lián)元素，所以給其設(shè)定寬高是達(dá)不到效果的，必須將其設(shè)置為塊級(jí)元素。同時(shí)給其設(shè)定寬高后，其內(nèi)部的大圖片也會(huì)溢出，可以用overflow屬性隱藏溢出部分。 2.li設(shè)置浮動(dòng)后，不會(huì)把父級(jí)標(biāo)簽ul撐起來(lái)，需要清除浮動(dòng)--overflow:hidden;（給ul加overflow:hidden;）查看全部
-
css sprite技術(shù) 基本的原理，就是利用background-postion的負(fù)值來(lái)進(jìn)行調(diào)節(jié)。 當(dāng)我們定位于background-position:-50px -50px;時(shí)發(fā)現(xiàn)圖片向左上，移動(dòng)了，也就以DIV的左上角為中心，圖向左移動(dòng)了50PX，向右也移動(dòng)了50PX． ■右上角按鈕圖片的定位： 背景圖片設(shè)置的代碼順序：background:顏色 路徑 是否平鋪 left top (透明度,如果有的話); 注：①left top的定位是以圖片左上角為原點(diǎn) ②可以用PS測(cè)距離大小：看信息面板里的W和H值 ③如果上面直接寫left top 就相當(dāng)于background-position:0 0; 按鈕設(shè)置<a href="#" title="列表模式"></a>；a是內(nèi)聯(lián)元素，設(shè)置display：block查看全部
-
信息排列布局 最終版查看全部
-
信息排列布局查看全部
舉報(bào)
0/150
提交
取消