HTML5图片样式布局

相册

<div class="container">
    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>

    <div class="img">
        <a href="#" target="_self">
            <img src="image.jpg" alt="beauty" width="480" height="300">
        </a>
        <div class="text">beauty ----------------</div>
    </div>
</div>

css：

.img {
    border: 1px solid #9773ed;
    width: auto;
    height: auto;
    float: left;
    text-align: center;
    margin: 6px;
}

img {
    margin: 6px;
}

.text {
    font-size: 36px;
    font-family: Gigi;
    margin-bottom: 6px;
}

.container{
    margin: 10px auto;
    width: 80%;
    height: auto;
}

a:hover{
    background-color: lime;
}

瀑布流：

HTML：

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>瀑布流</title>
  6     <style type="text/css">
  7         .container {
  8             width: 90%;
  9             margin: 5px auto;
 10 
 11             /*column-width: 250px;*/
 12             /*-moz-column-width: 250px;*/
 13             /*column-gap: 5px;*/
 14             /*-moz-column-gap: 5px;*/
 15 
 16             -webkit-column-count:6;
 17             -moz-column-count:6;
 18             column-count:6;
 19             -webkit-column-gap:20px;
 20             -moz-column-gap:20px;
 21             column-gap:20px;;
 22 
 23 
 24         }
 25         .container div *:not(.d1){
 26             /*width: 250px;*/
 27             margin: 5px 0;
 28         }
 29         img{
 30             width: 100%;
 31         }
 32     </style>
 33 </head>
 34 <body>
 35 
 36 <div class="container">
 37     <div class="d1"><img src="img/img-%20(1).jpg"></div>
 38     <div><img src="img/img-%20(2).jpg"></div>
 39     <div><img src="img/img-%20(3).jpg"></div>
 40     <div><img src="img/img-%20(1).jpg"></div>
 41     <div><img src="img/img-%20(4).jpg"></div>
 42     <div><img src="img/img-%20(5).jpg"></div>
 43     <div><img src="img/img-%20(6).jpg"></div>
 44     <div><img src="img/img-%20(1).jpg"></div>
 45     <div><img src="img/img-%20(4).jpg"></div>
 46     <div><img src="img/img-%20(5).jpg"></div>
 47     <div><img src="img/img-%20(6).jpg"></div>
 48     <div><img src="img/img-%20(7).jpg"></div>
 49     <div><img src="img/img-%20(8).jpg"></div>
 50     <div><img src="img/img-%20(9).jpg"></div>
 51     <div><img src="img/img-%20(6).jpg"></div>
 52     <div><img src="img/img-%20(7).jpg"></div>
 53     <div><img src="img/img-%20(8).jpg"></div>
 54     <div><img src="img/img-%20(9).jpg"></div>
 55     <div><img src="img/img-%20(6).jpg"></div>
 56     <div><img src="img/img-%20(7).jpg"></div>
 57     <div><img src="img/img-%20(8).jpg"></div>
 58     <div><img src="img/img-%20(9).jpg"></div>
 59     <div><img src="img/img-%20(6).jpg"></div>
 60     <div><img src="img/img-%20(7).jpg"></div>
 61     <div><img src="img/img-%20(9).jpg"></div>
 62     <div><img src="img/img-%20(6).jpg"></div>
 63     <div><img src="img/img-%20(7).jpg"></div>
 64     <div><img src="img/img-%20(7).jpg"></div>
 65     <div><img src="img/img-%20(8).jpg"></div>
 66     <div><img src="img/img-%20(9).jpg"></div>
 67     <div><img src="img/img-%20(1).jpg"></div>
 68     <div><img src="img/img-%20(6).jpg"></div>
 69     <div><img src="img/img-%20(6).jpg"></div>
 70     <div><img src="img/img-%20(7).jpg"></div>
 71     <div><img src="img/img-%20(9).jpg"></div>
 72     <div><img src="img/img-%20(6).jpg"></div>
 73     <div><img src="img/img-%20(7).jpg"></div>
 74     <div><img src="img/img-%20(8).jpg"></div>
 75     <div><img src="img/img-%20(9).jpg"></div>
 76     <div><img src="img/img-%20(1).jpg"></div>
 77     <div><img src="img/img-%20(6).jpg"></div>
 78     <div><img src="img/img-%20(8).jpg"></div>
 79     <div><img src="img/img-%20(9).jpg"></div>
 80     <div><img src="img/img-%20(1).jpg"></div>
 81     <div><img src="img/img-%20(6).jpg"></div>
 82     <div><img src="img/img-%20(9).jpg"></div>
 83     <div><img src="img/img-%20(6).jpg"></div>
 84     <div><img src="img/img-%20(7).jpg"></div>
 85     <div><img src="img/img-%20(8).jpg"></div>
 86     <div><img src="img/img-%20(9).jpg"></div>
 87     <div><img src="img/img-%20(1).jpg"></div>
 88     <div><img src="img/img-%20(6).jpg"></div>
 89     <div><img src="img/img-%20(8).jpg"></div>
 90     <div><img src="img/img-%20(9).jpg"></div>
 91     <div><img src="img/img-%20(1).jpg"></div>
 92     <div><img src="img/img-%20(6).jpg"></div>
 93     <div><img src="img/img-%20(7).jpg"></div>
 94     <div><img src="img/img-%20(8).jpg"></div>
 95     <div><img src="img/img-%20(9).jpg"></div>
 96     <div><img src="img/img-%20(4).jpg"></div>
 97     <div><img src="img/img-%20(5).jpg"></div>
 98     <div><img src="img/img-%20(6).jpg"></div>
 99     <div><img src="img/img-%20(7).jpg"></div>
