主要内容部分(左)

关于这部分呢我主要是分了左边和右边两个内容：

我们先来看左边

可以知道是分为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">女&nbsp;上海</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">女&nbsp;上海</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>

效果：

HTML作业之粉粉滴个人博客来袭—篇章二相关推荐

HTML作业之粉粉滴个人博客来袭—篇章一
好久不见喽,今天带来一个我的Web作业,虽然说这个作业不是特别的难,但是里面涉及到的知识点真的还蛮多的,而且对于代码的整齐度阿,代码整体的流畅度我个人感觉真的得到了一定的提升,所以多大代码.多想.多做 ...
HTML5+CSS大作业——简单的程序员个人博客(7页) 大学个人博客网页制作教程表格布局网页模板
HTML5+CSS大作业--简单的程序员个人博客(7页) 大学个人博客网页制作教程表格布局网页模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家 ...
HTML期末大作业~简单的程序员个人博客网站模板源码(HTML+CSS)~个人主页博客web网页设计制作~HTML简单个人网页制作~Web大学生网页成品...
HTML期末大作业~ 简单的程序员个人博客网站模板源码(HTML+CSS)~学生HTML个人网页作业作品下载 ~个人主页博客网页设计制作 ~大学生个人网站作业模板 ~简单个人网页制作临近期末, 你还 ...
从入门到放弃，.net构建博客系统（二）：依赖注入
文章目录:<从入门到放弃,.net构建博客系统> 从入门到放弃,.net构建博客系统(一):系统构建从入门到放弃,.net构建博客系统(二):依赖注入上一篇中有讲到项目启动时会进行io ...
【轻博客观察之二】十问Tumblr
[轻博客观察之二]十问Tumblr 编者按:近来国内互联网界对轻博客的追捧进入了更为火热的阶段,许朝军的点点网,新浪的Qing,人人网的小站,盛大推他等一批Tumblr的追随者都朝着轻博客的方向大步前 ...
July博客第十二章参考学习
### July博客第十二章参考学习 ## 第一题:给40亿个不重复的unsigned int 的整数,无序,给一个随机数,快速判断这个是否在40亿个数当中 1. 个人思路: - bitmap,重点在 ...
Spring boot 搭建个人博客系统（二）——登录注册功能
Spring boot 搭建个人博客系统(二)--登录注册功能一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟 ...
企业级博客项目笔记(二)
企业级博客项目笔记(二) 一.数据持久化 1.JPA简介 JPA(Java Persistence API)是用于管理Java EE 和Java SE 环境中的持久化,以及对象/关系映射的Java A ...
WEB安全之PHP安全开发博客系统（二）：前台js登陆验证、套用模板主体修改登陆和后台样式
WEB安全之PHP安全开发博客系统(二):前台js登陆验证.套用模板主体修改登陆和后台样式前台验证模板的套用后台模板的套用前台验证做自动提交点击登陆,自动提交如果等于false,不会提 ...

HTML作业之粉粉滴个人博客来袭—篇章二

文章目录

主要内容部分(左)

效果

主要内容部分(右)

HTML作业之粉粉滴个人博客来袭—篇章二相关推荐

最新文章

热门文章