html页面部分3-QQ空间开发教程

靓仔 530

 

分块完成图示部分：

 

 

index.php

 

 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>疯一般的男人 http://65676666.qzone.qq.com</title>
<!--    引入自定义css文件-->
    <link rel="stylesheet" type="text/css" href="static/css/site.css">
<!--    引入bootstrap-->
    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css">
<!--    引入图标库font-awesome-->
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

</head>
<body>
    <!--头部开始-->
    <div class="header">
        <!--顶部中间部分div开始-->
        <div class="container">
<!--            左边部分-->
            <div class="left">
                <a href="" class="logo"></a>
                <a href=""><i class="fa fa-home"> &nbsp;</i>他的主页</a>
                <a href=""><i class="fa fa-user"> &nbsp;</i>他的动态</a>

            </div>
<!--            左边部分-->

<!--            右边部分-->
            <div class="right">
                <div class="search-box">
                    <input type="text" placeholder="用户/游戏/动态">
                    <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
                </div>
                <div class="personal">
                    <span>|</span>
                    <a href="">&nbsp;返回个人中心&nbsp;</a>
                    <span>|</span>
                </div>
                <div class="user-info">
                    <img src="static/images/userinfo.jpg" alt="html页面部分3-QQ空间开发教程" alt="">
                    <a href="">追疯少年</a>
                    <a href="">[退出]</a>
                    <a href="">&nbsp;<i class="fa fa-cog" aria-hidden="true">&nbsp;</i></a>
                    <a href=""><i class="fa fa-diamond" aria-hidden="true"></i></a>
                </div>
            </div>
<!--            右边部分-->
        </div>
        <!--顶部中间部分结束-->
    </div>
    <!--头部结束-->

    <!--body开始-->
    <div class="body">
        <div class="container">
<!--            用户信息顶部-->
            <div class="userinfo-top">
                <span>追疯少年</span>
                <a href="" class="lv"></a>
                <a href="fly"class="fly"></a>
            </div>
<!--            用户信息中间部分-->
            <div class="userinfo-center">
                <div class="left">
                    <span>
                        追疯少年 http://77886.qzone.qq.com
                    </span>

                </div>
                <div class="right">
                    <span><a href=""><i class="fa fa-plus" aria-hidden="true">&nbsp;加好友</i></a></span>
                    <a href=""><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp;赞&nbsp;|&nbsp;1</i></a>
                </div>
            </div>
<!--            用户信息底部-->
            <div class="userinfo-bottom">

            </div>
        </div>
    </div>
    <!--body结束-->

    <!--底部开始-->
    <div class="footer"></div>
    <!--底部结束-->
</body>
</html>

site.css

 

/*去除body与div之间的空隙*/
body
{
    margin: 0;
    padding:0;
}

/*头部css样式开始*/
/*****************************************************************/
.header
{
    /*添加背景好布局*/
    /*查看仿站颜色值的方法*/
    /*1.鼠标放在想仿制的位置，审查元素 查看css颜色值*/
    /*2.截图查看
rgb值*/
    background: #d18b00;
    /*background: rgb(209,139,0);*/
    height: 40px;
    /*让内部元素垂直居中*/
    line-height: 40px;
}
.header .container .left
{
    /*左浮动*/
    float: left;
    /*background: red;*/
    /*宽度小于40 避免颜色覆盖*/
    height:30px;
    width: 320px;
}

.header .container .left .logo
{
    background-image: url('../images/icon.png');
    background-position: 0px 0px;
    width:90px;
    height: 40px;
    /*必须左浮动，否则图片出不来*/
    float: left;
}

