人物介绍的排版【小白进】

很多时候我们要写这样的
图片+文字的布局

那这样的布局是怎么实现的呢
其实很简单`

HTML代码

<!--外层的盒子-->
<div class="div2"><!--这里是人物的照片--><div class="img"><img src="./img/libai.jpg" alt=""></div><!--这里就是文本了--><p>李白 <img src="./img/speaker.png" alt=""> </p><p>李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。李白深受黄老列庄思想影响，有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》《早发白帝城》等多首。<a href="#"><span>>>1178篇诗文</span></a></p>
</div>

再来看它的css

.div2 {width: 100%;position: relative;height: 450px;background-color: #F0EFE2;
}
.div2 .img {float: left;padding: 20px;
}
.div2 p {font-size: 20px;line-height: 2em;
}

其实这里小编想多了其实只用 img标签+文本就可以实现
就像这样

<div style="margin: auto;width: 400px; padding: 10px;
line-height: 30px; font-size: 20px; background-color: #F0EFE2;"><img style="float: left;" src="./img/libai.jpg" alt=""><p>李白</p>李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。据《新唐书》记载，李白为兴圣皇帝（凉武昭王李暠）九世孙，与李唐诸王同宗。其人爽朗大方，爱饮酒作诗，喜交友。李白深受黄老列庄思想影响，有《李太白集》传世，诗作中多以醉时写的，代表作有《望庐山瀑布》《行路难》《蜀道难》《将进酒》《明堂赋》《早发白帝城》等多首。
</div>

就这样就完成了一个简单的人物介绍布局
其实最主要的就是给照片加上一个浮动属性

float: left;

有它就可以了好了我其实也是为了划水
不懂得欢迎留言一起探讨哦
拜拜

人物介绍的排版【小白进】相关推荐

暴强　西游记人物介绍（转载）！！！！
因为这两天写OFFICE西游故事时,想不起太多人物了,所以就在网上搜了一下,西游记的人物介绍. 结果看到一篇暴强的文章,就转载过来了! 首先,我们要弄清楚各类神仙的属性类型: 孙悟空,无疑是实力超强的 ...
ferguson博弈_人物介绍！扑克界传奇人物“耶稣”Chris Ferguson
原标题:人物介绍!扑克界传奇人物"耶稣"Chris Ferguson Chris Ferguson是世界扑克界当之无愧的传奇人物.他之所以被人们冠以"耶稣"的称 ...
[100天挑战100个前端效果]第十九天---人物介绍卡片效果(猜猜是哪三个大佬？)
人物介绍卡片效果让我们先来看看实现的效果 html代码 css代码今日份知识总结让我们先来看看实现的效果 html代码 <!DOCTYPE html> <html lang=& ...
薛之谦明星人物介绍html源码 html期末大作业课程设计
薛之谦明星人物介绍html源码 html期末大作业课程设计开发语言:html 布局方式:div 页面数量:7页项目页面截图 :
HTML+CSS制作人物介绍卡片效果
HTML+CSS制作人物介绍卡片效果效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="zh-Hans">&l ...
HTML5期末大作业：轮滑运动体育类人物介绍主题网站设计(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计
HTML5期末大作业:轮滑运动体育类人物介绍主题网站设计(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 web学生网页设计作业源码常见网页 ...
我的团队人物介绍卡片布局
下载地址 div css制作创意大气的我的团队人物介绍卡片布局,简单的人物介绍文字列表ui布局特效.适用于:产品或人物介绍列表布局. dd:
简单地人物介绍页面设计
简单地人物介绍页面设计这是我的第一次练习,做的一个关于"杂交水稻之父"袁隆平的简介.简单地用了html和css.以下是两个特点: 1.页面主要有图片和文本组成. 2.文章下方用了 ...
进销存系统免费版，免费进销存介绍，免费的进销存软件好用吗？
进销存系统免费版,免费进销存介绍,免费的进销存软件好用吗? 进销存系统真的有免费版吗? 其实现在市场上很多宣称免费的系统,只是一个噱头.很多说真的免费使用,后续还是要你交钱付费才有效果,才能正常运营. ...

人物介绍的排版【小白进】

人物介绍的排版【小白进】

HTML代码

再来看它的css

人物介绍的排版【小白进】相关推荐

最新文章

热门文章