對于前端開發者來說，使用Photoshop進行頁面設計是一個常見的做法。當然，設計師們通常會把設計好的頁面通過使用Photoshop的切片工具來分割成一個個小圖像。接下來，我們就將這些切片轉換成CSS代碼。

/* 首先，我們需要在CSS中定義出全部需要的圖像，這些圖像就是切片之后得到的圖片 */
img.header {
background-image: url('/img/header.png');
width: 100%;
height: 150px;
}
img.content {
background-image: url('/img/content.png');
width: 100%;
height: 500px;
}
img.footer {
background-image: url('/img/footer.png');
width: 100%;
height: 100px;
}

接下來，我們需要對這些切片進行排版。這時候我們需要用到CSS的盒模型。盒模型常常被用來控制元素的外觀和位置。

/* 這是一個簡單的盒模型。這里我們將它應用到每個切片中 */
.box {
width: 100%;
padding: 10px;
border: 1px solid black;
margin-bottom: 20px;
}
/* 現在我們可以使用這個盒模型來控制每個切片的大小及位置 */
img.header {
height: 150px;
}
img.content {
height: 500px;
}
img.footer {
height: 100px;
}

最后，我們可以通過調整CSS來進一步美化我們的頁面。在這里，我們可以為每個元素添加一些額外的樣式，例如背景顏色、文本顏色、字體等。

body {
background-color: #F5F5F5;
font-size: 16px;
font-family: arial, sans-serif;
}
h1 {
color: #333;
font-size: 24px;
font-weight: bold;
}
p {
color: #666;
}

至此，在Photoshop中設計好的頁面已經成功轉換成CSS代碼，我們可以將CSS代碼直接應用于我們的網頁中了。