前端知识复习: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做的<幻龙骑士>(又名<神骑士>),还有上周六刚上线的<疯狂的子弹>, ...
随机推荐
- Postman-----构建工作流程(用于某个请求完成后从指定的请求开始继续运行)
使用场景: 当您开始运行某个集合时,所有的请求按照您在主程序中看到的顺序运行,但是在某些情况下,往往我们希望按顺序列出的请求A.B.C.D.E.F请求,在执行时不执行B.C请求,希望A请求完成后直接执 ...
- TensorFlow之CNN:运用Batch Norm、Dropout和早停优化卷积神经网络
学卷积神经网络的理论的时候,我觉得自己看懂了,可是到了用代码来搭建一个卷积神经网络时,我发现自己有太多模糊的地方.这次还是基于MINIST数据集搭建一个卷积神经网络,首先给出一个基本的模型,然后再用B ...
- 网页的cdn引用地址,js,react,bootstrap
react+----这三个够用了 <script src="https://cdn.bootcss.com/react/15.4.2/react.min.js">< ...
- Nginx高并发优化方案
原网址: https://blog.csdn.net/HoeWang/article/details/81221463 一.一般来说nginx 配置文件中对优化比较有作用的为以下几项: 1. work ...
- docker常规操作——启动、停止、重启容器实例
一.启动一个已经停止的容器实例 docker start 容器ID或容器名,建议使用容器ID,容器ID支持模糊查询而容器名称不支持1. 先查看已经暂停的容器实例信息 2. 通过docker start ...
- Retrofit的初次使用
rxretrofitlibrary是一个已经写好的网络框架库,先以本地Module导入到自己的项目中. 1.它的初始化操作大多在自定义的application中完成,如: public class A ...
- 好代码是管出来的——使用Jenkins搭建CI服务器
Jenkins是一个开源的跨平台的CI工具,它可以部署在Windows.Linux等平台上,并且Jenkins提供了非常丰富的插件来帮助完成编译.测试.部署等工作. 本文将介绍在Windows平台上使 ...
- kafka监控项目大全
https://github.com/claudemamo/kafka-web-console http://github.com/pinterest/doctorkafka http://g ...
- vue组件-构成组件-父子组件相互传递数据
组件对于vue来说非常重要,学习学习了基础vue后,再回过头来把组件弄透! 一.概念 组件意味着协同工作,通常父子组件会是这样的关系:组件 A 在它的模版中使用了组件 B . 它们之间必然需要相互通信 ...
- Linux下ps -ef和ps aux的区别
Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区别呢?两者没太大差别,讨论这个问题,要追溯到Unix系统中的两种风格,System V风格和BSD 风格, ...