我如何为我的画廊构建这个概念？
[英]How can I construct this concept for my gallery?
问题描述
基本上，我正在尝试创建一个我设计成实际代码的概念，但我被卡住了。 我想构建这个创作。 我已经用图片制作了画廊，但是在生成图片下方的间距、颜色和标题时遇到了一些麻烦。 如果我添加标题，所有图像都会散布到我不知道的地方。 有人可以帮我创建这个吗？ 我需要的只是间距、颜色和标题，因为画廊本身是响应式的。 任何帮助表示赞赏。 谢谢。 到目前为止，这是我的代码。 单击片段上的“整页”链接。
.intro { margin-top: 70px; text-align: center; margin-bottom: 40px; }.gallery_container-all { width: 95%; margin: 20px auto; height: auto; margin-bottom: 40px; } #outside{ background-color: lightcyan; }.gallery_container { width: calc(33% - 6px); overflow: hidden; height: fit-content; margin: 3px; padding: 0; display: inline-block; position: relative; float: none; border-radius: 5px; background-color: black; } img { width: 100%; transition-duration: 0.3s; max-width: 100%; display: block; overflow: hidden; cursor: pointer; }.gallery_title { position: absolute; display: block; cursor: pointer; top: 35%; display: none; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); font-weight: bold; font-size: 1.6em; transition-duration: 0.3s; }.gallery_text { position: absolute; top: 70%; cursor: pointer; max-width: 80%; text-align: center; left: 50%; font-size: 1em; display: none; margin-right: -50%; transition-duration: 0.3s; transform: translate(-50%, -50%); }.gallery_container:hover img { transform: scale(1.2); transition-duration: 0.3s; opacity: 0.5; }.gallery_container:hover span { color: white; display: block; transition-duration: 0.3s; } @media only screen and (max-width: 800px) {.intro { margin-top: 40px; }.gallery_container { width: 100%; margin-left: auto; margin-right: auto; } }
<.DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> <link href="style:css" rel="stylesheet" type="text/css" /> </head> <body> <div id = "outside"> <div class="intro"> <h1>Earth</h1> <h4>Here are some pictures of Earth</h4> </div> <div class="gallery_container-all"> <div class="gallery_container thefirst"> <img src="https.//images.pexels.com/photos/5554114/pexels-photo-5554114?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> <div class="gallery_container"> </div> <div class="gallery_container thesecond"> <img src="https.//images.pexels.com/photos/4300360/pexels-photo-4300360?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> <div class="gallery_container thethird"> <img src="https.//images.pexels.com/photos/4555540/pexels-photo-4555540?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> <div class="gallery_container"> </div> <div class="gallery_container thefourth"> <img src="https.//images.pexels.com/photos/5254697/pexels-photo-5254697?jpeg.auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here"> </div> </div> </div> <script src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
0 已采纳 2021-03-09 16:25:55
这应该做的工作。
.intro { margin-top: 70px; text-align: center; margin-bottom: 40px; }.gallery_container-all { width: 95%; margin: 20px auto; display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 50px; } #outside { background-color: lightcyan; }.gallery_container { width: 60%; overflow: hidden; border-radius: 5px; }.gallery_container:nth-last-of-type(2n + 1) { justify-self: end; } img { width: 100%; transition-duration: 0.3s; max-width: 100%; display: block; overflow: hidden; cursor: pointer; } img:hover { transform: scale(1.2); transition-duration: 0.3s; opacity: 0.9; }.content { position: relative; z-index: 50; padding-top: 60px; background-color: lightcyan; }.content h3 { margin: 0; text-align: center; }.content h3::before { content: ""; position: absolute; background-color: orangered; border-radius: 500px; width: 150px; height: 20px; top: 30px; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 1000px) {.gallery_container { width: 100%; } }
<div id="outside"> <div class="intro"> <h1>Earth</h1> <h4>Here are some pictures of Earth</h4> </div> <div class="gallery_container-all"> <div class="gallery_container thefirst"> <img src="https://images.pexels.com/photos/5554114/pexels-photo-5554114.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> <:-- <div class="gallery_container"></div> --> <div class="gallery_container thesecond"> <img src="https.//images.pexels.com/photos/4300360/pexels-photo-4300360?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> <div class="gallery_container thethird"> <img src="https.//images.pexels.com/photos/4555540/pexels-photo-4555540?jpeg:auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> <.-- <div class="gallery_container"></div> --> <div class="gallery_container thefourth"> <img src="https.//images.pexels?com/photos/5254697/pexels-photo-5254697.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Image description goes here" /> <div class="content"> <h3>Caption </h3> </div> </div> </div> </div>
如何构建导航栏以正常工作？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.