.header .container .left  a
{
    color:white;
    text-decoration: none;
}
.header .container .left  i
{
    margin-left: 20px;
    font-size: 18px;
}
.header .container .right
{
    float:right;
    /*background: red;*/
    height:30px;
    width:460px;
}
.header .container .right .search-box
{
    float: left;
}
.header .container .right .search-box input
{
    width:135px;
    height:20px;
    background-color: rgb(221,168,63);
    border:none;
    border-radius: 4px;
    padding: 5px 8px;
}
.header .container .right .search-box input::-webkit-input-placeholder
{
    color:white;
    font-size:10px;
}
.header .container .right .search-box i
{
    color:white;
    margin-left:-30px;
}
.header .container .right .personal
{
    float: left;
    margin-left: 15px;
}
.header .container .right .personal a
{
    color:white;
    text-decoration: none;
}
.header .container .right .personal span
{
    color:lightsalmon;
}
.header .container .right .user-info
{
    float: left;
    margin-left: 10px;
}
.header .container .right .user-info img
{
    width:30px;
    height:30px;
}
.header .container .right .user-info a
{
    color:white;
    text-decoration: none;
}
/*头部css样式结束*/
/*****************************************************************/
/*body css开始*/
.body
{
    background: lightcoral;
    height:500px;
}
.body .container
{

    background:lightseagreen;
    width:100%;
    height:283px;
}
.body .container .userinfo-top
{
    background: lightgreen;
    height: 64px;
    line-height: 64px;
}
.body .container .userinfo-top span
{
    font-size: 36px;
}
.body .container .userinfo-top .lv
{
    display:inline-block;
    background-image:url('../images/icon3.png');
    background-repeat: no-repeat;
    background-position: -36px 0px;
    width:16px;
    height: 16px;
}
.body .container .userinfo-top .fly
{
    display:inline-block;
    background-image:url('../images/icon.png');
    background-repeat: no-repeat;
    background-position: -204px -76px;
    width:34px;
    height: 22px;
}

.body .container .userinfo-center
{
    background: lightyellow;
    height:38px;
}

.body .container .userinfo-center .left
{
    float: left;
    background:lightgrey;
    width:228px;
    height:20px;
    line-height: 20px;

}

.body .container .userinfo-center .right
{

    background: lime;
    width:227px;
    height:37px;
    line-height: 37px;
    float: right;
}
.body .container .userinfo-center .right a
{
    display: inline-block;
    border:1px solid #cdcdcd;
    margin:0px 10px;
    width:80px;
    height:38px;
    border-radius: 30px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    background-color:grey;
}
/*body css 结束*/
/*****************************************************************/
/*底部css开始*/
.footer
{
    background: aqua;
    height: 100px;
}

/*底部css结束*/
/*****************************************************************/

 

执行：

 

 

完成图示布局

 

index.php

 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>疯一般的男人 http://65676666.qzone.qq.com</title>
<!--    引入bootstrap-->
    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css">
<!--    引入图标库font-awesome-->
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">
<!--    引入自定义css文件-->
    <link rel="stylesheet" type="text/css" href="static/css/site.css">
</head>
<body>
    <!--头部开始-->
    <div class="header">
        <!--顶部中间部分div开始-->
        <div class="container">
<!--            左边部分-->
            <div class="left">
                <a href="" class="logo"></a>
                <a href=""><i class="fa fa-home"> &nbsp;</i>他的主页</a>
                <a href=""><i class="fa fa-user"> &nbsp;</i>他的动态</a>

            </div>
<!--            左边部分-->

<!--            右边部分-->
            <div class="right">
                <div class="search-box">
                    <input type="text" placeholder="用户/游戏/动态">
                    <a href=""><i class="fa fa-search" aria-hidden="true"></i></a>
                </div>
                <div class="personal">
                    <span>|</span>
                    <a href="">&nbsp;返回个人中心&nbsp;</a>
                    <span>|</span>
                </div>
                <div class="user-info">
                    <img src="static/images/userinfo.jpg" alt="html页面部分3-QQ空间开发教程" alt="">
                    <a href="">追疯少年</a>
                    <a href="">[退出]</a>
                    <a href="">&nbsp;<i class="fa fa-cog" aria-hidden="true">&nbsp;</i></a>
                    <a href=""><i class="fa fa-diamond" aria-hidden="true"></i></a>
                </div>
            </div>
<!--            右边部分-->
        </div>
        <!--顶部中间部分结束-->
    </div>
    <!--头部结束-->

    <!--body开始-->
    <div class="body">
        <div class="container">
<!--            用户信息顶部-->
            <div class="userinfo-top">
                <span>追疯少年</span>
                <a href="" class="lv"></a>
                <a href="fly"class="fly"></a>
            </div>
<!--            用户信息中间部分-->
            <div class="userinfo-center">
                <div class="left">
                    <span>
                        追疯少年 http://77886.qzone.qq.com
                    </span>

                </div>
                <div class="right">
                    <span><a href=""><i class="fa fa-plus" aria-hidden="true">&nbsp;加好友</i></a></span>
                    <a href=""><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>&nbsp;赞&nbsp;|&nbsp;1</i></a>
                </div>
            </div>
