前端知识复习：Html DIV 图文混排（文字放在图片下边）
Html知识复习之图文混排
练习练习基础
先上效果图：
废话不多说，直接贴代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#t1 img{
width:260px;
height:220px;
margin-left:20px;
}
#t1{
padding-top:30px;
padding-left:50px;
} p{
text-align:center;
} #tr1{
float:left; } #tr2{
float:left;
padding-top:50px;
}
</style>
</head>
<body> <center>
<table id="t1" >
<tr id="tr1">
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景1
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景2
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景3
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景4
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景5
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景6
</p>
</td> </tr> <tr id="tr2">
<td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景7
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景8
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景9
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景10
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景11
</p>
</td>
<td>
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
<p>
秀丽的风景12
</p>
</td>
</td>
</tr>
</table>
</center>
</body>
</html>
这是最基础的一个简单的图文混排。后面还有更多小练习持续更新中。。。
转载请注明出处；本文连接：https://www.cnblogs.com/apeng/p/10422131.html
下篇文章：前端知识复习： JS选中变色
前端知识复习：Html DIV 图文混排（文字放在图片下边）的更多相关文章
- Coretext实现图文混排及Gif图片播放
CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念: CTFont CTFontCollection CTFontD ...
- Android中Textview显示Html，图文混排，支持图片点击放大
本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...
- DIV+CSS 图文混排的图片居中办法
不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...
- 前端知识复习： JS选中变色
前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...
- javaWeb css图文混排
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 高性能图文混排框架，构架顺滑的iOS应用-b
About GallopGallop是一个功能强大.性能优秀的图文混排框架. Features主要用于解决以下需求: 滚动列表的性能优化.Gallop使用异步绘制.视图层级合并.观察mainRunlo ...
- CoreText 实现图文混排
CoreText 实现图文混排 相关博文推荐 IOS CoreText.framework - 基本用法 IOS CoreText.framework - 段落样子CTParagraphStyle h ...
- CoreText实现图文混排之点击事件
今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...
- AS3聊天单行输入框图文混排完美实现
几年前刚毕业.第一个游戏模块做的就是聊天.到如今.几个游戏写过几次聊天模块. 之前在4399做的<幻龙骑士>(又名<神骑士>),还有上周六刚上线的<疯狂的子弹>, ...
随机推荐
- P2P综述
原文参见:http://www.lotushy.com/?p=113 [TOC] 什么是P2P P2P全称是Peer-to-peer.P2P计算或P2P网络是一种分布式应用架构.它将任务或负载分发给P ...
- ALS交替最小二乘法总结
摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 6.适用场合 内容: 1.算法概述 ALS是alternating least squares的缩写 , 意 ...
- TF.learn学习
官网地址:https://www.tensorflow.org/versions/r1.1/get_started/tflearn 1.代码例子 实现自定义的Estimator 使用DNNClassi ...
- Maven的安装步骤
1.确保jdk安装成功,注意在系统环境下,必须添加jdk的路径.2.将maven的路径配置在系统环境变量中.3.修改maven的默认路径,即:将config下的settings.xml文件中的目录节点 ...
- sum() 函数性能堪忧，列表降维有何良方？
本文原创并首发于公众号[Python猫],未经授权,请勿转载. 原文地址:https://mp.weixin.qq.com/s/mK1nav2vKykZaKw_TY-rtw Python 的内置函数 ...
- 微服务（入门四）：identityServer的简单使用（客户端授权）
IdentityServer简介(摘自Identity官网) IdentityServer是将符合规范的OpenID Connect和OAuth 2.0端点添加到任意ASP.NET核心应用程序的中间件 ...
- 华为手机无法使用USB调试的解决方案
在Android开发中,一直在使用华为的荣耀8进行调试,但是突然某一次,发现USB调试无法使用了,且在其他的电脑上进行调试也不行. 后来经过查资料,总算解决了此问题,在这里进行一下解决方案的记录. 需 ...
- Git操作GitHub时的Proxy配置
无论是使用Android Studio中,VCS >> Git >> Clone, 还是直接Git Clone命令,clone GitHub项目时,出现错误提示:LibreSS ...
- Data Lake Analytics的Geospatial分析函数
0. 简介 为满足部分客户在云上做Geometry数据的分析需求,阿里云Data Lake Analytics(以下简称:DLA)支持多种格式的地理空间数据处理函数,符合Open Geospatial ...
- PoolEntry 参数讲解
public abstract class PoolEntry<T, C> { private final String id; private final T route; //路由 p ...