衆所周知，學前端只看不寫等於“我沒學過”，正巧，我這兒有份兒合適的練手素材，純HTML+CSS實現，夠簡單，頁面比某些書本上的陳舊素材好看，有興趣的話，一起來嘗試吧。
先上完整效果圖：
禁慾灰撞上優雅白，是不是有種很火的北歐ins風感覺
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/mycss.css" />
</head>
<body>
<div class="body">
<header>
<span class="span1">彼岸の花</span>
<span class="span2"> 偶安一隅 靜靜生活</span>
<hr class="hr" />
</header>
<div class="content">
<div class="content_top">商品分類 ></div>
<img src="img/banner.jpg" alt="pic1" class="img01" />
<div class="content_wenzi_1">我喜歡一些花，靜靜地開放，從不聲張。小小的花朵，有着異樣的芬芳...</div>
<div class="content_wenzi_2">I love flowers, quietly open, never quiet. Little flowers, with the same fragrance...</div>
<img src="img/bestseller1.png" alt="pic2" class="img02" />
<img src="img/bestseller2.jpg" alt="pic3" class="img03" />
<div class="content_end">
<div> 多肉植物是指植物營養器官肥大的高等植物，通常具有根、莖、葉三種營養器官和</div>
<div>花、果實、種子三種繁殖器官。在園藝上，又稱肉質植物或多肉花卉，但以多肉植物</div>
<div>這個名稱最爲常用。</div>
<div> <span class="text_under">全世界共有多肉植物一萬餘種</span>。它們絕大多數屬於高等植物（絕大多數是被子植</div>
<div>物）。植物上隸屬幾十個科。個別專家認爲有67個科中含有多肉植物，但大多數專家</div>
<div>認爲只有50餘科。</div>
</div>
</div>
<footer>
<div class="nav">
<span>品質保障 |</span>
<span>七天無理由退換貨 |</span>
<span>特色服務體驗 |</span>
<span>幫助中心 </span>
</div>
<div class="footer_dianzhang">
<img src="img/tuxiang.gif" alt="pic" class="img04" />
<div class="footer_wenzi">
<div class="wenzi_1">店長：Michael_唐僧</div>
<i><div class="wenzi_2">飛舞的花兒像一首詩？寫着秋天的心事？帶着思念？輕輕？飄向大地？</div></i>
<i><div class="wenzi_3">也許這只是秋季的一場遊戲？</div></i>
</div>
</div>
</footer>
</div>
</body>
</html>
CSS部分代碼：
body {
background-color: #ededed;
}
.body {
width: 980px;
margin: 0 auto;
}
header {
text-align: center;
}
header span {
font-family: "微軟雅黑";
color: #a5a5a5;
}
header .span1 {
font-size: 24px;
}
header .span2 {
font-size: 10px;
}
.hr {
margin-top: 20px;
color: #A5A5A5;
}
.content_top {
font-family: "微軟雅黑";
color: #a5a5a5;
}
.img01 {
margin-top: 10px;
}
.content_wenzi_1 {
font-family: "楷體";
color: #a5a5a5;
width: 520px;
margin: 0 auto;
}
.content_wenzi_2 {
font-family: "Calibri";
color: #a5a5a5;
width: 600px;
margin: 0 auto;
font-size: 18px;
}
.img02 {
width: 600px;
margin-left: 190px;
margin-top: 20px;
}
.img03 {
width: 600px;
margin-left: 190px;
margin-top: 20px;
}
.content_end {
width: 600px;
margin: 0 auto;
}
.content_end div {
font-family: "楷體";
color: #a5a5a5;
margin-top: 10px;
}
.nav {
width: 410px;
margin: 0 auto;
margin-top: 20px;
font-family: "微軟雅黑";
color: #a5a5a5;
font-weight: 700;
}
.footer_dianzhang {
width: 600px;
margin: 0 auto;
margin-top: 20px;
}
.footer_wenzi {
font-family: "微軟雅黑";
color: #a5a5a5;
}
.footer_wenzi .wenzi_1 {
position: relative;
top: -92px;
left: 130px;
}
.footer_wenzi .wenzi_2 {
font-family: "calisto mt";
position: relative;
top: -78px;
left: 130px;
font-size: 10px;
}
.footer_wenzi .wenzi_3 {
font-family: "calisto mt";
position: relative;
top: -78px;
left: 130px;
font-size: 14px;
}
好了，這就是全部內容了，完整的圖片、代碼等素材，都在下面這個鏈接裏，鏈接：https://pan.baidu.com/s/1ETIUqKzqFeSgm2p6irgaAQ
提取碼：2ng7 如有需要，請自行下載。