当前位置：极客笔记 > CSS > CSS 精选笔记 > CSS 使用HTML和CSS设计一个作品集网页

CSS 使用HTML和CSS设计一个作品集网页

CSS 使用HTML和CSS设计一个作品集网页

作品集网站可以展示你的作品和展示你的技能。它的目的与CV（简历）相同。大多数简历是手写的，而作品集网站会以引人入胜的视觉图像展示它们，通常比手写的简历更详细。

这是吸引公司、招聘经理和招聘人员注意你的一种有效方式。除此之外，这也是展示和让别人了解你作为专业人士的最佳和最现代的方式之一。

为什么要创建一个作品集网站

创建作品集网站有几个原因。包括以下几点：

  • 首先，它允许你展示你的优秀作品，强调你在潜在雇主、客户和合作伙伴面前的能力。你可以利用网站突出你的技能、创造力和解决问题的能力。

  • 此外，作品集网站有助于建立你的个人品牌，将自己确立为领域的专家。

  • 创建作品集网站有助于与行业内其他专业人才建立联系。通过与他人分享这个网站，他们可以探索你的作品，并在对合作或聘请你感兴趣时联系你。

作品集网站的基本布局

为了吸引客户或合作伙伴的注意，创造一个作品集网站布局，应该包含以下几个部分：

  • 首页 - 首页是访问者的初次接触点。因此，在这里给人留下良好的第一印象很重要。除了展示你的技能和过去的工作经验，还要介绍一下自己。

  • 关于我 - 为了进一步吸引访问者对你的个人资料感兴趣，包括关于你的教育背景和以往经验的详细信息。此外，分享个人故事将显示出你对所选择工作的奉献和承诺。

  • 项目 - 包括你完成的所有项目的截图和视频。此外，提供足够的信息，让访问者能够理解你的工作性质并进一步欣赏其重要性。

  • 联系我 - 添加你的专业联系方式，如电子邮件、Github个人资料、领英、YouTube等。不要包括你的个人联系方式。

如何创建作品集网站

以下是创建作品集网站的步骤：

  • 第一步 - 首先，创建一个HTML骨架代码，这是你网站的起点。

  • 第二步 - 在头部部分添加一个导航栏，包括不同的选项（首页、关于、项目、服务、联系我等），以帮助用户浏览作品集的内容。

  • 第三步 - 在body部分内添加一个简短而简洁的关于自己的摘要。此外，你可以添加自己的照片，使其更具视觉吸引力。

HTML

以下是作品集网页的HTML部分 –

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width", initial-scale="1.0">
   <link rel="stylesheet" href="style.css">
   <title>Personal portfolio</title>
</head>
<body>
   <!-- Header section -->
   <div class="header">
      <nav>
         <a href="#"><img src="logo.jpg" alt="logo" class="logo" height="120px" width="150px"></a>
         <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">CONTACT ME</a></li>
            <li><button type="button"class="button-gfc">Get Free Consultant</button></li>
            <li><button type="button" class="button-cv">DOWNLOAD CV</button></li>
         </ul>
      </nav>

      <!-- Body section -->
      <div class="body">
         <p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
         <h1>Hello <br> I'm Abhimanyu <span>Mathur.</span></h1>
         <p class="demo2">From concept to deployment, I bring ideas<br> to life as a versatile full stack developer...</p>

         <button type="button" class="button-lrn">LEARN MORE</button>
         <button type="button" class="button-hire">HIRE ME</button>
      </div>
      <!-- Image section -->
      <div class="image">
         <img src="man2.jpg">
      </div>
   </div>
</body>
</html>

CSS

以下是简历网页的CSS部分-

/* Reset default browser styles */
* {
   margin: 0;
   padding: 0;
   font-family:sans-serif;
}

/* Styles for header section */
.header {
   width: 100%;
   height: 100vh;
   background-color: lightblue;
}

/* Styles for navigation bar */
nav {
   display: flex;
   margin: auto;
   width: 90%;
   padding: 20px;
   align-items: center;
   justify-content: space-between;
}

nav ul li {
   display: inline-block;
   list-style: none;
   margin: 10px;
}

nav ul li a {
   text-decoration: none;
   color: black;
   font-weight: bolder;
}

nav ul li a:hover {
   background-color: seagreen;
   border-radius: 2px;
   color: white;
}

.button-cv, .button-gfc{
   display: inline-block;
   margin-left: 0%;
   border-radius: 5px;
   transition: background-color 0.5s;
   background: black;
   padding: 10px;
   text-decoration: none;
   font-weight: bold;
   color: white;
   border: none;
   cursor: pointer;
}

.button-cv:hover {
   background-color: white;
   color: black;
}

.button-gfc{
   background: lightsalmon;
}

.button-gfc:hover {
   background-color: white;
   color: black;
}

/* Styles for body section */
.body {
   margin-left: 100px;
   margin-top: 100px;
}

.body h1 {
   font-size: 30px;
   color: black;
   margin-bottom: 20px;
}

