前言 |
最近在看《精通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> 介绍</h4>
<p> 你好,我是人</p>
<h4> 相册</h4>
<p>
下雪了<br />
<img src="IMG/bg4.jpg" />
</p>
<h4> 留言板</h4>
<p>
你喜欢的人给你留言了
</p>
<h4> 向左走向右走</h4>
<p>
They're both convinced<br>
that a sudden passion joined them.<br>
Such certainth is beautiful,<br>
but uncertainty is more beautiful still.
</p>
<br>
</td>
</tr>
</table>
5.最终效果图
总结 |
一步一步来,打好基础。