網易前端微專業-頁面制作-討論題匯總
1. JPG、PNG8、PNG24這些格式分別適合保存什麽特點的圖片？
1）JPG： 適合保存色彩豐富且無透明度要求的圖片，一般為一些網頁的內容性圖片。
2）PNG8：圖片色彩不太豐富，無論有無透明度要求的圖片，一般為一些網頁內修飾性圖片。
3）PNG24： 有半透明要求的圖片，一般為一些網頁內修飾性圖片。
2. 圖片分類合並有哪些方式？
1）把屬於同一個模塊的圖片進行合並
2）把大小相近的圖片進行合並
3）把色彩相近的圖片進行合並
4）綜合以上所有方式對圖片進行合並
合並推薦：1）同一頁面圖片的合並，比如登錄頁面的圖片登陸後不再需要，這樣合並只需要在登陸時加載一次圖片即可； 2）有狀態圖標的合並，便於查找和升級維護
3. 如何實現瀏覽器兼容版的inline-block顯示
（display:inline-block;在ie6、ie7下只有設置在默認顯示方式為inline的元素上才會生效，請實現兼容ie6、ie7的通用的方式）
1 display:inline-block; 2 *display:inline; /*IE下觸發hasLayout*/ 3 *zoom:1; /*一旦IE下觸發了hasLayout，設置block元素為inline會使display:inline效果與display:inline-block相似*/
4. 實現一個自適應布局
<div class="parent">
<div class="side">側欄</div>
<div class="main">主欄</div>
</body>
要求如效果圖中標註，兩欄間距為10px，請寫出這個兩列布局的CSS。
1 html,body{ 2 height: 100%; 3 margin: 0; 4 } 5 .parent{ 6 display: flex; 7 height: 100%; 8 font:30px sans-serif; 9color: white; 10 text-align: center; 11 } 12 .side{ 13 width: 200px; 14 background-color: red; 15 } 16 .main{ 17 background-color: blue; 18 flex: 1; 19 margin-left: 10px; 20 } 21 .vertical-center{ 22 vertical-align: middle; 23 height: 100%; 24 }
5. 實現一個Tab
請按以下效果圖和圖中標註完成HTML和CSS：
默認第一個Tab為選中狀態。
補充說明：實現靜態效果即可，不用實現點擊切換。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Tab</title> 6 <style type="text/css"> 7 html{ 8 height: 100%; 9 } 10 body{ 11 display: flex; 12 flex-flow: column; 13 box-sizing: border-box; 14 width: 574px; 15 height: 100%; 16 border:1px solid #999; 17 } 18 .charactor{ 19 font:14px "微軟雅黑"; 20 } 21 .content{ 22 padding: 20px; 23 background-color: white; 24 flex: 1; 25 display: flex; 26 } 27 .nav{ 28 display: flex; 29 } 30 .item{ 31 text-align: center; 32 border:1px solid #cecece; 33 background-color: #f1f1f1; 34 flex-grow: 1; 35 padding: 10px; 36 } 37 .item1{ 38 background-color: white; 39 border:none; 40 } 41 </style> 42 </head> 43 <body> 44 <div class="nav"> 45 <div class="item item1 charactor">課程</div> 46 <div class="item item2 charactor">學習計劃</div> 47 <div class="item item3 charactor">技能圖譜</div> 48 </div> 49 <div class="content charactor">課程內容</div> 50 </body> 51 </html>
6. 實現一個彈窗
請按以下效果圖和要求完成一個彈窗的HTML和CSS：
總體：彈窗相對於瀏覽器窗口固定（即滾動條拖動時不影響彈窗位置）且水平垂直居中，彈窗總寬度302px，高度未知（由內容區的內容決定），圓角半徑為5px，邊框為1px的實線，邊框顏色為#cccccc。
標題欄：左右留白20px，高度為40px，文字為14px的微軟雅黑且垂直居中，只顯示單行文字且超出隱藏並顯示“...”，背景色為#eeeeee。
內容區：由一個段落和一個按鈕組成，四周留白20px，背景為白色，段落與按鈕距離20px，字體均為12px的宋體。
段落：行高1.5倍。
按鈕：水平居中、寬80px、高30px、藍底、白字、文字居中、圓角半徑為5px。
關閉：寬10px、高10px、距離上邊框10px，距離右邊框10px，鼠標為手型，假設關閉圖標相對css的路徑為“../x.png”
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>第三題</title> 6 <style type="text/css"> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 12 .BombBox{ 13 left: 50%; 14 top:50%; 15 transform: translate(-50%,-50%); 16 box-sizing: border-box; 17 width: 302px; 18 position: fixed; 19 border-radius: 5px; 20 border:1px solid #cccccc; 21 padding: 0; 22 } 23 .title{ 24 position: relative; 25 height: 40px; 26 background-color: #eeeeee; 27 } 28 h1{ 29 font:14px/40px "微軟雅黑"; 30 vertical-align: middle; 31 text-overflow: ellipsis; 32 overflow: hidden; 33 white-space: nowrap; 34 margin-left: 20px; 35 } 36 .content{ 37 padding: 20px; 38 background-color: white; 39 font:12px "宋體"; 40 } 41 .content p{ 42 line-height: 1.5; 43 margin-bottom: 20px; 44 } 45 .content button{ 46 display: block; 47 margin: 0 auto; 48 width: 80px; 49 height: 30px; 50 background-color: blue; 51 color: white; 52 text-align: center; 53 border-radius: 5px; 54 border:none; 55 } 56 span{ 57 position: absolute; 58 width: 10px; 59 height: 10px; 60 right: 10px; 61 top: 10px; 62 background-image: url("../x.png"); 63 } 64 span:hover{ 65 cursor: pointer; 66 } 67 </style> 68 </head> 69 <body> 70 <div class="BombBox"> 71 <div class="title"> 72 <h1>標題欄</h1> 73 <span></span> 74 </div> 75 <div class="content"> 76 <p>內容區段落</p> 77 <button>確定</button> 78 </div> 79 </div> 80 </body> 81 </html>
網易前端微專業-頁面制作-討論題匯總