资源描述
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作个人网站首页</title>
<style type="text/css">
*{margin:0;padding:0;}
a{text-decoration:none;}
ul{list-style:none;}
img{border:none;}
body{background:#333;
text-align:center;}
.main{width:872px;
height:568px;
margin:60px auto 0;
background:#FFF;}
.left{float:left;
width:437px;height:568px;
background:url(file:///F|/css/源代码/18/images/leftCol_bg.gif) no-repeat;}
.mid{float:left;
width:322px;height:568px;
background:url(file:///F|/css/源代码/18/images/midCol_bg.gif) repeat-x;)}
.right{float:right;
width:113px;height:568px;
background:url(file:///F|/css/源代码/18/images/rightCol_bg.gif) no-repeat;)}
#photo{float:right;
display:inline;
width:108px;
margin:20px 3px 0 0;}
#photo h4{font-size:14px;
font-weight:normal;
border-bottom:1px solid #fff;
line-height:30px;}
#photo li{padding:5px 0;}
#photo li img{border:1px solid #fff;}
.article{width:300px;height:170px;
margin:10px auto 5px;
font-size:12px;
text-align:left;}
#firstarticle{margin-top:20px;}
.article h4{border-bottom:1px solid #fff;
font-size:14px;
font-weight:normal;
color:#fff;
line-height:30px;
text-indent:20px;
background:url(file:///F|/css/源代码/18/images/article_marker.gif) no-repeat left;}
.article span{float:right;
color:#fff;
text-align:right;}
.article a{color:#fff;}
.article a:hover{text-decoration:underline;}
.article li{line-height:20px;}
#nav{width:99px;
float:right;
display:inline;
margin:30px 14px 0 0;}
#nav li{line-height:30px;
font-size:14px;}
#nav ul li a{color:#fff;
display:block;
width:99px;
height:30px;}
#nav a:hover{background:url(file:///F|/css/源代码/18/images/nav_hover.gif) repeat-x;}
#home{background:url(file:///F|/css/源代码/18/images/nav_hover.gif) repeat-x;}
</style>
</head>
<body>
<div class="main">
<div class="left">
<div id="photo">
<h4>风景相册</h4>
<ul>
<li><a href="#"><img src="file:///F|/css/源代码/18/images/pic1.gif" alt=""/></a></li>
<li><a href="#"><img src="file:///F|/css/源代码/18/images/pic2.gif" alt=""/></a></li>
<li><a href="#"><img src="file:///F|/css/源代码/18/images/pic3.gif" alt=""/></a></li>
<li><a href="#"><img src="file:///F|/css/源代码/18/images/pic4.gif" alt=""/></a></li>
</ul>
</div>
</div>
<div class="mid">
<div class="article" id="firstarticle">
<h4>最新日志</h4>
<ul>
<li><span>2008-10-9</span><a href="#">-候鸟找到了适合自己栖息的家</a></li>
<li><span>2008-10-9</span><a href="#">-怀念你，去年的那一场雪</a></li>
<li><span>2008-10-9</span><a href="#">-蓝色融入了血液</a></li>
<li><span>2008-10-9</span><a href="#">-夜晚星空闪烁的时候</a></li>
<li><span>2008-10-9</span><a href="#">-成长你生命中的榕树</a></li>
<li><span>2008-10-9</span><a href="#">-写你的名字</a></li>
</ul>
</div>
<div class="article">
<h4>最新留言</h4>
<ul>
<li><span>2008-10-9</span><a href="#">小米：我来看你了</a></li>
<li><span>2008-10-9</span><a href="#">竹叶子：十一放假去哪里玩儿了</a></li>
<li><span>2008-10-9</span><a href="#">小米：去了挺多地方玩啊</a></li>
<li><span>2008-10-9</span><a href="#">婷婷：什么时候换背景，很漂亮</a></li>
<li><span>2008-10-9</span><a href="#">小米：你有没有啊紫的电话啊</a></li>
<li><span>2008-10-9</span><a href="#">楚天：有准时吃饭吗</a></li>
</ul>
</div>
<div class="article">
<h4>旅游日志</h4>
<ul>
<li><span>2008-10-9</span><a href="#">-候鸟找到了适合自己栖息的家</a></li>
<li><span>2008-10-9</span><a href="#">-怀念你，去年的那一场雪</a></li>
<li><span>2008-10-9</span><a href="#">-蓝色融入了我的血液</a></li>
<li><span>2008-10-9</span><a href="#">-夜晚星空闪烁的时候</a></li>
<li><span>2008-10-9</span><a href="#">-让我长成你生命中的榕树</a></li>
<li><span>2008-10-9</span><a href="#">-写你的名字</a></li>
</ul>
</div>
</div>
<div class="right">
<div id="nav">
<ul>
<li><a href="#" id="home">首页</a></li>
<li><a href="#">日志</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">相册</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>
</div>
</body>
</html>
leftCol_bg.gif
pic1.gif pic2.gif pic3.gif
pic4.gif
rightCol_bg.gif
nav_hover.gif
midCol_bg.gif
article_marker.gif
展开阅读全文
浙ICP备2021020529号-1 | 浙B2-20240490 
