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选中变色