制作一个网页，HTML文件

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

<!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;
}

是否有其他的要求呢？图片资源可以发一下的。

您的问题已经有小伙伴解答了，请点击【采纳】按钮，采纳帮您提供解决思路的答案，给回答的人一些鼓励哦～～

ps:开通问答VIP，享受5次/月有问必答服务，了解详情↓↓↓

【电脑端】戳>>> https://vip.csdn.net/askvip?utm_source=1146287632
【APP 】戳>>> https://mall.csdn.net/item/52471?utm_source=1146287632