当前位置：凯发ag旗舰厅登录网址下载 > 前端技术 > html >内容正文

html

web前端-凯发ag旗舰厅登录网址下载

发布时间：2025/1/21 html 4 豆豆

凯发ag旗舰厅登录网址下载收集整理的这篇文章主要介绍了 web前端_项目实践01_萌娃摄影网页（纯html css静态页面）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

众所周知，学前端只看不写等于“我没学过”，但是我们初学者常常因为找不到合适的网页素材而苦恼。有的太复杂，很多知识没学过；有的太粗糙，没有做的兴趣。正巧，我这儿有份儿合适的，纯html css实现，够简单，页面比某些书本上的陈旧素材好看，有兴趣的话，一起来尝试吧。

先上完整效果图：

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">网站凯发ag旗舰厅登录网址下载首页span><span id="header_left_second">关于凯发ag旗舰厅登录网址下载span><span id="header_right_first">摄影作品span><span id="header_right_second">联系凯发ag旗舰厅登录网址下载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">凯发ag旗舰厅登录网址下载的版权所有2018-2019京icp备08001421号京公网安备110108007702div>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: 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 如有需要，请自行下载。

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的web前端_项目实践01_萌娃摄影网页（纯html css静态页面）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。