HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="./css/myblog.css">
</head>
<body>
<div id="container">
<div id="nav">
<img id="me" src="./img/头像.jpg">
<ul>
<li><img src="./img/文章.png"><a href="#" class="line">文章</a></li>
<li><img src="./img/图片.png"><a href="#" class="line">图片</a></li>
<li><img src="./img/音乐.png"><a href="#" class="line">音乐</a></li>
<li><img src="./img/视频.png"><a href="#" class="line">视频</a></li>
</ul>
</div>
<div id="content">
<div id="lside">
<p>
哪里有土,哪里有水,哪里就长着草。<br/>
你要到远处寻觅吗?你最后一定会回来的,<br/>
在你所熟悉的东西中找到最好的,<br/>
或者像最好者一样好, <br/>
在你最亲近的人中找到最中意的、最强健的和最爱你的...... <br/>
幸福、知识,不在别处而在这里。<br/>
</p>
<p>
没有哪座为自由而牺牲者的坟墓不长出自由的种子, <br/>
而种子又必然生出种子, <br/>
春风带它们到远方播种,雨雪将滋养它们。<br/>
没有哪个被解脱躯壳的灵魂是暴君的武器所能吓跑, <br/>
它将在大地上到处无形地前进,低语着,商量着,告诫着。<br/>
自由,让别人对你失望去吧 <br/>
我永远不对你失望。<br/>
—————《草叶集》
</p>
</ul>
</div>
<div id="rside">
<img class="right_img" src="./img/个人中心.png">
<img class="right_img" src="./img/name.jpg">
<ul>
<li class="line1"><a href="#"><img src="./img/one.jpg"></a></li>
<li class="line1"><a href="#"><img src="./img/two.jpg"></a></li>
<li class="line1"><a href="#"><img src="./img/three.jpg"></a></li>
<li class="line1"><a href="#"><img src="./img/four.jpg"></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
css:
a:link{
color:white;
}
a:visited{
color:#008080;
}
a:hover{
color:#00FF7F;
}
body{
background:#90EE90;
}
#container{
width: 1002px;
margin: 0px auto;
}
#nav{
margin-bottom: 5px;
height:100px;
background:#3CB371;
}
#content{
height:500px;
background:white;
}
#lside{
width: 695px;
height: 520px;
margin-right: 5px;
background:#8FBC8F;
float:left;
}
#rside{
width: 302px;
height: 520px;
background:#8FBC8F;
text-align:center;
float: left;
}
#me{
float: left;
}
ul li{
list-style-type: none;
float:left;
text-align: center;
font: normal bold 18px "SimHei";
height: 80px;
width: 60px;
margin: 5px 75px 5px 75px;
}
.line{
text-decoration: none;
}
.right_img{
margin: 8px 5px 5px 5px;
}
.line1{
list-style-type: none;
width:180px;
}
#lside p {
margin: 65px 10px 65px 25px;
list-style-type: none;
font: normal 18px "SimHei";
color: white;
}
.lside1{
float: left;
width: 300px;
height: 250px
}