100     <div><img src="img/img-%20(8).jpg"></div>
101     <div><img src="img/img-%20(9).jpg"></div>
102 </div>
103 
104 </body>
105 </html>

瀑布流2：

HTML：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片瀑布流</title>
 6     <link rel="stylesheet" type="text/css" href="css/normalize.css">
 7     <link rel="stylesheet" type="text/css" href="css/pic.css">
 8 </head>
 9 <body>
10 
11 <!--
12             emmet简写html
13             h1{图片瀑布流}+ul.picC>li*18>img[src="img/$.jpg"]
14         -->
15 
16 <h1>图片瀑布流</h1>
17 <ul class="picC">
18     <li><img src="img/1.jpg" alt=""></li>
19     <li><img src="img/2.jpg" alt=""></li>
20     <li><img src="img/3.jpg" alt=""></li>
21     <li><img src="img/4.jpg" alt=""></li>
22     <li><img src="img/5.jpg" alt=""></li>
23     <li><img src="img/6.jpg" alt=""></li>
24     <li><img src="img/7.jpg" alt=""></li>
25     <li><img src="img/8.jpg" alt=""></li>
26     <li><img src="img/9.jpg" alt=""></li>
27     <li><img src="img/10.jpg" alt=""></li>
28     <li><img src="img/11.jpg" alt=""></li>
29     <li><img src="img/12.jpg" alt=""></li>
30     <li><img src="img/13.jpg" alt=""></li>
31     <li><img src="img/14.jpg" alt=""></li>
32     <li><img src="img/15.jpg" alt=""></li>
33     <li><img src="img/16.jpg" alt=""></li>
34     <li><img src="img/17.jpg" alt=""></li>
35     <li><img src="img/18.jpg" alt=""></li>
36 </ul>
37 
38 </body>
39 </html>

css：

 1 h1 {
 2     width: 100%;
 3     height: 60px;
 4     text-align: center;
 5     line-height: 60px;
 6     background-color: white;
 7     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .5);
 8     position: fixed;
 9     left: 0;
10     top: 0;
11     margin: 0;
12 }
13 
14 .picC {
15     width: 90%;
16     margin: 65px auto;
17     -webkit-column-count:4;
18     -moz-column-count:4;
19     column-count:4;
20     -webkit-column-gap:20px;
21     -moz-column-gap:20px;
22     column-gap:20px;
23     list-style-type: none;
24 }
25 
26 .picC li{
27     margin-top: 10px;
28 }
29 
30 .picC li:first-child{
31     margin-top: 0;
32 }
33 
34 .picC li img{
35     width: 100%;
36 }

FlexBox 弹性盒模型：

HTML：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Flexbox 菜单项目实战1</title>
 6     <style>
 7         .menu {
 8             list-style-type: none;
 9             padding: 0;
10             margin: 0;
11             display: flex;
12             flex-flow: row wrap;
13         }
14 
15         .menu li {
16             text-align: center;
17             height: 40px;
18             line-height: 40px;
19             flex: 1 1 100%;
20         }
21 
22         .menu li:nth-child(1) {
23             background-color: #39ADD1;
24         }
25 
26         .menu li:nth-child(2) {
27             background-color: #3079AB;
28         }
29 
30         .menu li:nth-child(3) {
31             background-color: #982551;
32         }
33 
34         .menu li:nth-child(4) {
35             background-color: #E15258;
36         }
37 
38         .menu li:nth-child(5) {
39             background-color: #CC6699;
40         }
41 
42         .menu li:nth-child(6) {
43             background-color: #52AC43;
44         }
45 
46         .menu a {
47             text-decoration: none;
48             color: #fff;
49         }
50 
51         @media (min-width: 480px) {
52             .menu li {
53                 flex: 1 1 50%;
54             }
55         }
56 
57         @media (min-width: 768px) {
58             .menu {
59                 flex-flow: row nowrap;
60             }
61         }
62     </style>
63 </head>
64 <body>
65 <ul class="menu">
66     <li><a href="#">HTML</a></li>
67     <li><a href="#">CSS</a></li>
68     <li><a href="#">Javascript</a></li>
69     <li><a href="#">Sass</a></li>
70     <li><a href="#">Ruby</a></li>
71     <li><a href="#">Mongo</a></li>
72 </ul>
73 </body>
74 </html>

posted @ 2017-01-02 18:54 changchou 阅读(1067) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

changchou

HTML5图片样式布局

公告