HTML以及CSS制作相册

最新推荐文章于 2024-05-25 10:10:31 发布

竹骄傲

最新推荐文章于 2024-05-25 10:10:31 发布

阅读量2.8k

点赞数 4

分类专栏：前端文章标签： jquery javascript 前端 css3 html

本文链接：https://blog.csdn.net/qq_51131331/article/details/122434426

版权

前端专栏收录该内容

12 篇文章 1 订阅

订阅专栏

1.效果图：

2.设计思想：

在设计相册网页时，需要先想好一个整体的大致内容，然后再去具体实施。在这次设计相册的实验中，将整个相册都放在了一个div块中，而这个div块又被分为了三个部分，在最上方是一个的相册的英文标题，然后在下方，有2个div块，在第一个div块中存放的是分割线，在第二个div块中存放的是图片，当把基本框架设计好了之后，还有最后一个部分：JavaScript，设计好功能函数，在这里，使用了jquery，可以更方便简单地达到效果，在鼠标移到照片时，照片会放大并且偏移，在鼠标点击照片时，照片会放大，且可以左右切换。

3.实验总结：

在进行web网页设计时，一共有html，css，JavaScript三个部分，HTML是语义，css是表现，JavaScript是动作，要根据这三个部分进行技术，协调好网页的各个部分，这样才能让网页有比较好的效果，在写JavaScript时，可以导入jQuery包，这样可以更方便简洁的写出函数。

4.实验代码：

HTML：

<!DOCTYPE html>
<html lang="en">
<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>相册</title>
    <link rel="stylesheet" href="xcc.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.bootcss.com/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/magnific-popup.js/1.1.0/magnific-popup.min.css">
</head>
<body>
    <div class="gallery-section">
        <div class="inner-width">
            <h1>Gallery</h1>
            <div class="border"></div>
            <div class="gallery">

                <a href="img/01.png" class="image">
                    <img src="img/01.png" alt="">
                </a>

                <a href="img/02.jpg" class="image">
                    <img src="img/02.jpg" alt="">
                </a>

                <a href="img/03.jpg" class="image">
                    <img src="img/03.jpg" alt="">
                </a>

                <a href="img/04.jpg" class="image">
                    <img src="img/04.jpg" alt="">
                </a>

            </div>
        </div>
    </div>
    <script>
        $(".gallery").magnificPopup({
            delegate:  'a',
            type: 'image',
            gallery:{
                enabled:true
            }
        });
    </script>
</body>
</html>

CSS：

*{
    margin: 0;
    padding: 0;
    font-family: "montserrat",sans-serif;
    box-sizing: border-box;
}

.gallery-section{
    width: 100%;
    height: 100%;
    padding: 60px 0;
    background: #f1f1f1;
    background-image: url(img/bj.png);
}
.inner-width{
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}
.gallery-section h1{
    text-align: center;
    text-transform: uppercase;
    color: #333;
}
.border{
    width: 180px;
    height: 4px;
    background: #333;
    margin: 60px auto;
}
.gallery-section .gallery{
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: center;
}
.gallery-section .image{
    flex: 25%;
    overflow: hidden;
    cursor: pointer;
}
.gallery-section .image img{
    width: 100%;
    height: 100%;
    transition: 0.4s;
    
}
.gallery-section .image:hover img{
    transform: scale(1.4) rotate(15deg);
}

@media screen and (max-width:960px) {
    .gallery-section .image{
        flex: 33.33%;
    }
}
@media screen and (max-width:768px) {
    .gallery-section .image{
        flex: 50%;
    }    
}
@media screen and (max-width:480px) {
    .gallery-section .image{
        flex: 100%;
    }
}

竹骄傲

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML以及CSS制作相册

1.效果图：2.设计思想：在设计相册网页时，需要先想好一个整体的大致内容，然后再去具体实施。在这次设计相册的实验中，将整个相册都放在了一个div块中，而这个div块又被分为了三个部分，在最上方是一个的相册的英文标题，然后在下方，有2个div块，在第一个div块中存放的是分割线，在第二个div块中存放的是图片，当把基本框架设计好了之后，还有最后一个部分：JavaScript，设计好功能函数，在这里，使用了jquery，可以更方便简单地达到效果，在鼠标移到照片时，照片会放大并且偏...
复制链接

扫一扫