m0_58362361 2021-05-29 16:05 采纳率: 100%
浏览 56
已采纳

制作一个网页，HTML文件

下图效果，图片标题自拟，实现图片放置在一个div中，初始有groove效果边框，当鼠标移到图片时，边框变成dotted型

 

  • 写回答

3条回答 默认 最新

  • CSDN专家-林老师 2021-05-29 16:27
    关注
    <!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container">
        <h2>京东商品导购</h2>
        <div class="item-list">
            <div class="item">
                <img src="./images/img1.png" alt="">
            </div>
            <div class="item">
                <img src="./images/img1.png" alt="">
            </div>
            <div class="item clear-margin">
                <img src="./images/img1.png" alt="">
            </div>
            <div class="item">
                <img src="./images/img1.png" alt="">
            </div>
            <div class="item">
                <img src="./images/img1.png" alt="">
            </div>
            <div class="item clear-margin">
                <img src="./images/img1.png" alt="">
            </div>
        </div>
    </div>
</body>

</html>
    * {
    margin: 0;
    padding: 0;
}
.container {
    width: 1000px;
    height: auto;
    border: blue 3px solid;
    box-sizing: border-box;
    margin: 0 auto;
    height: 730px;
}
.container h2 {
    color: red;
    text-align: center;
}
.item-list {
    width: 980px;
    height: 100px;
    margin: 10px auto;
    box-sizing: border-box;
}
.item-list .item {
    width: 320px;
    height: 320px;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
    box-sizing: border-box;
    border: 5px groove slateblue;
}
.item:hover {
    border: 5px dashed slateblue;
}
.clear-margin {
    margin-right: 0 !important;
}
.item img {
    width: 310px;
    height: 310px;
}
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥35 平滑拟合曲线该如何生成
  • ¥100 c语言，请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集