我如何為我的畫廊構建這個概念？
[英]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.