如何使用HTML和CSS创建投资组合画廊-html教程-PHP中文网

首页

web前端

html教程

如何使用HTML和CSS创建投资组合画廊

王林

Sep 02, 2023 pm 07:57 PM

html使用组合投资组合画廊html: 投资css: 创建

如何使用HTML和CSS创建投资组合画廊

概述

一个作品集画廊可以是组织过去工作的任何类型的照片和视频的集合。为了构建一个作品集画廊，我们将使用HTML和CSS。HTML将帮助我们构建作品集画廊的骨架，而CSS用于制作作品集的样式。由于作品集也是我们网站的主要组成部分，所以我们将使用一些CSS属性使该页面具有响应性。

Algorithm

第一步 - 在你的文本编辑器上创建一个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="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="">
   </div>
   <p>Java projects 2023 Edition</p>
</div>

第5步 - 如果您想要向div容器添加更多的卡片，请重复第4步。

Step 6 − Add the image in the cards.

第7步 - 画廊组合成功创建。

Example

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="/static/imghwm/default1.png"  data-src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/6584/course_6584_image.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="">
         </div>
         <p>HTML5 and CSS3 projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghwm/default1.png"  data-src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/3903/course_3903_image.png?x-oss-process=image/resize,p_40"  class="lazy" alt="">
         </div>
         <p>Python projects 2023 Ediiton</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/java8/images/java-8-mini-logo.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="">
         </div>
         <p>Java projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghwm/default1.png"  data-src="https://www.tutorialspoint.com/android/images/android-mini-logo.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="">
         </div>
         <p>Android Development projects 2023 Edition</p>
      </div>
      <div class="card">
         <div class="imgs">
            <img src="/static/imghwm/default1.png"  data-src="https://d3mxt5v3yxgcsr.cloudfront.net/courses/4982/course_4982_image.jpg?x-oss-process=image/resize,p_40"  class="lazy" alt="">
         </div>
         <p>Fullstack Projects 2023 Edition</p>
      </div>
   </div>
</body>
</html>

下面的图片是上面示例的响应式图片。上面的代码是响应式的，可以在任何视图屏幕上查看。下面的屏幕是桌面、平板和手机屏幕。

可以在大屏幕上以良好的视角查看桌面视图的投资组合网站。

Conclusion

一个作品集画廊是一个可以在许多类型的网站中使用的组件，比如一个组织网站，它在作品集画廊中展示即将到来的项目和他们在该领域的专业知识，为客户决定是否与特定公司合作提供参考。作品集画廊也被开发者用来展示他们最好的项目给招聘公司。换句话说，我们也可以说它就像我们的手机画廊，其中包含一系列的照片和视频。

以上是如何使用HTML和CSS创建投资组合画廊的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：tutorialspoint。如有侵权，请联系admin@php.cn删除

从文本到网站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一种用于构建网页的语言，通过标签和属性定义网页结构和内容。1）HTML通过标签组织文档结构，如、。2）浏览器解析HTML构建DOM并渲染网页。3）HTML5的新特性如、、增强了多媒体功能。4）常见错误包括标签未闭合和属性值未加引号。5）优化建议包括使用语义化标签和减少文件大小。

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

See all articles