How to implement image list with CSS? (code example)

How to implement image list with CSS? I believe that many friends who have just come into contact with CSS will have such questions. This chapter will introduce to you how to implement an image list in CSS? (code example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS picture list renderings:

HTML code for SS picture list implementation:

<h3 id="a-nbsp-href-http-www-php-cn-我爱CSS画廊-a"><a href="http://www.php.cn/">我爱CSS画廊</a></h3>
<ul>
    <li>
        <a href="http://www.php.cn/default.asp">
        <img src="/static/imghw/default1.png"  data-src="1.jpg"  class="lazy"   alt="1" />
        <span>用css网站布局之十步实录</span>
        </a>
    </li>
    <li>
        <a href="http://www.php.cn/default.asp?cateID=3">
        <img src="/static/imghw/default1.png"  data-src="2.jpg"  class="lazy"   alt="2" />
        <span>CSS网页布局中form表单的语义结构探讨</span>
        </a>
    </li>
    <li>
        <a href="http://www.php.cn/default.asp?cateID=9">
        <img src="/static/imghw/default1.png"  data-src="3.jpg"  class="lazy"   alt="3" />
        <span>52CSS衣柜 一款图片为主的ul列表 </span></a>
    </li>
    <li>
        <a href="http://www.php.cn/default.asp?cateID=5">
        <img src="/static/imghw/default1.png"  data-src="4.jpg"  class="lazy"   alt="4" />
        <span>书写高效的CSS - 漫谈CSS的渲染效率</span>
        </a>
    </li>
    <li>
        <a href="http://www.php.cn/default.asp?cateID=6">
        <img src="/static/imghw/default1.png"  data-src="5.jpg"  class="lazy"   alt="5" />
        <span>老生常谈CSS网页布局的意义与副作用</span>
        </a>
    </li>
    <li>
        <a href="http://www.php.cn/default.asp?cateID=7">
        <img src="/static/imghw/default1.png"  data-src="6.jpg"  class="lazy"   alt="6" />
        <span>HTML页面中标签的语义与使用位置</span>
        </a>
    </li>
    <div style="clear:both;"></div>
</ul>

Next we start to modify the CSS style definition, When studying the following code, please pay attention to the skills of understanding the definition of relevant sizes. The calculation and setting of sizes are very important in CSS web page layout coding.

Also note that the display:inline attribute setting in the li style definition is to eliminate the double margin BUG in IE6.

CSS code for the implementation of CSS image list:

body,h3,ul {
    margin:0;
    padding:0;
}
h3 {
    width:426px;
    height:30px;
    margin:20px auto 0 auto;
    font-size:14px;
    text-indent:10px;
    line-height:30px;
    background:#E4E1D3;
}
h3 a {
    color:#c00;
    text-decoration:none;
}
h3 a:hover {
    color:#000;
}
ul {
    width:405px;
    margin:0 auto;
    padding:10px 0 6px 15px;
    border:3px solid #E4E1D3;
    border-width:0 3px 3px 3px;
}
ul li {
    float:left;
    margin:5px 15px 3px 0;
    list-style-type:none;
    display:inline;
}
ul li a {
    display:block;
    width:120px;
    height:175px;
    text-decoration:none;
}
ul li a img {
    width:120px;
    height:150px;
    border:0;
}
ul li a span {
    display:block;
    width:120px;
    height:23px;
    line-height:20px;
    font-size:12px;
    text-align:center;
    color:#333;
    cursor:hand;
    white-space:nowrap;
    overflow:hidden;
}
ul li a:hover span {
    color:#c00;
}

Through the setting of CSS styles, changes in this CSS image list are realized. The structure of six rows and one column has been changed into a structure of two rows and two columns. The margins between each element are set appropriately and look beautiful. Can adapt to the needs of website applications.

The above is how to implement an image list in CSS? (Code examples) full introduction, if you want to know more about CSS3 video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to implement image list with CSS? (code example). For more information, please follow other related articles on the PHP Chinese website!