HTML以及CSS制作相册

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

HTML以及CSS制作相册相关推荐

html5电子相册在线制作,Html5+jQuery+CSS制作相册小记录
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...
php 制作相册,Html 制作相册
本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点:Html5进行布局调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了 ...
HTML+CSS制作3D旋转相册
一.HTML+CSS制作3D旋转相册哈哈哈,放寒假啦!又可以好好闭关修炼了,最近,在抽屉里无意中翻到了自己上小学时的照片,太可爱啦,照片我就不贴出来了,于是,我就想着用所学的知识,做一个3D旋转相册 ...
html相册浏览页面怎么做,ul结合CSS制作网页相册滑动浏览效果
ul结合CSS制作网页相册滑动浏览效果互联网发布时间:2008-10-17 19:25:02 作者:佚名我要评论英文原文:Sliding Photograph Galleries ...
html+css制作3D七夕表白旋转相册特效
一个温暖的拥抱,一句轻声的问候,一个暖心的笑容,一双坚实的双手,让我们日久天长,健健康康,快乐每一天!祝你们七夕快乐!一个基于html+css制作简易的3D七夕表白旋转相册特效,就当送给你们当作七夕表 ...
html图片滚动浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
html做相册浏览,ul结合CSS制作网页相册滑动浏览效果
别开生面纯CSS实现相册预览 ximicc.com body{ font-size:12px; color: #CC0000; } p { background-color: #F1FAFE; } # ...
使用 | HTML CSS | 制作精美相框
文章目录使用dw编写精美相框 1,制作魔法动态相册 (1)html源码 (2)css源码 (3)运行效果 2,神奇创意相框 (1)HTML源码 (2)运行结果 3,普通相框 (1)HTML源码 (2 ...
纯CSS制作的图形效果
纯CSS制作的图形效果很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容 ...

HTML以及CSS制作相册

HTML以及CSS制作相册相关推荐

最新文章

热门文章