前端知識復習：Html DIV 圖文混排（文字放在圖片下邊）

本文轉載自查看原文 2019-02-23 11:49 1591 前端-JS/ 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選中變色

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5[8]: 圖文混排，圖片與文字居中對齊 Android自動解析html帶圖片，實現圖文混排 iOS 圖文混排 ListView異步加載圖片，完美實現圖文混排 word圖文混排復制到UEditor圖片不顯示 css實現圖文混排 TextKit實現圖文混排 SpannableStringBuilder實現圖文混排 Android中實現不同文字顏色和圖文混排的Span總結 Unity插件之NGUI學習（5）—— 創建Label圖文混排及文字點擊