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

靓仔 503

 

 

 

新建qzone目录  新建index.php

 

基本结构，代码：

 

<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>疯一般的男人 http://65676666.qzone.qq.com</title>
</head>
<body>
    <!--头部开始-->
    <div class="header"></div>
    <!--头部结束-->

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

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

新建site.css

 

代码：

 

/*头部css样式开始*/
/*****************************************************************/
.header
{
    /*添加背景好布局*/
    background: lightblue;
    height: 40px;
}
.body
{
    background: lightcoral;
    height:500px;
}
.footer
{
    background: aqua;
    height: 100px;
}

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

index.php引入css

 

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">
</head>
<body>
    <!--头部开始-->
    <div class="header"></div>
    <!--头部结束-->

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

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

执行：

 

去除div和body之间的间隙，即上左右之间的空隙

site.csss:

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

/*头部css样式开始*/
/*****************************************************************/
.header
{
    /*添加背景好布局*/
    background: lightblue;
    height: 40px;
}
.body
{
    background: lightcoral;
    height:500px;
}
.footer
{
    background: aqua;
    height: 100px;
}

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

执行：

 
分享