以下是一个简单的个人网页的HTML和CSS代码，内容围绕个人介绍、技能展示、项目经历和联系方式展开。
图片来源于网络，如有侵权联系删除
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人网站</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header {
background: #333;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #0066cc 3px solid;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
}
header ul {
padding: 0;
list-style: none;
}
header li {
float: left;
display: inline;
padding: 0 20px 0 20px;
}
header #branding {
float: left;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 10px;
}
header .highlight, header .current a {
color: #e8491d;
font-weight: bold;
}
header a:hover {
color: #ffffff;
font-weight: bold;
}
.banner {
background: url('banner.jpg') no-repeat center center/cover;
height: 500px;
color: #fff;
text-align: center;
padding-top: 100px;
}
.banner h1 {
font-size: 55px;
margin: 0;
}
.about, .skills, .projects, .contact {
padding: 20px 0;
background: #fff;
margin-bottom: 20px;
}
.about h2, .skills h2, .projects h2, .contact h2 {
text-align: center;
font-size: 30px;
color: #333;
margin-bottom: 20px;
}
.about p, .skills p, .projects p, .contact p {
font-size: 18px;
line-height: 1.6;
margin-bottom: 10px;
}
.contact form {
margin-top: 20px;
}
.contact form input[type="text"], .contact form input[type="email"], .contact form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ddd;
}
.contact form input[type="submit"] {
background: #0066cc;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
.contact form input[type="submit"]:hover {
background: #005599;
}
footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<div class="container">
<div id="branding">
<h1><span class="highlight">个人</span>网站</h1>
</div>
<nav>
<ul>
<li class="current"><a href="#home">首页</a></li>
<li><a href="#about">关于我</a></li>
<li><a href="#skills">技能</a></li>
<li><a href="#projects">项目</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</div>
</header>
<section class="banner">
<div class="container">
<h1>欢迎来到我的个人网站</h1>
<p>这里是我展示自我、分享知识和技能的平台。</p>
</div>
</section>
<section class="about">
<div class="container">
<h2>关于我</h2>
<p>
我是一名热衷于前端开发的工程师，拥有多年的工作经验，我对HTML5、CSS3、JavaScript等前端技术有着深入的了解，并能够熟练运用它们构建出高质量的网页。
</p>
<p>
在我的职业生涯中，我参与了许多有趣的项目，从简单的个人博客到复杂的电子商务网站，我都能游刃有余地完成，我相信，技术是不断进步的，我会持续学习，不断提升自己的技能。
</p>
</div>
</section>
<section class="skills">
<div class="container">
<h2>我的技能</h2>
<p>
下面是我掌握的一些技能：
</p>
<ul>
<li>HTML5：能够使用HTML5构建响应式网页，实现丰富的页面结构。</li>
<li>CSS3：熟练运用CSS3进行页面样式设计，实现动画效果和交互动画。</li>
<li>JavaScript：掌握JavaScript编程，能够实现复杂的前端交互和数据处理。</li>
<li>框架：熟悉Bootstrap、Vue.js、React等前端框架，能够快速开发出高质量的网页。</li>
<li>响应式设计：能够设计出在不同设备上都能良好显示的响应式网页。</li>
</ul>
</div>
</section>
<section class="projects">
<div class="container">
<h2>我的项目</h2>
<p>
下面是我参与过的一些项目：
</p>
<div class="project">
<h3>项目一：个人博客</h3>
<p>
这是一个基于HTML5和CSS3的个人博客，用于分享我的生活、工作和学习心得，项目采用了响应式设计，能够适应不同的设备屏幕。
</p>
</div>
<div class="project">
<h3>项目二：电子商务网站</h3>
<p>
这是一个全功能的电子商务网站，包括商品展示、购物车、订单管理等模块，项目使用了Vue.js框架，实现了前后端分离，提高了开发效率和用户体验。
</p>
</div>
</div>
</section>
<section class="contact">
<div class="container">
<h2>联系我</h2>
<p>
如果您对我的工作感兴趣，或者有合作意向，请通过以下方式联系我：
</p>
<form>
<input type="text" placeholder="姓名" required>
<input type="email" placeholder="邮箱" required>
<textarea placeholder="留言" rows="5" required></textarea>
<input type="submit" value="发送">
</form>
</div>
</section>
<footer>
<p>个人网站 © 2023</p>
</footer>
</body>
</html>代码是一个简单的个人网站模板，包含了首页、关于我、技能、项目和联系方式等部分，通过HTML5和CSS3技术，我们实现了页面的布局、样式和交互效果，这个网站是一个很好的起点，可以根据个人需求进行扩展和定制。
图片来源于网络，如有侵权联系删除
标签： #html5和css3制作个人网站源码
评论列表