HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ

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

htmlcssweb developmentfront end technology更新于 2024/11/16 9:48:17

作品集网站是展示您的作品和技能的平台。它的作用与简历(Curriculum vitae)相同。大多数简历都是手写的，而作品集网站会通过引人入胜的视觉图像来展示它们，并且通常比手写简历更详细。

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

为什么要创建作品集网站

创建作品集网站的原因有很多，包括以下几点:

  • 首先，它可以让您在潜在雇主、客户和合作伙伴面前展示您最好的作品并强调您的能力。您可以利用该网站来展示您的技能、创造力和解决问题的能力。

  • 此外，作品集网站还有助于打造您的个人品牌，并将您打造为您所在领域的专家。

  • 创建作品集网站有助于与您所在行业的其他专业人士建立联系。通过与他人分享此网站，他们可以探索您的作品，并在有兴趣合作或聘用您时与您联系。

作品集网站的基本布局

在创建能够吸引客户或合作者注意力的作品集网站布局时，应包含以下部分:

  • 主页 − 主页是访客的初始接触点。因此，留下良好的第一印象至关重要。包含自我介绍，并重点展示您的技能和过往工作经历。

  • 关于我 - 为了让访客对您的个人资料更感兴趣，请提供您的教育背景和过往经历的详细信息。此外，分享个人故事可以展现您对所选工作的奉献精神和投入。

  • 项目 - 包含您完成的所有项目，并附上屏幕截图和视频。此外，请提供每个项目的充分信息，以便访客了解您工作的性质并进一步理解其重要性。

  • 联系我 - 添加您的专业联系方式，例如电子邮件、GitHub 个人资料、LinkedIn、YouTube 等。请勿包含您的个人联系方式。

如何创建作品集网站

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

  • 步骤 1 - 首先，创建 HTML 框架代码，这是您网站的起点。

  • 步骤 2 - 在页眉部分添加导航栏，其中包含不同的选项，例如(主页、关于、项目、服务、联系我等)，以帮助用户浏览作品集内容。

  • 步骤 3 - 在正文部分添加简短而清晰的自我简介。此外，您还可以添加图片，使其更具视觉吸引力。

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 部分 -

/* 重置默认浏览器样式 */
* {
    margin: 0;
    padding: 0;
    font-family:sans-serif;
}

/* 页眉部分样式 */
.header {
    width: 100%;
    height: 100vh;
    background-color: lightblue;
}

/* 导航栏样式 */
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.cainiaomax.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.cainiaomax.com/assets/profiles/519798/profile/200_1221559-1663324574.jpg">
      </div>
   </div>
</body>
</html>

相关文章

有用资源

打印 下一节:如何在 HTML 按钮中添加图标? ❯❮ 上一节:使用 HTML 和 CSS 设计一个透明的登录/注册网页