portfolio:使用HTML，CSS和VanillaJS制作的个人作品集网站资源-CSDN文库

共51个文件

png：20个

scss：12个

webp：12个

需积分: 9 178 浏览量 2021-03-26 21:07:10 上传评论收藏 884KB ZIP 举报

【HTML】是HyperText Markup Language的缩写，是构建网页的标准标记语言。它通过一系列预定义的标签（如`<html>`, `<head>`, `<body>`, `<header>`, `<footer>`等）来组织页面结构，使得内容具有语义化，便于浏览器解析和展示。在"portfolio:使用HTML，CSS和Vanilla JS制作的个人作品集网站"项目中，HTML文件将用于创建网站的基本框架，包括头部、主体和底部等各个部分。 `<head>`标签包含文档元信息，如字符编码（`<meta charset="UTF-8">`）、页面标题（`<title>`），以及可能的链接到外部样式表（`<link rel="stylesheet" href="...">`）的引用。在这个作品集中，可能还会包括自定义的CSS样式或JavaScript文件的引入。接着，`<body>`标签内包含所有用户可见的内容。例如，可以使用`<h1>`至`<h6>`标签为每个作品设定标题，`<p>`标签添加描述，`<img>`标签插入图片，而`<a>`标签则创建链接，引导访问者到更多项目详情或联系信息。【CSS】（Cascading Style Sheets）用于控制网页的外观和布局。在个人作品集网站中，CSS将起到美化和个性化设计的作用。通过选择器（如元素选择器、类选择器、ID选择器等），我们可以设置文字样式（如字体、大小、颜色），布局（如宽度、高度、对齐方式），背景（颜色、图像、渐变），以及动画和过渡效果。CSS还支持响应式设计，使网站能在不同设备上呈现良好的视觉效果。例如，可能会有以下CSS代码： ```css .portfolio-item { display: flex; flex-wrap: wrap; justify-content: space-between; } .project-title { font-size: 24px; color: #333; } .project-description { margin-top: 10px; line-height: 1.6; } .img-container { width: 100%; height: auto; overflow: hidden; } ``` 这段代码定义了作品项的布局，标题和描述的样式，以及图片容器的样式。【Vanilla JS】是指原生JavaScript，不依赖任何库或框架。在个人作品集网站中，Vanilla JS可以用来实现交互性功能，如点击显示/隐藏详细信息，滚动时固定导航栏，或者创建动态效果。通过`document.querySelector()`或`document.querySelectorAll()`选择元素，然后使用事件监听器（如`addEventListener()`）添加交互。例如，一个简单的点击显示详细信息的脚本可能是这样的： ```javascript document.querySelectorAll('.project').forEach(project => { project.addEventListener('click', function() { this.querySelector('.project-details').classList.toggle('is-visible'); }); }); ``` 这段代码遍历所有`.project`元素，并为它们添加点击事件监听器，当点击时，切换`.project-details`类的`is-visible`状态，从而实现显示或隐藏详细信息。这个个人作品集网站项目利用HTML来构建页面结构，CSS进行样式设计，以及Vanilla JS实现交互功能。这三种技术的结合，使得开发者能够创建出既美观又功能丰富的作品展示平台。通过持续学习和实践，开发者可以进一步提升技能，打造出更具吸引力的在线作品集。

资源推荐

资源详情

资源评论