前端知识复习：Html DIV 图文混排（文字放在图片下边）

Html知识复习之图文混排

练习练习基础

先上效果图：

废话不多说，直接贴代码：

 

  1 <!DOCTYPE html>
  2 <html lang="zh">
  3     <head>
  4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5  <style type="text/css">
  6   #t1 img{
  7     width:260px;
  8     height:220px;
  9     margin-left:20px;
 10  }
 11  #t1{
 12        padding-top:30px;
 13       padding-left:50px;
 14  }
 15  
 16   p{
 17    text-align:center;
 18  }
 19  
 20   #tr1{
 21     float:left;
 22     
 23  }
 24  
 25  #tr2{
 26     float:left;
 27     padding-top:50px;
 28  }
 29  </style>
 30     </head>
 31     <body>
 32  
 33  <center>
 34  <table id="t1" >
 35 <tr id="tr1">
 36 <td>
 37 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 38 <p>
 39 秀丽的风景1
 40 </p>
 41 </td>
 42 <td>
 43 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 44 <p>
 45 秀丽的风景2
 46 </p>
 47 </td>
 48 <td>
 49 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 50 <p>
 51 秀丽的风景3
 52 </p>
 53 </td>
 54 <td>
 55 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 56 <p>
 57 秀丽的风景4
 58 </p>
 59 </td>
 60 <td>
 61 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 62 <p>
 63 秀丽的风景5
 64 </p>
 65 </td>
 66 <td>
 67 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 68 <p>
 69 秀丽的风景6
 70 </p>
 71 </td>
 72 
 73 
 74 </tr>
 75 
 76 
 77 <tr id="tr2">
 78 <td>
 79 <td>
 80 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 81 <p>
 82 秀丽的风景7
 83 </p>
 84 </td>
 85 <td>
 86 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 87 <p>
 88 秀丽的风景8
 89 </p>
 90 </td>
 91 <td>
 92 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 93 <p>
 94 秀丽的风景9
 95 </p>
 96 </td>
 97 <td>
 98 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
 99 <p>
100 秀丽的风景10
101 </p>
102 </td>
103 <td>
104 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
105 <p>
106 秀丽的风景11
107 </p>
108 </td>
109 <td>
110 <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2696230717,920201116&fm=26&gp=0.jpg"/>
111 <p>
112 秀丽的风景12
113 </p>
114 </td>
115 </td>
116 </tr>
117 </table>
118 </center>
119     </body>
120 </html>
121

 

 

这是最基础的一个简单的图文混排。后面还有更多小练习持续更新中。。。

 转载请注明出处；本文连接：https://www.cnblogs.com/apeng/p/10422131.html

下篇文章：前端知识复习：  JS选中变色

posted @ 2019-02-23 11:49  阿鹏哥  阅读(7168)  评论(0)  编辑  收藏  举报