簡單使用csdn網站的截圖做一個網站的DEMO,
簡單把CSDN網站分爲四個圖片(自己截圖),分別爲上,左,中,右,使用IDEA創建一個靜態Web項目。
代碼演示:(不添加樣式,簡單演示效果)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>孫叫獸的博客</title>
<style>
body {
background-color: aliceblue;
}
</style>
</head>
<body>
<img src="top.png" height="56px" width="1899px">
<img src="left.png" height="833px" width="120px">
<img src="center.png" height="819px" width="950px">
<img src="right.png" height="833px" width="375px">
</body>
</html>
效果演示:
對比原圖:
項目結構:
下面給圖片添加一部分超鏈接:
做一個圖片效果的假網站娛樂一下,哈哈