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

使用HTML和CSS设计作品集网页可以有效地展示您的最佳作品，并吸引专业人士与您合作或招聘您。作品集网站作为展示您的作品和技能的平台，其作用与简历(Curriculum vitae)相同。作品集网站将以引人入胜的视觉图像展示您的作品，通常比手写的简历更详细。

在本文中，我们将学习并了解如何通过逐步解释和示例代码来使用HTML和CSS设计作品集网页。

为什么要创建作品集网站？

创建作品集网站有几个原因，例如：

向潜在的雇主、客户和合作者展示您的最佳作品，并突出您的能力。
作品集网站有助于建立您的个人品牌，并使您在您的领域成为专家。
它促进了与其他专业人士的联系，通过与他人分享此网站，他们可以浏览您的作品，如果他们有兴趣与您合作或招聘您，则可以联系您。

作品集网站的基本布局

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

主页：这是访问者的初始接触点，因此要留下良好的第一印象，并包含关于您自己以及您的技能和过去工作经历的介绍。
关于我：向访问者提供有关您的教育背景和先前经验的详细信息。
项目：包含您的项目说明和项目链接。
联系我：添加您的专业联系方式，例如电子邮件、GitHub 个人资料、LinkedIn、YouTube 等。请勿包含您的个人联系方式。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

设计作品集网页的步骤

我们将按照以下步骤使用HTML和CSS设计作品集网页。

使用HTML创建作品集布局
使用CSS设置作品集样式

使用HTML创建作品集布局

我们使用了两个div元素来定义作品集的页眉和正文部分。
作品集的页眉部分包含一个带有各种链接和按钮的导航栏，分别使用nav、anchor和button标签创建，以及使用img标签创建的徽标。我们使用了ul在导航栏中创建一个无序链接列表。
作品集的正文部分包含使用p和span标签创建的简短说明、按钮和用户的个人资料图片。

<div class="header">
    <nav>
        <a href="#"><img src="/images/logo.png?v2" 
                         alt="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>
    <div class="body">
        <p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
        <h1>Hello <br> I'm <span class="green">Tutorials</span> 
            <span>Point.</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>
    <div class="image">
        <img src="/assets/questions/media/1269191-1730184507.jpg" 
             class="icon" alt="Profile Picture">
    </div>
</div>

使用CSS设置作品集样式

我们使用了**通配符选择器**将margin和padding重置为0，并设置整个文档的字体。
**header**类使用CSS的height和width属性设置页眉的背景颜色和尺寸。
我们使用了**nav**元素选择器来设置导航栏的样式。display属性使其成为flexbox。align-items属性居中导航栏，justify-content用于均匀间距。它设置导航栏的边距、填充和宽度。
**li**样式通过使用list-style属性删除其默认项目符号并水平显示链接来设置列表项的样式。
**a**样式通过使用text-decoration删除链接的下划线，更改文本颜色并使用font-weight属性使链接变为粗体来设置所有链接的样式。
我们使用了带有锚点标签的:hover伪类，它在悬停在链接上时会更改背景颜色、文本颜色并设置弯曲的边缘。
**button-cv, .button-gfc**样式设置按钮样式。它设置背景颜色、文本颜色、弯曲的边缘和transition效果，同时更改背景颜色。cursor属性将鼠标更改为指针，将左外边距重置为0，设置填充并删除边框。
我们在悬停在这些按钮上时更改了背景颜色和文本颜色。
然后，我们设置了**body**部分的左和顶边距，并通过设置其字体大小、底部边距和文本颜色来设置标题的样式。
我们使用了**image**类来设置包含图像的div的样式。我们设置了div的最大宽度、高度和位置。我们使用了bottom和right属性来定位网页中的图像。
最后，我们使用了**icon**类来设置图像的样式，我们设置了它的高度和位置。left和transform属性居中图像，clip-path创建图像的圆形形状，使其看起来像个人资料图片。

* {
    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;
}
li {
    display: inline-block;
    list-style: none;
    margin: 10px;
}
a {
    text-decoration: none;
    color: black;
    font-weight: bolder;
    padding: 5px;
}
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;
}
.body {
    margin-left: 100px;
    margin-top: 100px;
}
h1 {
    font-size: 30px;
    color: black;
    margin-bottom: 20px;
}
.demo1 {
    color: orange;
    margin-bottom: 30px;
}
.demo2 {
    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;
}
.green {
    color: seagreen;
}
.image {
    max-width: fit-content;
    height: 70%;
    position: absolute;
    bottom: 25%;
    right: 25%;
}
.icon {
    height: 120%;
    position: absolute;
    left: 50%;
    transform: translate(-60%);
    clip-path: circle(26%);
}

完整的示例代码

Open Compiler

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" , initial-scale="1.0">
    <title>Personal portfolio</title>
    <style>
        * {
            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;
        }
        li {
            display: inline-block;
            list-style: none;
            margin: 10px;
        }
        a {
            text-decoration: none;
            color: black;
            font-weight: bolder;
            padding: 5px;
        }
        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;
        }
        .body {
            margin-left: 100px;
            margin-top: 100px;
        }
        h1 {
            font-size: 30px;
            color: black;
            margin-bottom: 20px;
        }
        .demo1 {
            color: orange;
            margin-bottom: 30px;
        }
        .demo2 {
            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;
        }
        .green {
            color: seagreen;
        }
        .image {
            max-width: fit-content;
            height: 70%;
            position: absolute;
            bottom: 25%;
            right: 25%;
        }
        .icon {
            height: 120%;
            position: absolute;
            left: 50%;
            transform: translate(-60%);
            clip-path: circle(26%);
        }
    </style>
</head>
<body>
    <div class="header">
        <nav>
            <a href="#"><img src="/images/logo.png?v2" 
                             alt="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>
        <div class="body">
            <p class="demo1">GET EVERY SINGLE SOLUTIONS.</p>
            <h1>Hello <br> I'm <span class="green">Tutorials</span> 
                <span>Point.</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>
        <div class="image">
            <img src="/assets/questions/media/1269191-1730184507.jpg" 
                 class="icon" alt="Profile Picture">
        </div>
    </div>
</body>
</html>

输出

结论

在本文中，我们学习并理解了如何使用HTML和CSS设计作品集网页。我们设计了一个包含导航栏、链接、徽标、按钮和个人资料图片的基本作品集网页。

Nikhilesh Aleti

更新于：2024年10月29日

14K+ 浏览量

开启你的职业生涯

通过完成课程获得认证

开始学习