.demo1 {
   color: orange;
   margin-bottom: 30px;
}

.demo2 {
   color: black;
   line-height: 20px;
}

.button-lrn, .button-hire{
   background: lightsalmon;
   padding: 10px 12px;
   text-decoration: none;
   font-weight: bold;
   color: whitesmoke;
   display: inline-block;
   margin: 30px 8px;
   border-radius: 5px;
   transition: background-color 0.3s;
   border: none;
   letter-spacing: 1px;
   cursor: pointer;
}

.button-lrn:hover {
   background-color: whitesmoke;
   color: black;
}

.button-hire {
   background: black;
}

.button-hire:hover {
   background-color: seagreen;
}

span {
   color: seagreen;
}

/* Styles for image section */
.image {
   width: 45%;
   height: 100%;
   position: absolute;
   bottom: 0;
   right: 100px;
}

.image img {
   height: 100%;
   position:absolute;
   left: 50%;
   bottom: 10%;
   transform: translate(-60%);
}

示例

以下是设计一个投资组合网站的完整代码-

<!DOCTYPE html>
<html>
<head>
   <meta name="viewport" content="width=device-width", initial-scale="1.0">
   <link rel="stylesheet" href="style.css">
   <title>Personal portfolio</title>
   <style>
      /* Reset default browser styles */
      * {
         margin: 0;
         padding: 0;
         font-family:sans-serif;
      }

      /* Styles for header section */
      .header {
         width: 100%;
         height: 100vh;
         background-color: lightblue;
      }

      /* Styles for navigation bar */
      nav {
         display: flex;
         margin: auto;
         width: 90%;
         padding: 20px;
         align-items: center;
         justify-content: space-between;
      }

      nav ul li {
         display: inline-block;
         list-style: none;
         margin: 10px;
      }

      nav ul li a {
         text-decoration: none;
         color: black;
         font-weight: bolder;
      }

      nav ul li a:hover {
         background-color: seagreen;
         border-radius: 2px;
         color: white;
      }

      .button-cv, .button-gfc{
         display: inline-block;
         margin-left: 0%;
         border-radius: 5px;
         transition: background-color 0.5s;
         background: black;
         padding: 10px;
         text-decoration: none;
         font-weight: bold;
         color: white;
         border: none;
         cursor: pointer;
      }

      .button-cv:hover {
         background-color: white;
         color: black;
      }

      .button-gfc{
         background: lightsalmon;
      }

      .button-gfc:hover {
         background-color: white;
         color: black;
      }

      /* Styles for body section */
      .body {
         margin-left: 100px;
         margin-top: 100px;
      }

      .body h1 {
         font-size: 30px;
         color: black;
         margin-bottom: 20px;
      }

      .demo1 {
         color: orange;
         margin-bottom: 30px;
      }

      .demo2 {
         color: black;
         line-height: 20px;
      }

      .button-lrn, .button-hire{
         background: lightsalmon;
         padding: 10px 12px;
         text-decoration: none;
         font-weight: bold;
         color: whitesmoke;
         display: inline-block;
         margin: 30px 8px;
         border-radius: 5px;
         transition: background-color 0.3s;
         border: none;
         letter-spacing: 1px;
         cursor: pointer;
      }

      .button-lrn:hover {
         background-color: whitesmoke;
         color: black;
      }

      .button-hire {
         background: black;
      }

      .button-hire:hover {
         background-color: seagreen;
      }

      span {
         color: seagreen;
       }

      /* Styles for image section */
      .image {
         width: 45%;
         height: 100%;
         position: absolute;
         bottom: 0;
         right: 100px;
      }
      .image img {
         height: 70%;
         position:absolute;
         left: 50%;
         bottom: 10%;
         transform: translate(-60%);
      }
   </style>
</head>
<body>
   <!-- Header section -->
   <div class="header">
      <nav>
         <a href="#"><img src="https://www.tutorialspoint.com/images/logo.png?v2" alt="logo" class="logo"></a>
         <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">PROJECTS</a></li>
            <li><a href="#">SERVICES</a></li>
            <li><a href="#">CONTACT ME</a></li>
            <li><button type="button"class="button-gfc">Get Free Consultant</button></li>
            <li><button type="button" class="button-cv">DOWNLOAD CV</button></li>
         </ul>
      </nav>

      <!-- Body section -->
      <div class="body">
         <p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
         <h1>Hello <br> I'm Abhimanyu <span>Mathur.</span></h1>
         <p class="demo2">From concept to deployment, I bring ideas<br> to life as a versatile full stack developer...</p>
         <button type="button" class="button-lrn">LEARN MORE</button>
         <button type="button" class="button-hire">HIRE ME</button>
      </div>

      <!-- Image section -->
      <div class="image">
         <img src="https://www.tutorialspoint.com/assets/profiles/519798/profile/200_1221559-1663324574.jpg">     
      </div>
   </div>
</body>
</html>

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

CSS 精选笔记