制作1--京东图片列表（html/css）

效果图:

制作思路：
[html]
1.ul>li*3，块元素好布局鸭~
2.li中套a标签，可以点击跳转，a标签中套img标签
[css]
3.布局好了之后，清除所有样式，从0开始吧~

      <link rel="stylesheet" href="../css/reset.css">
      <link rel="stylesheet" href="../css/style.css">

4.引入外部样式，设置div固定的宽、高、背景颜色，溢出就隐藏呗~
5.图片宽度=li的宽度=ul宽度，高度会随宽度一起变化哒~
6.li设置外边距，最后一个图片的下外边距要与不要都可以哦~

代码：
img_list.html

<body>
    <ul class="img_list">
        <li>
            <a href="javascript:;">
                <img src="../img/1.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="../img/2.jpg" alt="">
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <img src="../img/3.jpg" alt="">
            </a>
        </li>
    </ul>
</body>

style.css

/* 实际开发中不要加，为了看清楚ul外面的布局 */
body {
    background-color: burlywood;
}

.img_list {
    width: 190px;
    height: 470px;
    background-color: #EDF3F0;
    overflow: hidden;
}

.img_list li {
    margin-bottom: 9px;
}

/* 溢出的内容可以不处理的，在ul外面 */
/* .img_list li:not(:last-child){
    margin-bottom: 9px;
} */

.img_list img {
    width: 100%;
}
posted @ 2020-10-02 10:47  悦颜悦色，柠月清风  阅读(383)  评论(0)    收藏  举报