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. Java基础-抽象类和接口

    抽象类与接口是Java语言中对抽象概念进行定义的两种机制,正是由于他们的存在才赋予java强大的面向对象的能力.他们两者之间对抽象概念的支持有很大的相似,甚至可以互换,但是也有区别. 抽象定义: 抽象 ...

  2. 使用Nexus3构建Docker私有镜像仓库

    一.安装Nexus3 Nexus3是Sonatype提供的仓库管理平台,Nuexus Repository OSS3能够支持Maven.npm.Docker.YUM.Helm等格式数据的存储和发布:并 ...

  3. vue学习记录④（路由传参）

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  4. ArcGIS Engine 笔记-控件类型

    控件 MapControl Map         地图控件 PageLayouControl      布局地图控件 TOCControl                目录控件 ToolbarCo ...

  5. 开源ERP Odoo仓存功能模块深度应用（一）

    基本功能 库位 库位是一个逻辑存货区,可以是一个物理库区,可以是一个货架.货架上的一个货位.库位可以有子库位 库位有虚拟库位和实际库位,实际库位是实际存放货物的库位,虚拟库位是因复式库存记账而虚构的库 ...

  6. Android 个人手机通讯录开发

    一.Android 个人手机通讯录开发 数据存储:SQLite 数据库 开发工具:Android Studio 二.Phone Module 简介 1. 界面展示                2. ...

  7. 国内常用DNS

    114.114.114.114 国内移动,电信,联通通用DNS 223.5.5.5 阿里 223.6.6.6 阿里 180.76.76.76 百度

  8. redis 特性

    Redis 三大特性: Redis 支持数据的持久化,可以将内存中的数据保存在磁盘中,重启的时候可以再次加载进行使用 Redis 不仅支持简单的 键 * 值 类型的数据,  还提供list.set.z ...

  9. Windows Server 2016-Netdom Join之客户端加域(二)

    上章节我们介绍了如何通过图形化界面实现用户加域操作,本章节为大家简单介绍如何通过netdom join命令实现计算机加域操作.具体信息如下: 将工作站或成员服务器加入域.将计算机加入域的行为会为域中的 ...

  10. 关于Bulk加载模式

    Bulk加载模式是Informatica提供的一种高性能数据加载模式,它利用数据库底层机制,依靠调用数据库本身提供的Utility来进行数据的加载 该方式将绕过数据库的log记录,以此提高数据库加载性 ...