博客网页制作
来源：互联网 发布：剑网三淘宝买金 编辑：程序博客网 时间：2024/06/08 19:59
博客网页制作
首页：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>博客首页</title> <style type="text/css"> body { margin-top: 0px; } #p0 { background-image: url("background1.jpg"); background-size: 1249px auto; height: 199px; width: 1250px; margin: 0px auto; } .p2 { list-style-type: none; width: 1210px; height: 41px; margin: 0 auto; background-color: #333333; } .p2 li { display: inline; } .p3 { list-style-type: none; width: 1210px; height: 40px; margin: 0 auto; } .p3 li { display: inline; } .p5 { color: white; margin-left: 153px; } .p6 { color: white; float: left; margin-left: 329px; margin-top:-245px ; } .p7 { color: white; float: left; margin-left: 483px; margin-top:-245px ; } .p8 { color: white; float: left; margin-left: 623px; margin-top:-245px ; } .p9 { color: white; float: right; margin-right: 28px; margin-top:-234px ; } #p3 { word-wrap: break-word; width: 32px; height: 34px; background-color:#333333 ; margin: -56px; overflow: hidden; text-align: center; padding: -3px; line-height: 30px; margin-left: 730px; margin-top: -54px; } #p3:hover { cursor: pointer; height: 145px; } #p3 span:hover { color: white; } #p4 { margin-left: 105px; } #p5 { margin-left: 804px; margin-top: -38px; float: left; } #p6 { height: 27px; width: 1248px; margin-top: 137px; opacity: 0.5; } #p7 { text-align: center; color: white; margin-top: -18px; word-spacing: 40px; } #p8 { position: absolute; left: 243px; top: 63px; } #p9 { color: white; line-height: 6px; float: left; margin-left: 348px; margin-top: -107px; } #p10 { float: right; margin-right: 119px; margin-top: -124px; } #p11 { float: right; margin-right: 1px; margin-top: -148px; } #p12 { width:259px; height: 300px; float: left; margin-left: 67px; margin-top: 37px; } #p13 { width:615px; height: 600px; float: left; margin-left: 9px; margin-top: 37px; } .p4>div:nth-child(odd) { background-color:#F1F1F1 ; font-weight: bold; } .p4>div:nth-child(even) { line-height: 70px; text-indent: 1em; color: #B2B2B2; } #p14 { float: left; margin-left: -13px; } #p15 { text-indent: 1em; float: left; margin-left: 8px; margin-top: 60px; color: #B2B2B2; } #p16 { width:227px; height: 400px; float: left; margin-left: 9px; margin-top: 37px; } #p17 { width: 1249px; height: 200px; float: left; margin-left: 0px; margin-top: 22px; background-color:#333333; } #p18 { text-align: center; color: white; margin-top: -33px; margin-left: -216px; word-spacing: 11px; } #liuyan { float: left; margin-left: -24px; margin-top: 52px; } #liuyan2 { float: left; margin-left: -520px; margin-top: 140px; } </style></head><body><div id="p0" > <div class="p1"> <a id="p4"><img src="字母1.png" width="200px" height="40px"></a> <div id="p18"> <ul class="p3"> <li>首页</li> <li>笔记</li> <li>问问</li> <li>前端</li> <li>技术</li> <li>教程</li> <li>资源</li> <li>招聘</li> <li>我的前端</li> </ul> </div> <ul class="p2"> <li> <div id="p3"> <span>更多</span> <span>帮派</span> <span>试题</span> <span>面试</span> <span>神器</span> </div> </li> </ul> <a id="p5"><img src="4、1.png" width="302px" height="38px"></a> </div> <div id="p6"> <div id="p7"> <ul class="p2"> <li>博客首页</li> <li>笔记</li> <li>图库</li> <li>话题</li> <li>留言板</li> <li>动态</li> <li>个人资料</li> </ul> </div> </div> <a id="p8"><img src="大头像.png"width="120px" height="120"></a> <div id="p9"> <p ><h1>hellomephllw的博客</h1></p> <p>精彩生活从这里开始，爱前端，爱W3Cfuns!</p> </div> <a id="p10"><img src="打笔记.png"></a> <a id="p11"><img src="左上角.png"></a> <div id="p12"> <div class="p4"> <div>帮派</div> <div>现在还没有帮派，<a href="#">加入帮派</a></div> <div>动态</div> <div>现在还没有动态</div> <div>最近访客</div> <div>现在还没有访客，<a href="#">去串串门</a></div> </div> </div> <div id="p13"> <div class="p4"> <div>笔记</div> <div>现在还没有笔记，<a href="#">发布笔记</a></div> <div>话题</div> <div>现在还没有话题，<a href="#">发布话题</a></div> <div>个人资料<a style="float: right" corlor="#B2B2B2">编辑我的资料</a></div> <div>性别 男 <div style="border: 1px dotted #B2B2B2" width="615"><a style="float: right" corlor="#B2B2B2">查看全部个人资料</a></div><br/></div> <div>留言板<a style="float: right" corlor="#B2B2B2">全部</a></div> <div id="p14"><img src="笑脸.png"></div> <textarea rows="3px" cols="60px" id="liuyan"></textarea> <input type="button" id="liuyan2" value="留言"/><br/> <p id="p15">现在还没有留言</p> </div> </div> <div id="p16"> <div class="p4"> <div>好友</div> <div>现在还没有好友，<a href="#">查找好友</a>或<a href="#">邀请好友</a></div> <div>分享</div> <div>现在还没有分享</div> </div> </div> <div id="p17"> <div class="p5"> <p style="font-weight: bold">前端网</p> <p >关于我们</p> <p>注册协议</p> <p>版权隐私</p> <p>免责申明</p> <p>投诉建议</p> </div> <div class="p6"> <p style="font-weight: bold">商务</p> <p >广告推广</p> <p>招聘服务</p> </div> <div class="p7"> <p style="font-weight: bold">微博</p> <p >腾讯微博</p> <p>新浪微博</p> </div> <div class="p8"> <p style="font-weight: bold">合作伙伴</p> <p ><img src="下方文字.png"></p> </div> <div class="p9"> <span> 前端网（W3CFUNS），中国第一Web前端开发综合性网</span><br/> <span>站，汇聚了广大中国Web前端开发工程师，并为工程师及企业</span></br> <span>提供优质的前端资源和服务，是国内前端开发最贴心的综合服务</span><br/> <span>平台，业务涉及：前端招聘、人才推荐、前端神器、教程素材、</span><br/> <span>开发工具、学习服务等多前端产业。</span><br/> <span style="float: right">Copyright©W3Cfuns.com ALL Rights Reserved</span><br/> <span style="float: right">京ICP备10055601号-2</span> </div> </div></div></body></html>
个人资料页面：
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>博客首页</title> <style type="text/css"> body { margin-top: 0px; } #p0 { background-image: url("background1.jpg"); background-size: 1249px auto; height: 199px; width: 1250px; margin: 0px auto; } .p1 { background-color: #CDCDCD; margin: 0px; padding: 0px; border: 0px solid #CDCDCD; border-radius: 20px 20px 20px } .p2 { list-style-type: none; width: 1210px; height: 41px; margin: 0 auto; background-color: #333333; } .p2 li { display: inline; } .p3 { list-style-type: none; width: 1210px; height: 40px; margin: 0 auto; } .p3 li { display: inline; } .p5 { color: white; margin-left: 153px; } .p6 { color: white; float: left; margin-left: 329px; margin-top:-245px ; } .p7 { color: white; float: left; margin-left: 483px; margin-top:-245px ; } .p8 { color: white; float: left; margin-left: 623px; margin-top:-245px ; } .p9 { color: white; float: right; margin-right: 28px; margin-top:-234px ; } .p10 { text-indent: 25px; color: #666666; } #p3 { word-wrap: break-word; width: 32px; height: 34px; background-color:#333333 ; margin: -56px; overflow: hidden; text-align: center; padding: -3px; line-height: 30px; margin-left: 730px; margin-top: -54px; } #p3:hover { cursor: pointer; height: 145px; } #p3 span:hover { color: white; } #p4 { margin-left: 105px; } #p5 { margin-left: 804px; margin-top: -38px; float: left; } #p6 { height: 27px; width: 1248px; margin-top: 137px; opacity: 0.5; } #p7 { text-align: center; color: white; margin-top: -18px; word-spacing: 40px; } #p8 { position: absolute; left: 243px; top: 63px; } #p9 { color: white; line-height: 6px; float: left; margin-left: 348px; margin-top: -107px; } #p10 { float: right; margin-right: 119px; margin-top: -124px; } #p11 { float: right; margin-right: 1px; margin-top: -148px; } #p12 { border: 1px solid #666666; border-radius: 20px 20px 20px ; margin: 0px; width: 988px; height: 594px; margin-left: 30px; margin-top: 33px; } #p13 { margin-bottom: -10px; } #p14 { border: 1px solid #666666; border-radius: 20px 20px 20px ; margin: 0px; width: 182px; height: 280px; float:right; margin-right: 37px; margin-top: -596px; } #p15 { /* border-radius: 20px 20px 20px; border: 1px solid #666666;*/ margin-left: 30px; } .p4>div:nth-child(odd) { background-color:#F1F1F1 ; font-weight: bold; } .p4>div:nth-child(even) { line-height: 70px; text-indent: 1em; color: #B2B2B2; } #p17 { width: 1249px; height: 200px; float: left; margin-left: 0px; margin-top: 22px; background-color:#333333; } #p18 { text-align: center; color: white; margin-top: -33px; margin-left: -216px; word-spacing: 11px; } #p19 { list-style-type: none; margin-bottom: 2px; margin-top: 4px; padding: 0px; } #p19 li { display: inline; color: #666666 ; } #p20 { margin-left: 26px; color: #666666; } </style></head><body><div id="p0" > <div class="p1"> <a id="p4"><img src="字母1.png" width="200px" height="40px"></a> <div id="p18"> <ul class="p3"> <li>首页</li> <li>笔记</li> <li>问问</li> <li>前端</li> <li>技术</li> <li>教程</li> <li>资源</li> <li>招聘</li> <li>我的前端</li> </ul> </div> <ul class="p2"> <li> <div id="p3"> <span>更多</span> <span>帮派</span> <span>试题</span> <span>面试</span> <span>神器</span> </div> </li> </ul> <a id="p5"><img src="4、1.png" width="302px" height="38px"></a> </div> <div id="p6"> <div id="p7"> <ul class="p2"> <li>博客首页</li> <li>笔记</li> <li>图库</li> <li>话题</li> <li>留言板</li> <li>动态</li> <li>个人资料</li> </ul> </div> </div> <a id="p8"><img src="大头像.png"width="120px" height="120"></a> <div id="p9"> <p ><h1>hellomephllw的博客</h1></p> <p>精彩生活从这里开始，爱前端，爱W3Cfuns!</p> </div> <a id="p10"><img src="打笔记.png"></a> <a id="p11"><img src="左上角.png"></a> <div id="p12"> <p class="p1">个人资料</p> <div class="p10"> <p>hellomephllw<img src="蓝点.png"> (UID:5472840)</p> <p style="word-spacing: 70px">博客访问量<img src="红0.png"> 邮箱状态已验证 视频认证未认证</p> </div> <div id="p20"> <ul id="p19"> <li>统计信息</li> <li>好友数0</li> <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px" style="vertical-align: middle"/> <li>笔记数0</li> <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/> <li>图库数0</li> <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/> <li>回帖数0</li> <img src="login_bar_line%5B1%5D.gif" height="25px" width="2px"style="vertical-align: middle"/> <li>话题数0</li> </ul> </div> <p></p> <div style="border: 1px dashed #B2B2B2" ></div><br/> <div style="text-indent:25px"><a style="color: #666666 ">性别 男</a></div><br/> <div style="border: 1px dashed #B2B2B2" ></div> <div class="p10"> <p>活跃概况</p> <p>用户组 <a style="color: #A3D3FF">W3C一级 </a><img src="个人资料1.png" id="p13"/></p> <p style="word-spacing: 30px">注册时间 2015-8-218：21 最后访问 2015-8-303:32 注册IP222.211.199.41--四川成都</p> <p style="word-spacing: 30px">上次访问IP 222.211.199.41--四川成都 上次活动时间 2015-8-303:32 所在时区 使用系统默认</p> <div style="border: 1px dashed #B2B2B2" ></div><br/> </div> <div class="p10"> <p >统计信息</p> <p style="word-spacing: 250px">已用博客0 积分0 金币5</p> <p style="word-spacing: 280px">激情2 人气0 魅力0</p> <p >推广0</p> </div> </div> <div id="p14"> <p id="p15"><img src="个人资料.png"></p> <p style="text-align: center">hellomephllw</p> <p><img src="装扮.png"/>装扮博客 <img src="查看.png"/>查看留言</p> <p><img src="编辑.png"/>编辑头像<img src="更新.png"/>更新资料</p> </div> <div id="p17"> <div class="p5"> <p style="font-weight: bold">前端网</p> <p >关于我们</p> <p>注册协议</p> <p>版权隐私</p> <p>免责申明</p> <p>投诉建议</p> </div> <div class="p6"> <p style="font-weight: bold">商务</p> <p >广告推广</p> <p>招聘服务</p> </div> <div class="p7"> <p style="font-weight: bold">微博</p> <p >腾讯微博</p> <p>新浪微博</p> </div> <div class="p8"> <p style="font-weight: bold">合作伙伴</p> <p ><img src="下方文字.png"></p> </div> <div class="p9"> <span> 前端网（W3CFUNS），中国第一Web前端开发综合性网</span><br/> <span>站，汇聚了广大中国Web前端开发工程师，并为工程师及企业</span></br> <span>提供优质的前端资源和服务，是国内前端开发最贴心的综合服务</span><br/> <span>平台，业务涉及：前端招聘、人才推荐、前端神器、教程素材、</span><br/> <span>开发工具、学习服务等多前端产业。</span><br/> <span style="float: right">Copyright©W3Cfuns.com ALL Rights Reserved</span><br/> <span style="float: right">京ICP备10055601号-2</span> </div> </div></div></body></html>
0 0
- 博客网页制作
- 我的第一篇csdn博客-飘雪网页制作
- 网页制作学习4----博客前端之下拉菜单
- 自己学习网页制作，写的私人博客
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作！！！！
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 网页制作
- 制作博客
- 20余款网页按钮和标志生成站点(在线按钮制作)~ - 恋上CSharp - 博客园
- hdoj 48119 Mosaic (二维线段树 单点更新)
- 简易通讯录
- C++设计模式——原型模式
- 括号配对
- Top 3000+ Python Modules
- 博客网页制作
- 【codevs1068】乌龟棋noip10年TG----第二个A掉的钻石题
- hpuoj1693 YY难题【DFS】
- [leetcode 235]Lowest Common Ancestor of a Binary Search Tree
- opennms 图表配置(Charts)
- NYOJ-58-最小步数（搜索）
- js判断输入的年月日是一年中的第几天
- 欢迎使用CSDN-markdown编辑器
- django.db.utils.OperationalError: (1049, "Unknown database "test_django_mysql")的解决办法
