博客网页制作
2015-08-08 17:32
387 查看
<!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>
博客网页制作
首页：<!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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- hpuoj1693 YY难题【DFS】
- FZU2125 简单的等式（枚举）
- 利用Java反射机制和泛型,全自动解析json
- UVA 10066 -The Twin Towers（最长公共子序列）
- [leetcode 235]Lowest Common Ancestor of a Binary Search Tree
- 欢迎使用CSDN-markdown编辑器
- [leedcode 233] Number of Digit One
- viewpager同时实现自动切换和手动切换
- js判断输入的年月日是一年中的第几天
- 上传图片的方法以及判断
- PageRank及其MapReduce实现
- Mac OS X 10.10中配置Apache ＋ PHP
- django操作mysql时django.db.utils.OperationalError: (2003, "Can't connect to MySQL server")错误的解决办法
- 【codevs1068】乌龟棋noip10年TG----第二个A掉的钻石题
- oracle12创建用户错误ORA-65096: 公用用户名或角色名无效 invalid common user or role name
- 括号配对
- C++设计模式——原型模式
- PhotoShop 图章工具的简单使用
- checkbox的全选与反选
- 阿拉卡拉卡韩国