在頁面設計中，切圖是非常重要的環節。切圖不僅僅是將設計稿中的圖片裁剪下來，還要將其轉化為前端代碼實現網頁的頁面展示和交互效果。其中，CSS是不可或缺的一部分，尤其是對于div這種常用的標簽。下面我們來學習一下切圖div css的相關知識。

首先，我們需要將設計稿中的圖片切成多個小的圖片分別保存下來，然后在代碼中通過div標簽進行展示。代碼如下：

html:
<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
css:
#wrapper{
width: 100%;
height: 100%;
}
#header{
width: 100%;
height: 200px;
background-image: url(images/header.jpg);
background-repeat: no-repeat;
}
#content{
width: 100%;
height: 600px;
background-image: url(images/content.jpg);
background-repeat: no-repeat;
}
#footer{
width: 100%;
height: 200px;
background-image: url(images/footer.jpg);
background-repeat: no-repeat;
}

代碼中，我們使用了div標簽來定義三個區域：header、content和footer。每一個div都有自己的ID，通過ID在CSS中進行樣式定義。其中，我們使用了background-image來設置背景圖片，通過設定background-repeat為no-repeat來防止圖片重復出現。通過height和width屬性來設置大小。

在上面的示例中，我們只是簡單的展示了切圖div css的基本用法。實際開發中，還要考慮更多樣式、布局、響應式等因素。所以學習完基礎知識后，還需要進一步提高自己的技能水平，才能寫出更高質量的代碼。