今天的任務是根據UI給的圖進行切圖，然后寫出相應的頁面，UI如下：
收獲：學習前端知識一年有余，卻因為老是找不到實戰項目而得不到實際的提高，直到今天的學習我才知道切圖是怎么一回事，明白了你看到一張漂亮的圖片，你想拿其中一部分來當圖標之類的，是可以通過切圖的方式進行的，用Photoshop進行切圖並將圖片保存為html格式，可以得到相應切圖后圖片的html代碼，不過代碼只是簡單的用表格方式呈現出來，具體實戰還是得自己動腦用靈活的css樣式來進行編碼；
遇到的問題：再進行該頁面的編碼時，一開始完成后整個頁面效果是出來了，但是縱向、橫向都出現了滾動條，這是我預期之外的，所以我決定要把滾動條去掉，在body里面增加scroll=“no"語句、overflow="hidden"語句、rightmargin="0" leftmargin="0" topmargin="0" bottommargin="0"語句均沒有效果，最后在css樣式中增加html{scroll：no；}樣式后才最終實現。
代碼如下：
1 <!DOCTYPE HTML> 2 <meta charset="UTF-8"> 3 <html> 4 <head> 5 <title> 6 葡萄藤首頁 7 </title> 8 <style type="text/css"> 9 #grape{ 10 position:relative; 11 left:43%; 12 top:20%; 13 } 14 .bottom{ 15 position:absolute; 16 bottom: 5%; 17 } 18 #group{ 19 left:33%; 20 } 21 #teng{ 22 left:58%; 23 } 24 #word{ 25 position:relative; 26 top:20%; 27 left:32%; 28 color:#fff; 29 font-size: 2.5em; 30 } 31 html{ 32 overflow: hidden; 33 } 34 </style> 35 </head> 36 <body bgcolor="#68cdd5"> 37 <img src="./images/1.jpg"> 38 </br> 39 <img id="grape" src="./images/2.jpg"> 40 </br> 41 <pre id="word"> 42 葡萄藤輕游戲專注於桌游領域，提 43 供在線殺人游戲、捉鬼、炸狼堡等 44 多種聚會游戲,以及線下聚會桌游 45 道具。 46 </pre> 47 <img id="group" class="bottom" src="./images/4.jpg"> 48 <img id="teng" class="bottom" src="./images/3.jpg"> 49 </body> 50 </html>
效果如圖：
