前端知识复习:Html DIV 图文混排(文字放在图片下边)

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">秀丽的风景1div>
33                 li>
34                 <li>
35                     <img src="portfolio/2.jpg" align="bottom">
36                     <div class="p">秀丽的风景2div>
37                 li>
38                 <li>
39                     <img src="portfolio/3.jpg" align="bottom">
40                     <div class="p">秀丽的风景3div>
41                 li>
42                 <li>
43                     <img src="portfolio/4.jpg" align="bottom">
44                     <div class="p">秀丽的风景4div>
45                 li>
46                 <li>
47                     <img src="portfolio/5.jpg" align="bottom">
48                     <div class="p">秀丽的风景5div>
49                 li>
50 
51                 <li>
52                     <img src="portfolio/6.jpg" align="bottom">
53                     <div class="p">秀丽的风景6div>
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">秀丽的风景7div>
64                 li>
65                 <li>
66                     <img src="portfolio/8.jpg" align="bottom">
67                     <div class="p">秀丽的风景8div>
68                 li>
69                 <li>
70                     <img src="portfolio/9.jpg" align="bottom">
71                     <div class="p">秀丽的风景9div>
72                 li>
73                 <li>
74                     <img src="portfolio/10.jpg" align="bottom">
75                     <div class="p">秀丽的风景10div>
76                 li>
77                 <li>
78                     <img src="portfolio/11.jpg" align="bottom">
79                     <div class="p">秀丽的风景11div>
80                 li>
81 
82                 <li>
83                     <img src="portfolio/12.jpg" align="bottom">
84                     <div class="p">秀丽的风景12div>
85                 li>
86             ul>
87         div>
88     div>
89 
90  body>
91 html>

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

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

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

转载于:https://www.cnblogs.com/apeng/p/10422131.html

你可能感兴趣的:(前端知识复习:Html DIV 图文混排(文字放在图片下边))