<!--            用户信息底部-->
            <div class="userinfo-bottom">
                <div class="avatar">
                    <img src="static/images/userinfo.jpg" alt="html页面部分3-QQ空间开发教程" alt="" width="128"height="128">
                </div>
                <div class="user-detial">
                    <div class="user-name">
                        <span>追疯少年@123.com</span>
                    </div>
                    <div class="user-lv">
                        <div class="vip">
                            <img src="static/images/vip_year_8.png" alt="html页面部分3-QQ空间开发教程" alt="">
                        </div>
                        <div class="grow-value">
                            <div class="top">
                                <span>成长值 360000 成长速度 35点/天 </span>
                            </div>
                            <div class="bottom">
<!--                                bootstrap进度条-->
                                <div class="progress">
                                    <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                        <span class="sr-only">60% Complete (warning)</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="vip-year">
                            <a href=""><img src="static/images/icon-vip-fee-year.png" alt="html页面部分3-QQ空间开发教程" alt=""></a>
                            <a href="" class="level"></a>

                        </div>
                    </div>
                    <div class="nav">
                        <ul>
                            <li><a href="">主页</a></li>
                            <li><a href="">日志</a></li>
                            <li><a href="">留言板</a></li>
                            <li><a href="">相册</a></li>
                            <li><a href="">个人档</a></li>
                            <li><a href="">好友秀</a></li>
                            <li><a href="">更多</a></li>
                        </ul>
                    </div>
                </div>
                <div class="weather">
                    <img src="static/images/weather-cloudy-sunny.png" alt="html页面部分3-QQ空间开发教程" alt="">
                    <span class="temperature">30º</span>
                    <div class="city" style="float: right;width:100px;height:181px;">
                        <span>重庆</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--body结束-->

    <!--底部开始-->
    <div class="footer"></div>
    <!--底部结束-->
</body>
</html>

site.css

 

 

/*去除body与div之间的空隙*/
body
{
    margin: 0;
    padding:0;
}

/*头部css样式开始*/
/*****************************************************************/
.header
{
    /*添加背景好布局*/
    /*查看仿站颜色值的方法*/
    /*1.鼠标放在想仿制的位置，审查元素 查看css颜色值*/
    /*2.截图查看rgb值*/
    background: #d18b00;
    /*background: rgb(209,139,0);*/
    height: 40px;
    /*让内部元素垂直居中*/
    line-height: 40px;
}
.header .container .left
{
    /*左浮动*/
    float: left;
    /*background: red;*/
    /*宽度小于40 避免颜色覆盖*/
    height:30px;
    width: 320px;
}

.header .container .left .logo
{
    background-image: url('../images/icon.png');
    background-position: 0px 0px;
    width:90px;
    height: 40px;
    /*必须左浮动，否则图片出不来*/
    float: left;
}

.header .container .left  a
{
    color:white;
    text-decoration: none;
}
.header .container .left  i
{
    margin-left: 20px;
    font-size: 18px;
}
.header .container .right
{
    float:right;
    /*background: red;*/
    height:30px;
    width:460px;
}
.header .container .right .search-box
{
    float: left;
}
.header .container .right .search-box input
{
    width:135px;
    height:20px;
    background-color: rgb(221,168,63);
    border:none;
    border-radius: 4px;
    padding: 5px 8px;
}
.header .container .right .search-box input::-webkit-input-placeholder
{
    color:white;
    font-size:10px;
}
.header .container .right .search-box i
{
    color:white;
    margin-left:-30px;
}
.header .container .right .personal
{
    float: left;
    margin-left: 15px;
}
.header .container .right .personal a
{
    color:white;
    text-decoration: none;
}
.header .container .right .personal span
{
    color:lightsalmon;
}
.header .container .right .user-info
{
    float: left;
    margin-left: 10px;
}
.header .container .right .user-info img
{
    width:30px;
    height:30px;
}
.header .container .right .user-info a
{
    color:white;
    text-decoration: none;
}
/*头部css样式结束*/
/*****************************************************************/
/*body css开始*/
.body
{
    background: lightcoral;
    height:500px;
}
.body .container
{

    background:lightseagreen;
    height:283px;
}
.body .container .userinfo-top
{
    background: lightgreen;
    height: 64px;
    line-height: 64px;
}
.body .container .userinfo-top span
{
    font-size: 36px;
}
.body .container .userinfo-top .lv
{
    display:inline-block;
    background-image:url('../images/icon3.png');
    background-repeat: no-repeat;
    background-position: -36px 0px;
    width:16px;
    height: 16px;
}
.body .container .userinfo-top .fly
{
    display:inline-block;
    background-image:url('../images/icon.png');
    background-repeat: no-repeat;
    background-position: -204px -76px;
    width:34px;
    height: 22px;
}

