H5图片展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        body{
            background-image: url("1.jpeg");
            background-repeat: repeat;
        }
    </style>
</head>
<body>

</body>
</html>
/**
     * imgHtml
     */
    public static String imgHtml(List<String> lstr){
        StringBuilder li = new StringBuilder();
        //拼接一段HTML代码
        li.append("<!DOCTYPE html>" +
                "<html lang=\"en\">" +
                "<head>" +
                "<meta charset=\"UTF-8\">\n" +
                "<title>Title</title>\n" +
                "<style type=\"text/css\">\n" +
                "body{" +
                "background-image: url(\"" +
                "1.jpeg" +
                "\");" +
                "background-repeat: repeat;" +
                "}" +
                "</style>" +
                "</head>" +
                "<body>" +
                "</body>" +
                "</html>");

        return li.toString();
    }


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题涉及到前端页面的布局和交互特效,可以使用HTML、CSS和JavaScript来实现。以下是一个简单的实现方案: HTML代码: ```html <div class="image-list"> <div class="image-item"> <img src="image1.jpg"> <div class="description">图片描述1</div> </div> <div class="image-item"> <img src="image2.jpg"> <div class="description">图片描述2</div> </div> <div class="image-item"> <img src="image3.jpg"> <div class="description">图片描述3</div> </div> <!-- 其他图片项 --> </div> ``` CSS代码: ```css .image-list { width: 720px; margin: 0 auto; display: flex; flex-wrap: wrap; } .image-item { width: calc(33.33% - 10px); margin-right: 10px; margin-bottom: 10px; position: relative; } .image-item img { display: block; width: 100%; height: auto; transition: transform 0.2s ease-out; } .image-item .description { position: absolute; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.5); color: #fff; font-size: 14px; height: 2rem; padding: 0.5rem; box-sizing: border-box; } .image-item:hover img { transform: scale(1.1); } ``` 解释一下CSS的实现: 1. `image-list`是一个div容器,设置宽度为720px,并且水平居中显示。 2. `image-item`是每个图片项的容器,设置宽度为33.33%,也就是一行显示三个,同时设置右边距和下边距为10px,实现图片间的间距。注意,这里使用`calc()`函数计算宽度,去掉右边距的10px。 3. `image-item img`是图片元素,设置宽度为100%自适应容器宽度,高度自适应,同时设置一个过渡效果,当鼠标移入时,图片元素的`transform`属性会从默认值(1)变为1.1,实现放大特效。 4. `image-item .description`是图片描述文字的容器,设置绝对定位在图片底部,并且设置一个透明度为0.5的黑色背景,同时设置文字颜色为白色,字号为14px,高度为2rem,实现文字的布局和样式。 JavaScript部分可以不用编写,这个特效可以直接使用CSS实现。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值