来啦来啦,继续继续,如果还没有看过篇章一的,传送门在这里:快乐星球
主要内容部分(左)
关于这部分呢我主要是分了左边和右边两个内容:
我们先来看左边
可以知道是分为3个部分,同样的道理,先建层
html部分
<!-- content begin -->
<div id="content">
<div id="left">
<div class="zb"> 1</div>
<div class="zb"> 2 </div>
<div class="zb"> 3</div>
</div>
</div>
<!-- content end -->
css部分
#content{
/* 设置一下宽和高,方便后续 */
width: 864px;
height: 850px;
background: url("./images/body.gif") center;
}
#left{
/* 左边的区域大小 */
width: 200px;
height: 850px;
float: left;
padding: 0 0 0 50px;
/* 整体距离左移一些 */
}
.zb{
/* */
border: 1px solid #f46490;
margin-bottom: 7px;
margin-top: 7px;
}
然后把这三个部分的文字、图片补上,在此之前,我们再来设置一个类叫做lt,这个类的文字居中、图片也居中
.lt{
text-align: center;
}
.lt img{
display:block;
position:relative;
margin:auto;
}
全部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<style type="text/css">
body{
font-size: 12px;
color: #f46490;
/* 字体默认的大小和颜色 */
background: url("./images/background.jpg") repeat;
padding: 0;
/* 四条边距均为0px */
}
#parent {
/* 动态效果图 */
width: 100%;
height:100%;
background:url("./images/fl.gif") no-repeat;
background-size: cover;
background-attachment: fixed;
}
#container {
/* 最外层容器大小 */
width: 867px;
height: auto;
/* 注意一下 */
margin: 0 auto;
}
#header{
width: 867px;
height: 408px;
}
#nav{
width: 867px; /*和容器一样的宽度噢*/
height: 30px;
position: relative;
background: url("./images/nav.gif") no-repeat;
margin: 0 auto;
}
#nav ul{
height: 30px;
list-style-type: none;
/* 去掉前面的●圆圈 */
/* float: left; */
margin: 0 auto;
padding: 0 0 0 80px;
/* 这个就是设置这整体的导航栏的左移的距离! */
}
#nav ul li{
width: 65px;
height: 30px;
/* 别忘记这个高度,是一直不变的!不然会导致对不齐 */
float: left;
/* 浮动让它呈现横向导航栏 */
padding: 0 20px;
/* 设置每个内容之间的边距 */
}
#nav ul li a {
color: #f46490;
font-weight: bold;
font-size: 12px;
line-height: 30px;
/* 别忘记了! */
text-decoration: none;
/* 去掉超链接的下划线 */
display: inline-block;
}
a:hover{
color: #666;
/* 设置点击之后字体变色 */
}
#content{
/* 设置一下宽和高,方便后续 */
width: 864px;
height: 850px;
background: url("./images/body.gif") center;
}
#left{
/* 左边的区域大小 */
width: 200px;
height: 850px;
float: left;
padding: 0 0 0 50px;
/* 整体距离左移一些 */
}
.zb{
/* 设置边框和边距 */
border: 1px solid #f46490;
margin-bottom: 7px;
margin-top: 7px;
}
.lt{
text-align: center;
}
.lt img{
display:block;
position:relative;
margin:auto;
}
</style>
</head>
<body>
<div id="parent">
<div id="container">
<!-- header begin -->
<div id="header">
<img src="./images/top.gif" alt="">
</div>
<!-- header end -->
<!-- nav begin -->
<div id="nav">
<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>
<li><a href="#">留言板</a></li>
<li><a href="#">我的音乐</a></li>
</ul>
</div>
<!-- nav end -->
<!-- content begin -->
<div id="content">
<div id="left">
<div class="zb">
<div class="lt"><img src="./images/grzl.jpg" alt=""/></div>
<div class="lt"><img src="./images/head.jpg" alt=""/></div>
<div class="lt">掌柜</div>
<div class="lt">女 上海</div>
<div class="lt"><img src="./images/jwhy.jpg" alt=""/></div>
<div class="lt">----------------------------------------------------</div>
<div class="lt">已有200人加她为好友</div>
<div class="lt"><img src="./images/tt.jpg"></div>
</div>
<div class="zb">
<div class="lt"><img src="./images/fl.jpg" alt=""/></div>
<div class="lt">
<ul>
<li>博文</li>
<li>散文</li>
<li>杂文</li>
</ul>
</div>
</div>
<div class="zb">
<div class="lt"><img src="./images/yqlj.jpg"></div>
<div class="lt">欢迎大家来我的博客!</div>
</div>
</div>
</div>
<!-- content end -->
<!-- footer begin -->
<div id="footer"></div>
<!-- footer end -->
</div>
</div>
</body>
</html>
效果
主要内容部分(右)
右边的话,就比较直接一点,比较烦的就是:如何实现图片和文字在同一行的问题,还有就是文本首行换行的问题
不想再解释啦,我写代码的习惯和套路大家应该都熟悉啦,就直接上代码了噢
<div id="rigth">
<div id="yb1"><img src="./images/bw.jpg" alt=""/></div>
<div id="yb2">
<div class="divs">
<div class="imgs"><img src="./images/ico.gif" alt="" /></div>
<h1>春天的到来</h1>
</div>
<div id="yb3">
<p>流光溢彩的烟花,</p>
<p>清脆响亮的鞭炮,</p>
<p>昭示着又一个春节的到来。</p>
<p>早春的风雪激荡起开心的欢笑,</p>
<p>大红灯笼映现出点点暖意,</p>
<p>空气中迷漫着温馨而热烈的气息。</p>
<p>请财神、选对联、买鞭炮、购年货……</p>
<p>行色匆匆中,</p>
<p>人们感受到了日子的芳香与忙碌,</p>
<p>时间也在这盛大的节日里散发出沉淀已久的醇香。</p>
<p>餐桌沉沉,</p>
<p>谱写着深深的期盼与祝福。</p>
<p>亲人们相互依靠,</p>
<p>互赠快乐,</p>
<p>静静体味着家的温馨,</p>
<p>灵魂的皱纹在这最深最沉的时刻得以温柔的伸展。</p>
<p>幸福的感觉就这样点点滴滴地渗透到了人们的心里。</p>
<div class="lt">
阅读(56) | 评论(34) | 收藏(12)
</div>
<hr width="500px" color="#f46490">
</div>
</div>
</div>
好啦,后面的就不想再做解析啦,因为比较简单,那就直接放全部代码了
全部代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Blog</title>
<style type="text/css">
body{
font-size: 12px;
color: #f46490;
/* 字体默认的大小和颜色 */
background: url("./images/background.jpg") repeat;
padding: 0;
/* 四条边距均为0px */
}
#parent {
/* 动态效果图 */
width: 100%;
height:100%;
background:url("./images/fl.gif") no-repeat;
background-size: cover;
background-attachment: fixed;
}
#container {
/* 最外层容器大小 */
width: 867px;
height: auto;
/* 注意一下 */
margin: 0 auto;
}
#header{
width: 867px;
height: 408px;
}
#nav{
width: 867px; /*和容器一样的宽度噢*/
height: 30px;
position: relative;
background: url("./images/nav.gif") no-repeat;
margin: 0 auto;
}
#nav ul{
height: 30px;
list-style-type: none;
/* 去掉前面的●圆圈 */
/* float: left; */
margin: 0 auto;
padding: 0 0 0 80px;
/* 这个就是设置这整体的导航栏的左移的距离! */
}
#nav ul li{
width: 65px;
height: 30px;
/* 别忘记这个高度,是一直不变的!不然会导致对不齐 */
float: left;
/* 浮动让它呈现横向导航栏 */
padding: 0 20px;
/* 设置每个内容之间的边距 */
}
#nav ul li a {
color: #f46490;
font-weight: bold;
font-size: 12px;
line-height: 30px;
/* 别忘记了! */
text-decoration: none;
/* 去掉超链接的下划线 */
display: inline-block;
}
a:hover{
color: #666;
/* 设置点击之后字体变色 */
}
#content{
/* 设置一下宽和高,方便后续 */
width: 864px;
height: 850px;
background: url("./images/body.gif") center;
}
#left{
/* 左边的区域大小 */
width: 200px;
height: 850px;
float: left;
padding: 0 0 0 50px;
/* 整体距离左移一些 */
}
.zb{
/* 设置边框和边距 */
border: 1px solid #f46490;
margin-bottom: 7px;
margin-top: 7px;
}
.lt{
text-align: center;
}
.lt img{
display:block;
position:relative;
margin:auto;
}
#right{
width: 550px;
float: right;
padding: 0 35px 0 0;
}
.zb{
padding: 5 0 0 0;
border: 1px solid #f46490;
margin-bottom: 7px;
margin-top: 7px;
}
#yb1 img{
padding: 0 0 0 10px;
}
#yb2{
line-height: 25px;
}
.divs,.imgs{
display: inline-block;
vertical-align: middle;
padding: 0 0 0 20px;
margin-right: 10px;
}
.divs,h1{
display: inline-block;
}
#yb3{
line-height: 20px;
color: #f46490;
}
p{
text-indent: 10em;
}
#footer{
background: url("./images/body.gif");
height: 70px;
width: 870px;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="parent">
<div id="container">
<!-- header begin -->
<div id="header">
<img src="./images/top.gif" alt="">
</div>
<!-- header end -->
<!-- nav begin -->
<div id="nav">
<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>
<li><a href="#">留言板</a></li>
<li><a href="#">我的音乐</a></li>
</ul>
</div>
<!-- nav end -->
<!-- content begin -->
<div id="content">
<div id="left">
<div class="zb">
<div class="lt"><img src="./images/grzl.jpg" alt=""/></div>
<div class="lt"><img src="./images/head.jpg" alt=""/></div>
<div class="lt">掌柜</div>
<div class="lt">女 上海</div>
<div class="lt"><img src="./images/jwhy.jpg" alt=""/></div>
<div class="lt">----------------------------------------------------</div>
<div class="lt">已有200人加她为好友</div>
<div class="lt"><img src="./images/tt.jpg"></div>
</div>
<div class="zb">
<div class="lt"><img src="./images/fl.jpg" alt=""/></div>
<div class="lt">
<ul>
<li>博文</li>
<li>散文</li>
<li>杂文</li>
</ul>
</div>
</div>
<div class="zb">
<div class="lt"><img src="./images/yqlj.jpg"></div>
<div class="lt">欢迎大家来我的博客!</div>
</div>
</div>
<div id="rigth">
<div id="yb1"><img src="./images/bw.jpg" alt=""/></div>
<div id="yb2">
<div class="divs">
<div class="imgs"><img src="./images/ico.gif" alt="" /></div>
<h1>春天的到来</h1>
</div>
<div id="yb3">
<p>流光溢彩的烟花,</p>
<p>清脆响亮的鞭炮,</p>
<p>昭示着又一个春节的到来。</p>
<p>早春的风雪激荡起开心的欢笑,</p>
<p>大红灯笼映现出点点暖意,</p>
<p>空气中迷漫着温馨而热烈的气息。</p>
<p>请财神、选对联、买鞭炮、购年货……</p>
<p>行色匆匆中,</p>
<p>人们感受到了日子的芳香与忙碌,</p>
<p>时间也在这盛大的节日里散发出沉淀已久的醇香。</p>
<p>餐桌沉沉,</p>
<p>谱写着深深的期盼与祝福。</p>
<p>亲人们相互依靠,</p>
<p>互赠快乐,</p>
<p>静静体味着家的温馨,</p>
<p>灵魂的皱纹在这最深最沉的时刻得以温柔的伸展。</p>
<p>幸福的感觉就这样点点滴滴地渗透到了人们的心里。</p>
<div class="lt">
阅读(56) | 评论(34) | 收藏(12)
</div>
<hr width="500px" color="#f46490">
</div>
</div>
</div>
</div>
<!-- content end -->
<!-- footer begin -->
<div id="footer">
亲情链接 | 联系方式 |留言簿 |联系我们 pyright All Right Recovert
</div>
<!-- footer end -->
</div>
</div>
</body>
</html>
效果: