模仿QQ空间-首页

前言

最近在看《精通CSS.DIV网页样式与布局》这本书，从0开始，其实之前每个项目都用过CSS了，这个才整体的学习一遍，书上的例子，自己都敲了一遍，在第五章的时候一个练习，设置自己的个人主页，我简单的改了一下，模仿QQ的QQ空间。

步骤

1.首先选择自己喜欢的一副图片作为首页上方的图片，添加“个人主页”等必要文字信息。

2.选择一个好看的背景，通过CSS添加到< body>标记中

 body{
            background:url(IMG/bg9.gif);
            margin:0px;padding:0px;
    
        }

再将个人主页图片用

标记居中排列，添加在页面最上方，HTML代码如下：

<table align="center" cellpadding="1" cellspacing="0">
        <tr><td><img src="IMG/banner3.jpg" width="800" border="0"/>
    
    </table>

3.然后制作导航条：

CSS代码：

   .charal{
            font-size:12px;
            background-color:#90bcff;
        }
        .charal td{
            text-align:center;
        }

HTML代码：

<table cellpadding="2" cellspacing="2" class="charal" align="center">
        <tr>
            <td><a href="#">个人中心</a></td>
            <td><a href="#">说说</a></td>
            <td><a href="#">日志</a></td>
            <td><a href="#">相册</a></td>
            <td><a href="#">留言</a></td>
            <td><a href="#">访客</a></td>
        </tr>
    </table>

4.正文背景任意添加图片
CSS代码：

  .charal2{
            background-color:#d2e7ff;
            text-align:center;
            font-size:12px;
            vertical-align:top;
        }
        .charal3{
            background:#e9fbff url(IMG/self.jpg) no-repeat bottom right;
            vertical-align:top;
            padding-top:15px;padding-left:30px;
            font-size:12px;padding-right:15px;
        }
          .pic1{
            border:1px solid #00406c;

        }
        p.leftcontent{
            padding-left:15px;
            padding-right:10px;
            text-align:left;
            color:#001671;
        }
        h4{
            text-decoration:underline;
            color:#0078aa;
            padding-top:15px;
        }

HTML代码：

 <table align="center" cellpadding="0" cellspacing="1">
        <tr>
            <td width="100px" class="charal2">
                <br>
                <p><img src="IMG/cutcamera.png" width="200"class="pic1"><br><a href="#">个人设置</a></p>
                <p class="leftcontent"></p>
                <p>
                    <img src="IMG/bg7.jpg" width="200" class="pic1">
                    <br /><a href="#">相册</a>
                </p>
                <p class="leftcontent"></p>
            </td>
            <td class="chara3">
                <h4> &nbsp; 介绍</h4>
                <p>    &nbsp;你好，我是人</p>
                <h4>  &nbsp; 相册</h4>
                <p>
                    &nbsp; 下雪了<br />
                    <img src="IMG/bg4.jpg" />
                </p>
                <h4>  &nbsp; 留言板</h4>
                <p>
                    &nbsp;你喜欢的人给你留言了
                </p>
                <h4>  &nbsp; 向左走向右走</h4>
                <p>
                    &nbsp; They're both convinced<br>
                    &nbsp; that a sudden passion joined them.<br>
                    &nbsp;  Such certainth is beautiful,<br>
                    &nbsp; but uncertainty is more beautiful still.
                </p>
                <br>
            </td>
        </tr>

    </table>

5.最终效果图

总结

一步一步来，打好基础。