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

督构蝗叹软艾屏姜慑眠持逛波

查看仿站颜色值的方法
1.鼠标放在想仿制的位置，审查元素查看css颜色值

2.截图查看rgb值

修改site.css里面的div header的背景色

background: #d18b00;

执行：

1-2html页面部分2-QQ空间开发教程第1张

目标网站顶部中间元素居中：

1-2html页面部分2-QQ空间开发教程第2张

引入bootstrap实现此功能

1-2html页面部分2-QQ空间开发教程第3张

index.php:

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>疯一般的男人 http://65676666.qzone.qq.com</title>
    <link rel="stylesheet" type="text/css" href="static/css/site.css">
    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!--头部开始-->
    <div class="header">
        <!--顶部中间部分div开始-->
        <div class="container">bfbfghbhjd</div>
        <!--顶部中间部分结束-->
    </div>
    <!--头部结束-->

    <!--body开始-->
    <div class="body"></div>
    <!--body结束-->

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

执行，可以看到containter自动居中：

1-2html页面部分2-QQ空间开发教程第4张

目标顶部再分左右两部分：

1-2html页面部分2-QQ空间开发教程第5张

index.php

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>疯一般的男人 http://65676666.qzone.qq.com</title>
    <link rel="stylesheet" type="text/css" href="static/css/site.css">
    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!--头部开始-->
    <div class="header">
        <!--顶部中间部分div开始-->
        <div class="container">
<!--            左边部分-->
            <div class="left"></div>
<!--            左边部分-->

<!--            右边部分-->
            <div class="right"></div>
<!--            右边部分-->
        </div>
        <!--顶部中间部分结束-->
    </div>
    <!--头部结束-->

    <!--body开始-->
    <div class="body"></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;
}
.header .container .left
{
    /*左浮动*/
    float: left;
    background: red;
    /*宽度小于40 避免颜色覆盖*/
    height:30px;
    width: 320px;
}
.header .container .right
{
    float:right;
    background: red;
    height:30px;
    width:460px;
}
.body
{
    background: lightcoral;
    height:500px;
}
.footer
{
    background: aqua;
    height: 100px;
}

/*头部css样式结束*/
/*****************************************************************/

执行：

1-2html页面部分2-QQ空间开发教程第6张

QQ空间图标导入

1-2html页面部分2-QQ空间开发教程第7张

图标下载方式：

打开QQ空间-鼠标放在图标上-审查元素-styles-url地址-upen link in new tab

1-2html页面部分2-QQ空间开发教程第8张

保存文件，并复制到当前项目的images文件夹

1-2html页面部分2-QQ空间开发教程第9张

可以看到，该图片中有多个图标需要使用css定位到QQ空间图标

index.php

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>疯一般的男人 http://65676666.qzone.qq.com</title>
    <link rel="stylesheet" type="text/css" href="static/css/site.css">
    <link rel="stylesheet" type="text/css" href="static/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <!--头部开始-->
    <div class="header">
        <!--顶部中间部分div开始-->
        <div class="container">
<!--            左边部分-->
            <div class="left">
                <a href="" class="logo"></a>
            </div>
<!--            左边部分-->

<!--            右边部分-->
            <div class="right">

            </div>
<!--            右边部分-->
        </div>
        <!--顶部中间部分结束-->
    </div>
    <!--头部结束-->

    <!--body开始-->
    <div class="body"></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;
}
.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 .right
{
    float:right;
    background: red;
    height:30px;
    width:460px;
}
.body
{
    background: lightcoral;
    height:500px;
}
.footer
{
    background: aqua;
    height: 100px;
}

/*头部css样式结束*/
/*****************************************************************/

执行：

1-2html页面部分2-QQ空间开发教程第10张

调试技巧

1.检查图片，资源是否加载正确

1-2html页面部分2-QQ空间开发教程第11张

2.css样式更改，直接在style上面改

1-2html页面部分2-QQ空间开发教程第12张

引入图示目标网站图标文件

1-2html页面部分2-QQ空间开发教程第13张

可以下载目标网站的图片，这里使用第三方图标库Font Awesome

Font Awesome中文网：http://www.fontawesome.com.cn/

下载后放入static目录

1-2html页面部分2-QQ空间开发教程第14张

在index中引入css文件及引入主页图标

核心源码：

<!--    引入图标库font-awesome-->
    <link rel="stylesheet" type="text/css" href="static/font-awesome/css/font-awesome.min.css">

<div class="left">
       <a href="" class="logo"></a>
       <i class="fa fa-home"> </i>
</div>

执行：

1-2html页面部分2-QQ空间开发教程第15张

让图标居中只需要父级元素line-height=40px即可即header的line-height:40px;

site.css

.header
{
    background: #d18b00;
    /*background: rgb(209,139,0);*/
    height: 40px;
    /*让内部元素垂直居中*/
    line-height: 40px;
}

执行：

1-2html页面部分2-QQ空间开发教程第16张

让图标变为白色变大一点

index.php核心源码：

            <div class="left">
                <a href="" class="logo"></a>
                <a href="" class="home"><i class="fa fa-home"> </i></a>
            </div>

site.css核心源码：

.header .container .left .home
{
    color: white;
    font-size: 18px;
    margin-left:10px;
}

执行：

1-2html页面部分2-QQ空间开发教程第17张

他的主页：

index:

<div class="left">
                <a href="" class="logo"></a>
                <a href="" class="home"><i class="fa fa-home"> </i>他的主页</a>
            </div>

执行：

1-2html页面部分2-QQ空间开发教程第18张

完善顶部布局：

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"  >
                    <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>
    <!--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;
}
.body
{
    background: lightcoral;
    height:500px;
}
.footer
{
    background: aqua;
    height: 100px;
}

/*头部css样式结束*/
/*****************************************************************/

执行：

1-2html页面部分2-QQ空间开发教程第19张