衆所周知，學前端只看不寫等於“我沒學過”，但是我們初學者常常因爲找不到合適的網頁素材而苦惱。有的太複雜，很多知識沒學過；有的太粗糙，沒有做的興趣。正巧，我這兒有份兒合適的，純HTML+CSS實現，夠簡單，頁面比某些書本上的陳舊素材好看，有興趣的話，一起來嘗試吧。
先上完整效果圖：
HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/ex03.css" />
</head>
<body>
<header class="center">
<img src="img/nav.jpg" alt="" width="980px" />
<br />
<span id="header_left_first">網站首頁</span><span id="header_left_second">關於我們</span>
<span id="header_right_first">攝影作品</span><span id="header_right_second">聯繫我們</span>
</header>
<main>
<div class="center" id="main_img01" /><img src="img/bg.jpg" width="980px"></div>
<div class="center" id="main_img02"><img src="img/dongtai.jpg"></div>
<div id="main_content" class="center">
<span class="main_content_part" id="main_content_part1">
<img src="img/news1.jpg" alt="" />
<div class="main_content_part_write1">優惠活動</div>
<div class="line"></div>
<div class="main_content_part_write2">新年訂單有特大驚喜！</div>
<img src="img/yinying.jpg" alt="" />
</span>
<span id="main_content_part2">
<img src="img/news2.jpg" alt="" />
<div class="main_content_part_write1">寶貝寫真應該注意什麼？</div>
<div class="line"></div>
<div class="main_content_part_write2">孩子拍攝的時候瞭如果陌生人接觸的話比較容易哭鬧，如果換做是親近的或者比較平時熟悉玩得來的就會好很多。</div>
<img src="img/yinying.jpg" alt="" />
</span>
</span>
<span id="main_content_part3">
<img src="img/news3.jpg" alt="" />
<div class="main_content_part_write1">寶貝慶生會</div>
<div class="line"></div>
<div class="main_content_part_write2">爲新生寶寶準備的生日party，參與者可獲得精美生日禮物一份。</div>
<img src="img/yinying.jpg" alt="" />
</span>
</span>
</div>
<div id="main_example" class="center">
<img src="img/xinshang.jpg" alt="" width="980px"/>
<img src="img/img1.jpg" alt="" id="main_example_part1" />
<img src="img/img2.jpg" alt="" id="main_example_part2" />
<img src="img/img3.jpg" alt="" id="main_example_part3" />
<img src="img/img4.jpg" alt="" id="main_example_part4" />
</div>
<div id="fix_point">
<img src="img/erweima.png" alt="" />
</div>
</main>
<footer>
<div id="footer_img"></div>
<div id="footer_write">版權所有2018-2019京ICP備08001421號 京公網安備110108007702</div>
</footer>
</body>
</html>`
CSS代碼：
.center {
width: 980px;
margin: 0 auto;
}
header {
position: relative;
left: 0px;
top: 0px;
}
#header_left_first {
position: absolute;
left: 154px;
top: 40px;
}
#header_left_second {
position: absolute;
left: 275px;
top: 40px;
}
#header_right_first {
position: absolute;
right: 154px;
top: 40px;
}
#header_right_second {
position: absolute;
right: 275px;
top: 40px;
}
#main_img01{
position: relative;
top:-4px;
}
#main_content{
position: relative;
top:5px;
left: 0px;
}
#main_content span{
display: inline-block;
}
#main_content_part1{
position: absolute;
left: 16px;
}
#main_content_part2{
position: absolute;
left: 342px;
}
#main_content_part3{
position: absolute;
left: 668px;
}
.line{
width: 100%;
height:1px;
border-top:solid #111111 1px;
}
.main_content_part_write1{
margin-bottom: 5px;
font-family: "微軟雅黑";
font-size: 16px;
font-weight: 900;
}
.main_content_part_write2{
margin-top: 5px;
font-family: "微軟雅黑";
font-size: 12px;
color: #aaaaaa;
letter-spacing: 1px;
width: 294px;
height: 50px;
}
#main_example{
position: relative;
top:300px;
left:0px;
width: 980px;
height: 442px;
}
#main_example_part1{
position: absolute;
top:185px;
left:90px;
}
#main_example_part2{
position: absolute;
top:185px;
left:306px;
}
#main_example_part3{
position: absolute;
top:185px;
right:306px;
}
#main_example_part4{
position: absolute;
top:185px;
right:90px;
}
#fix_point{
position: fixed;
right: 8%;
bottom: 10%;
}
footer{
position: absolute;
top:1600px;
left: 0px;
width: 100%;
height: 80px;
}
#footer_img{
width: 100%;
height: 80px;
background:url('../img/footer_bg.jpg') repeat-x;
}
#footer_write{
position: relative;
top:-50px;
font-size: 16px;
font-weight: 600;
font-family: "微軟雅黑";
color: #aaaaaa;
width: 600px;
margin: 0 auto;
}
好了，這就是全部內容了，完整的圖片、代碼等素材，都在下面這個鏈接裏，鏈接：https://pan.baidu.com/s/1lPvBo8OGqBzuFAFFM4nUJg
提取碼：76kt 如有需要，請自行下載。