<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<!--引入css文件用link标签-->
<link href="blog.css" type="text/css" rel="stylesheet" />
<!--<script type="text/javascript" src=""></script>-->
</head>
<body>
<div id="box">
<div id="banner">
<img src="images/bg.jpg" alt="我的图片不见了" />
</div>
<div id="menu">
<!--ol是有序列表1,2,3 ul无续列表-->
<ul>
<li><a href="http://www.baidu.com" target="_blank">首页</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">阳光生活</a></li>
<li><a href="#">释放梦想</a></li>
<li><a href="#">留言</a></li>
</ul>
</div>
<div id="main">
<!--左边区域-->
<div id="left">
<!--划分3个区域-->
<div id="zuozhe">
<img src="images/baby.jpg" alt="我的照片"/>
<!--文字,span方便对文字的样式修改，一行，不换行-->
<span>linda zhaoqi</span>
</div>
<div id="huoli">
<!--class通用在3个标题上的样式-->
<h5 class="biaoti">活力地带</h5>
<ul>
<li>
<img src="images/1.gif" alt="小图标"/>
<a href="#">个人首页</a>
</li>
<li>
<img src="images/2.gif" alt="小图标"/>
<a href="#">校园文化</a>
</li>
<li>
<img src="images/3.gif" alt="小图标"/>
<a href="#">阳光生活</a>
</li>
<li>
<img src="images/4.gif" alt="小图标"/>
<a href="#">释放梦想</a>
</li>
<li>
<img src="images/5.gif" alt="小图标"/>
<a href="#">我的相册</a>
</li>
<li>
<img src="images/6.gif" alt="小图标"/>
<a href="#">给我留言</a>
</li>
</ul>
</div>
<div id="list">
<h5 class="biaoti">我的文章分类</h5>
<ul>
<li><a href="#">个人随笔</a></li>
<li><a href="#">Web开发</a></li>
<li><a href="#">Spring框架</a></li>
<li><a href="#">JavaSE</a></li>
</ul>
<h5 class="biaoti">文章列表</h5>
<ul>
<li><a href="#">我家在哪里</a></li>
<li><a href="#">你好！秋天</a></li>
<li><a href="#">你好！春天</a></li>
<li><a href="#">你好！冬天</a></li>
</ul>
</div>
</div>
<div id="right">
右边区域
</div>
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>
打完之后的效果很不错，感觉这个东西还很有趣
忘记怎么截图了，效果就不放了。。。。
3722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
