我很难为我的任务编写所需的css、javascript和jquery代码

顺晟科技

2021-07-26 10:56:22

122

我很抱歉。这是我在这个社区的个帖子。任何和所有的帮助，可以提出给我将非常感谢。如果您不明白我的问题，或者您需要我具体说明道德规范，请告诉我。

要求我使用html5、css3 javascript和jQuery创建以下结果。

我们希望您构建以下组件:

悬停框时:

[在此处输入图像说明][1]

我已经尝试用下面编写的html5和css3代码完成分配。

<!DOCTYPE html>
<html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta http-equiv="refresh" content="30">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie-edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+icons">
    <link rel="stylesheet" href="4imagelinks.css">
    <script src=""></script>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <title></title>
</head>
<body>

<div class="responsive">
<div class="gallery">
<div id="photo1">
    <a target="_blank" href="standinginahallway1.jpg">
        <img src="standinginahallway1.jpg" alt="" width="600" height="400"></a>
        <div class="desc">Add a description of the image here</div>
</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
    <a target="_blank" href="peopleinahallway2.jpg">
        <img src="peopleinahallway2.jpg" alt="" width="600" height="400"></a>
        <div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
    <a target="_blank" href="studentsinaclassroom.jpg">
        <img src="studentsinaclassroom.jpg" alt="" width="600" height="400"></a>
        <div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="responsive">
<div class="gallery">
    <a target="_blank" href="studentsinaclassroom2.jpg">
        <img src="studentsinaclassroom2.jpg" alt="" width="600" height="400"></a>
        <div class="desc">Add a description of the image here</div>
</div>
</div>

<div class="clearfix"></div>

<div style="padding: 6px;">

</div>

</body>
<footer>
</footer>
</html>

* {
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    margin: 0;
}

body {
    background-color: gray;
}

div.gallery {
    border: 1px solid #ccc;
    background-color: white;
}

div.gallery:hover {
    border: 1px solid #777; 
}

div.gallery img {
    width: ;
    height: auto;
}

div.desc {
    padding: 15px;
    text-align: center;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
        
    }
}

@media only screen and (max-width: 500px) {
    .responsive {
        width: ;
        
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

#photo1 {
    
}

[1]:https://i.stack.imgur.com/ejzpb.png 4imagelinks.zip

顺晟科技：

上一篇：【动画趣事】HTML CSS自定义加下一篇：Django项目中WeazyPrin

网站建设

Html

我很难为我的任务编写所需的css、javascript和jquery代码