博客网页制作

最新推荐文章于 2024-06-18 10:35:53 发布

sunqian_happy

最新推荐文章于 2024-06-18 10:35:53 发布

阅读量1k

点赞数 2

分类专栏：页面相关

本文链接：https://blog.csdn.net/sunqian_happy/article/details/47360475

版权

页面相关专栏收录该内容

48 篇文章 1 订阅

订阅专栏

博客网页制作

首页：

<!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&copy;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&copy;W3Cfuns.com ALL Rights Reserved</span><br/>
            <span style="float: right">京ICP备10055601号-2</span>
        </div>
    </div>
</div>
</body>
</html>

sunqian_happy

关注

2
点赞
踩
19

收藏

觉得还不错? 一键收藏
1
评论
博客网页制作

博客网页制作首页：博客首页 body { margin-top: 0px; } #p0 { background-image: url("background1.jpg"); background-size:
复制链接

扫一扫