css學習任務二：切圖寫代碼

時間 2019-11-13

標籤 css 學習任務代碼欄目 CSS 简体版

原文原文鏈接

今天的任務是根據UI給的圖進行切圖，而後寫出相應的頁面，UI以下：css

收穫：學習前端知識一年有餘，卻由於總是找不到實戰項目而得不到實際的提升，直到今天的學習我才知道切圖是怎麼一回事，明白了你看到一張漂亮的圖片，你想拿其中一部分來當圖標之類的，是能夠經過切圖的方式進行的，用Photoshop進行切圖並將圖片保存爲html格式，能夠獲得相應切圖後圖片的html代碼，不過代碼只是簡單的用表格方式呈現出來，具體實戰仍是得本身動腦用靈活的css樣式來進行編碼；html

遇到的問題：再進行該頁面的編碼時，一開始完成後整個頁面效果是出來了，可是縱向、橫向都出現了滾動條，這是我預期以外的，因此我決定要把滾動條去掉，在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>