第一部分
仿照LOFTER做了一个个人博客页面,这是第一部分。
HTML部分代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>结业</title>
<link rel="stylesheet" type="text/css" href="08.css">
</head>
<body>
<div id="header">
<div id="header_content">
<div class="logo">
<a href=""><img src="images/logo.PNG"></a>
</div>
<div class="menu">
<ul>
<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>
<div class="t">
</div>
<div id="content">
<div class="left">
<div class="nav">
<div class="usr">
<a href="">
<img src="images/usr.jpg">
</a>
</div>
<div class="text">
<a href="">
<img src="images/text.PNG">
<div>文字</div>
</a>
</div>
<div class="camera">
<a href="">
<img src="images/camera.PNG">
<div>图片</div>
</a>
</div>
<div class="music">
<a href="">
<img src="images/music.PNG">
<div>音乐</div>
</a>
</div>
<div class="video">
<a href="">
<img src="images/video.PNG">
<div>视频</div>
</a>
</div>
<div class="article">
<a href="">
<img src="images/article.PNG">
<div>长文章</div>
</a>
</div>
</div>
<div class="t">
</div>
<div class="new">
<div class="new_myself">
<p>
<img src="images/usr.jpg" alt="头像" class="avator">
<h3>一句话</h3>
人生的面,见一面少一面。
</p>
<p class="menu">
<a href="">评论</a>
<a href="">分享</a>
</p>
</div>
<div class="t"></div>
<div class="new_2">
<img src="images/usr.jpg" alt="头像" class="avator">
<div class="card">
<div class="card-image">
<img src="images/sea.jpg" alt="大海">
</div>
<div class="card-body">
<div class="card-title">
<h2>随手记</h2>
</div>
<div class="author">
作者:urnotuj
</div>
</div>
</div>
<p class="menu">
<a href="">评论</a>
<a href="">分享</a>
</p>
</div>
</div>
</div>
<div class="right">
<div class="usrHome">
<p><a href=""><span>我的主页</span></p>
</div>
<div>
<ul>
<li><a href=""><span>文章</span></a></li>
<hr>
<li><a href=""><span>私信</span></a></li>
<hr>
<li><a href=""><span>设置</span></a></li>
<hr>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS代码如下:
body{
/*默认是有边距的,所以要清除*/
padding: 0;
margin:0;
}
.t{
height: 18px;
width: 100%;
float: left;
}
a{
text-decoration: none;
}
#header{
width: 100%;
height: 100px;
background-color: #262626;
}
#header_content{
margin: 0 auto;
width:900px;
}
#header_content .logo{
padding:5px 0px 5px 0px;
}
#heder_content img{
width: 280px;
height: 80px;
}
.logo, .menu{
float: left;
}
#header a{
color: #CCC;
font-size: 18px;
}
#header a:hover{
color: white;
}
.menu{
margin-top: 10px;
}
.menu>ul{
display: inline-block;
padding-left: 30px;
list-style: none;
}
.menu>ul>li{
display: inline-block;
float: left;
padding-left: 30px;
line-height: 45px;
}
#content{
width: 960px;
margin: 0 auto;
background: red;
}
#content .left{
width: 62%;
height: 700px;
float: left;
}
#content .left .nav{
width: 100%;
height: 110px;
float: left;
box-shadow: 3px 3px 3px 3px #CCC;
}
.nav img{
float: left;
width: 70px;
height: 70px;
}
.nav .usr img{
float: left;
width: 110px;
height: 110px;
}
.nav .text, .camera, .article, .video, .music{
float: left;
text-align: center;
margin-left: 20px;
}
.new .avator{
width: 80px;
height: 80px;
float: left;
border:1px dotted black;
margin:0px 15px 10px 0px;
}
.new_myself, .new_2{
width: 590px;
padding-left:15px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 3px 3px 3px 3px #CCC;
float: left;
}
.new_myself .menu{
font-size: 13px;
float: right;
margin-top: -10px;
margin-right: 8px;
}
.new_2 .card{
float: left;
width:440px;
height: 430px;
background-color: #CCC;
}
.card-image img{
width: 440px;
height: 300px;
}
.card-body{
padding: 10px 20px;
}
.card-title, .card-content{
text-align: left;
}
.new_2 .menu{
font-size: 13px;
float: right;
margin-right: 8px;
}
#content .right{
width: 32%;
float: right;
}
#content .right .usrHome{
padding-left: 20px;
box-shadow: 3px 3px 3px 3px #CCC;
font-size: 26px;
}
.usrHome p{
padding-top: 6px;
padding-bottom: 6px;
}
.right span{
color: black;
}
#content .right ul{
margin: 0px;
padding: 0px;
list-style:none;
box-shadow: 2px 2px 2px 2px #CCC;
}
#content .right ul>li{
margin-top: 5px;
padding-left: 20px;
}
结果如下图: