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 图文混排（文字放在图片下边）的更多相关文章

  1. Coretext实现图文混排及Gif图片播放

    CoreText是iOS3.2推出的一套文字排版和渲染框架,可以实现图文混排,富文本显示等效果. CoreText中的几个重要的概念:  CTFont CTFontCollection CTFontD ...

  2. Android中Textview显示Html，图文混排，支持图片点击放大

    本文首发于网易云社区 对于呈现Html文本来说,Android提供的Webview控件可以得到很好的效果,但使用Webview控件的弊端是效率相对比较低,对于呈现简单的html文本的话,杀鸡不必使用牛 ...

  3. DIV+CSS 图文混排的图片居中办法

    不少人为了让 Div 图文混排的图片可以居中,给 IMG 套各式各样的 SPAN.DIV.LI 等等,以便于使用 text-align来进行居中. <div>图文混排 <br> ...

  4. 前端知识复习： JS选中变色

    前端知识复习:JS选中变色 上篇文章 :前端知识复习:Html DIV 图文混排(文字放在图片下边) Js选中图片效果 <!DOCTYPE html> <html xmlns=&qu ...

  5. javaWeb css图文混排

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 高性能图文混排框架，构架顺滑的iOS应用-b

    About GallopGallop是一个功能强大.性能优秀的图文混排框架. Features主要用于解决以下需求: 滚动列表的性能优化.Gallop使用异步绘制.视图层级合并.观察mainRunlo ...

  7. CoreText 实现图文混排

    CoreText 实现图文混排 相关博文推荐 IOS CoreText.framework - 基本用法 IOS CoreText.framework - 段落样子CTParagraphStyle h ...

  8. CoreText实现图文混排之点击事件

    今天呢,我们继续把CoreText图文混排的点击事件补充上,这样我们的图文混排也算是圆满了. 哦,上一篇的链接在这里 http://www.jianshu.com/p/6db3289fb05d Cor ...

  9. AS3聊天单行输入框图文混排完美实现

    几年前刚毕业.第一个游戏模块做的就是聊天.到如今.几个游戏写过几次聊天模块. 之前在4399做的<幻龙骑士>(又名<神骑士>),还有上周六刚上线的<疯狂的子弹>, ...

随机推荐

  1. 搞定！ iTunes 不能添加铃声进去

    最近换个新铃声,但转换成.m4r 怎么都拖不到铃声里很莫名奇妙,首先确定苹果是允许自己定义铃声的,然后网上查了不少文章,都无济于事所以我想自己记录下自己成功搞定的方法,供各位参考第一步: 把自己想转为 ...

  2. python+appium 【已解决】真机运行appium报错“WebDriverException: Message: A new session could not be created. (Original error: Command failed: C:\Windows\system32\cmd.exe /s /c.......详见内文

    问题报错提示: selenium.common.exceptions.WebDriverException: Message: A new session could not be created. ...

  3. 【SAP S/4 1511之变】：主数据之变

    本博文主要讲述SAP S/4 1511版本的变化,主要是跟ECC版本的对比.变化还是挺多的,相当一部分是后勤,但绝大部分还是财务成本这一块.作为从事S/4版本的从业者,了解1511版本的变化还是挺有必 ...

  4. Akka实践一些总结

    最近在一些服务中使用了akka,主要用来做异步解耦和本地消息分发(路由),这里简单总结一下用法. 与spring集成 网上有不少集成的例子,要使用到spring的扩展. 我这边没有这样处理,而是简单把 ...

  5. Java语言编程 - Java历史简介

    1.1 Sun公司 介绍Java的历史之前,先介绍一下Java语言的缔造公司,Sun公司,Sun公司的全称是:Stanford University Network.值得一提的是,Sun公司从1982 ...

  6. HSTS 详解，让 HTTPS 更安全

    随着互联网的快速发展,人们在生活中越来越离不开互联网.无论是社交.购物还是搜索,互联网都能给人带来很多的便捷.与此同时,由于用户对网络安全的不了解和一些网站.协议的安全漏洞,让很多用户的个人信息数据“ ...

  7. 深入vue - 源码目录及构建过程分析

     公众号原文链接:深入vue - 源码目录及构建过程分析   喜欢本文可以扫描下方二维码关注我的公众号 「前端小苑」 ​“ 本文主要梳理一下vue代码的目录,以及vue代码构建流程,旨在对vue源码整 ...

  8. 理解 Node.js 的 Event loop

    问题 考察如下代码,脑回路中运行并输出结果: console.log("1"); setTimeout(function setTimeout1() { console.log(& ...

  9. Java学习路线图分析

     Java学习路线分析图 第一阶段 技术名称 技术内容 J2SE(java基础部分) java开发前奏 计算机基本原理,Java语言发展简史以及开发环境的搭建,体验Java程序的开发,环境变量的设置, ...

  10. Dotnet全平台下APM-Trace探索

    背景 随着支撑的内部业务系统越来越多,向着服务化架构进化,在整个迭代过程中,会逐渐暴露出以下问题. 传统依赖于应用服务器日志等手段的排除故障原因的复杂度越来越高,传统的监控服务已经无法满足需求. 终端 ...