當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）

發布時間：2025/1/21 HTML 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

眾所周知，學前端只看不寫等于“我沒學過”，但是我們初學者常常因為找不到合適的網頁素材而苦惱。有的太復雜，很多知識沒學過；有的太粗糙，沒有做的興趣。正巧，我這兒有份兒合適的，純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 如有需要，請自行下載。

總結

以上是生活随笔為你收集整理的Web前端_项目实践01_萌娃摄影网页（纯HTML+CSS静态页面）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [十问] 软件基础知识
下一篇： [基础算法]通过后缀表达式实现表达式的计