一个作品集画廊可以是组织过去工作的任何类型的照片和视频的集合。为了构建一个作品集画廊,我们将使用HTML和CSS。HTML将帮助我们构建作品集画廊的骨架,而CSS用于制作作品集的样式。由于作品集也是我们网站的主要组成部分,所以我们将使用一些CSS属性使该页面具有响应性。
第一步 - 在你的文本编辑器上创建一个HTML样板。
步骤2 - 创建页面头部的容器。
第三步 - 现在创建另一个div容器来创建一个画廊,并使容器具有弹性和换行。以使页面具有响应性。
<div class="gallery"></div>
Step 4 − Add the cards to the gallery and fix the size of the card.
<div class="card"> <div class="imgs"> <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt=""> </div> <p>Java projects 2023 Edition</p> </div>
第5步 - 如果您想要向div容器添加更多的卡片,请重复第4步。
Step 6 − Add the image in the cards.
第7步 - 画廊组合成功创建。
In this example we have created two files which helps us to create the portfolio gallery. In the HTML file we have linked the stylesheet to provide the styling to the page. The
<html> <head> <title>Portfolio Gallery</title> <link rel="stylesheet" href="style.css"> <style> *{ margin-top: 0; font-family: 'Segoe UI'; } .title{ font-size: 2rem; font-weight: 700; background-color: white; width: 100%; } .subtitle{ font-size: 0.8rem; } .dash{ width: 100%; height: 2px; background-color: rgb(143, 143, 143); margin-bottom: 0.5rem; } .gallery{ width: 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; padding: 1rem 0; } .card{ width: 15rem; height: 15rem; box-shadow: 0 0 5px rgb(165, 165, 165); border-radius: 5px; padding: 0.5rem; } .card:hover{ transform: scale(1.009); cursor: pointer; } .imgs{ background: rgb(219, 218, 218); height: 60%; border-radius: 5px; } img{ width: 100%; height: 100%; border-radius: 5px; } p{ padding: 1rem 0.5rem; font-weight: 600; } </style> </head> <body> <div class="title"> Portfolio <div class="subtitle"> Developers best projects of all the domain </div> <div class="dash"></div> </div> <div class="gallery"> <div class="card"> <div class="imgs"> <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg" alt=""> </div> <p>HTML5 and CSS3 projects 2023 Edition</p> </div> <div class="card"> <div class="imgs"> <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png" alt=""> </div> <p>Python projects 2023 Ediiton</p> </div> <div class="card"> <div class="imgs"> <img src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg" alt=""> </div> <p>Java projects 2023 Edition</p> </div> <div class="card"> <div class="imgs"> <img src="https://www.tutorialspoint.com/android/images/android-mini-logo.jpg" alt=""> </div> <p>Android Development projects 2023 Edition</p> </div> <div class="card"> <div class="imgs"> <img src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg" alt=""> </div> <p>Fullstack Projects 2023 Edition</p> </div> </div> </body> </html>
下面的图片是上面示例的响应式图片。上面的代码是响应式的,可以在任何视图屏幕上查看。下面的屏幕是桌面、平板和手机屏幕。
可以在大屏幕上以良好的视角查看桌面视图的投资组合网站。
一个作品集画廊是一个可以在许多类型的网站中使用的组件,比如一个组织网站,它在作品集画廊中展示即将到来的项目和他们在该领域的专业知识,为客户决定是否与特定公司合作提供参考。作品集画廊也被开发者用来展示他们最好的项目给招聘公司。换句话说,我们也可以说它就像我们的手机画廊,其中包含一系列的照片和视频。
伪元素覆盖导致白边?如何解决?
如何将简写的 CSS 属性转换为详细的 CSS 属性?
如何将线性渐变线段拼接成多条线段并保持原始渐变效果?
Element UI水平菜单:如何将鼠标悬停展开改为点击展开?
在Vue中使用rem插件实现自适应屏幕大小时,需要刷新才能达到预期效果的原因主要有以下几点:DOM更新时机:Vue的生命周期和DOM更新机制可能会影响rem插件的执行时机。有些rem插件在页面初次加载时可能不会立即生效,需要在DOM完全更新后才能正确计算和应用rem单位。CSS注入顺序:如果rem插件通过JavaScript动态生成CSS规则,这些规则可能在页面初次渲染时没有及时注入到DOM中。刷新页面后,CSS规则被正确注入,从而达到预期效果。视口变化检测:有些rem插件依赖于视口大小的变化来重新计算r
网页如何实现选择本地文件夹功能,如同VS Code for the Web?