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

靓仔 517

 

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

 

2.截图查看rgb值

 

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

 

 

background: #d18b00;

执行：

 

 

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

 

引入bootstrap实现此功能

 

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自动居中：

 

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

 

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样式结束*/
/*****************************************************************/

执行：

 

 

QQ空间图标导入

 

图标下载方式：

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

 

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

 

可以看到，该图片中有多个图标需要使用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.检查图片，资源是否加载正确

 

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

 

 

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

 

 

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

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

下载后放入static目录

 

在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>

执行：

 

 

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

site.css

 

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

执行：

 

 

让图标变为白色  变大一点

 

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;
}

执行：

 

 

他的主页：

 

index:

 

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

执行：

 

 

完善顶部布局：

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页面部分2-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>
    <!--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.bootstrap3.3.7

 

 

本页源码：

 

 

 

 

 
分享