.body .container .userinfo-center
{
    background: lightyellow;
    height:38px;
}

.body .container .userinfo-center .left
{
    float: left;
    background:lightgrey;
    width:228px;
    height:20px;
    line-height: 20px;

}

.body .container .userinfo-center .right
{

    background: lime;
    width:227px;
    height:37px;
    line-height: 37px;
    float: right;
}
.body .container .userinfo-center .right a
{
    display: inline-block;
    border:1px solid #cdcdcd;
    margin:0px 10px;
    width:80px;
    height:38px;
    border-radius: 30px;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    background-color:grey;
}
.body .container .userinfo-bottom
{
    background:red;
    height:181px;
}
.body .container .userinfo-bottom .avatar
{
    background:coral;
    width:128px;
    height:181px;
    float:left;
    line-height: 181px;
    padding:0 auto;
}
.body .container .userinfo-bottom .avatar img
{
    border:2px solid white;
    border-radius: 3px;
}
.body .container .userinfo-bottom .user-detial
{
    background:green;
    width:684px;
    height:181px;
    float:left;
    margin-left:20px;
}
.body .container .userinfo-bottom .user-detial .user-name
{
    background:blue;
    height:30px;
    line-height: 30px;
}
.body .container .userinfo-bottom .user-detial .user-name span
{
    font-size: 20px;
}
.body .container .userinfo-bottom .user-detial .user-lv
{
    background:deeppink;
    height:60px;
    line-height: 60px;
}
.body .container .userinfo-bottom .user-detial .user-lv .vip
{
    background:yellowgreen;
    width:60px;
    height:60px;
    line-height: 60px;
    float: left;

}
.body .container .userinfo-bottom .user-detial .user-lv .grow-value
{
    background:black;
    width:200px;
    height:60px;
    line-height: 60px;
    float: left;
    margin-left: 10px;
}
.body .container .userinfo-bottom .user-detial .user-lv .grow-value .top
{
    background: yellow;
    width:200px;
    height:30px;
    line-height: 30px;
}
.body .container .userinfo-bottom .user-detial .user-lv .grow-value .top span
{
    font-size: 8px;
}
.body .container .userinfo-bottom .user-detial .user-lv .grow-value .bottom
{
    background: red;
    width:200px;
    height:30px;
    line-height: 30px;
}
.body .container .userinfo-bottom .user-detial .user-lv .grow-value .bottom .progress
{
    height:8px;
}

.body .container .userinfo-bottom .user-detial .user-lv .vip-year
{
    background: red;
    width:200px;
    height:30px;
    line-height: 30px;
    float: left;
    margin-left:10px;
}
.body .container .userinfo-bottom .user-detial .user-lv .vip-year .level
{
    display: inline-block;
    background:url('../images/profile-v9-adg.png');
    background-position: -1372px -50px;
    width: 25px;
    height: 25px;
    padding: 10px;

}
.body .container .userinfo-bottom .user-detial .nav
{
    background:palegreen;
    height:91px;
    width:500px;
}
.body .container .userinfo-bottom .user-detial .nav ul
{
    list-style: none;
    margin-top:45px;
    margin-left:-40px;
}
.body .container .userinfo-bottom .user-detial .nav ul li
{
    float:left;
    margin-left:10px;
}
.body .container .userinfo-bottom .user-detial .nav ul li a
{
    color:#337ab7;
    font-size: 18px;
}
.body .container .userinfo-bottom .weather
{
    background:peru;
    width:210px;
    height:181px;
    line-height: 181px;
    float:right;
}
.body .container .userinfo-bottom .weather .img
{
    width:56px;
    height:56px;
}
.body .container .userinfo-bottom .weather .temperature
{
    font-size: 20px;
}
/*body css 结束*/
/*****************************************************************/
/*底部css开始*/
.footer
{
    background: aqua;
    height: 100px;
}

/*底部css结束*/
/*****************************************************************/

执行：

 

 
分享