Html知识复习之图文混排
练习练习基础
先上效果图：
废话不多说，直接贴代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <style type="text/css"> 7 img { 8 width:200px; 9 height:200px; 10 } 11 .list li { 12 float: left; 13 display: inline; 14 margin: 5px; 15 } 16 .p{ 17 text-align:center; 18 } 19 #div_img1 { 20 padding-bottom: 50px; 21 } 22 </style> 23 </head> 24 <body> 25 26 <div> 27 <center><h1>图文混排</h1></center> 28 <div id="div_img1"> 29 <ul class="list"> 30 <li> 31 <img src="portfolio/1.jpg" align="bottom"> 32 <div class="p">秀丽的风景1</div> 33 </li> 34 <li> 35 <img src="portfolio/2.jpg" align="bottom"> 36 <div class="p">秀丽的风景2</div> 37 </li> 38 <li> 39 <img src="portfolio/3.jpg" align="bottom"> 40 <div class="p">秀丽的风景3</div> 41 </li> 42 <li> 43 <img src="portfolio/4.jpg" align="bottom"> 44 <div class="p">秀丽的风景4</div> 45 </li> 46 <li> 47 <img src="portfolio/5.jpg" align="bottom"> 48 <div class="p">秀丽的风景5</div> 49 </li> 50 51 <li> 52 <img src="portfolio/6.jpg" align="bottom"> 53 <div class="p">秀丽的风景6</div> 54 </li> 55 </ul> 56 57 </div> 58 59 <div id="div_img2"> 60 <ul class="list"> 61 <li> 62 <img src="portfolio/7.jpg" align="bottom"> 63 <div class="p">秀丽的风景7</div> 64 </li> 65 <li> 66 <img src="portfolio/8.jpg" align="bottom"> 67 <div class="p">秀丽的风景8</div> 68 </li> 69 <li> 70 <img src="portfolio/9.jpg" align="bottom"> 71 <div class="p">秀丽的风景9</div> 72 </li> 73 <li> 74 <img src="portfolio/10.jpg" align="bottom"> 75 <div class="p">秀丽的风景10</div> 76 </li> 77 <li> 78 <img src="portfolio/11.jpg" align="bottom"> 79 <div class="p">秀丽的风景11</div> 80 </li> 81 82 <li> 83 <img src="portfolio/12.jpg" align="bottom"> 84 <div class="p">秀丽的风景12</div> 85 </li> 86 </ul> 87 </div> 88 </div> 89 90 </body> 91 </html>
这是最基础的一个简单的图文混排。后面还有更多小练习持续更新中。。。
转载请注明出处；本文连接：https://www.cnblogs.com/apeng/p/10422131.html