一个简单的HTML 个人网页

<!DOCTYPE html> <html lang="en"> <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; background-color: #f1f1f1; margin: 0; padding: 0; }

复制代码
    header {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
    }
    
    h1 {
        margin: 0;
    }
    
    nav {
        background-color: #555;
        color: #fff;
        padding: 10px;
    }
    
    nav ul {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
    }
    
    nav ul li {
        display: inline-block;
        margin-right: 20px;
    }
    
    nav ul li a {
        color: #fff;
        text-decoration: none;
    }
    
    section {
        padding: 20px;
    }
    
    footer {
        background-color: #333;
        color: #fff;
        padding: 20px;
        text-align: center;
        font-size: 14px;
    }
&lt;/style>

</head> <body> <header> <h1>欢迎来到我的个人网页</h1> </header> <nav> <ul> <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> <section id="about"> <h2>关于我</h2> <p>你好,我是XXX,一名热爱编程的前端工程师。我喜欢探索新技术,并且不断提升自己的技能。</p> <p>在我的个人网页中,你可以了解我关于技术方面的知识和经验,还可以看到我的项目以及如何联系我。</p> </section> <section id="skills"> <h2>我的技能</h2> <ul> <li>HTML/CSS</li> <li>JavaScript</li> <li>React</li> <li>Vue.js</li> <li>Node.js</li> </ul> </section> <section id="projects"> <h2>我的项目</h2> <ul> <li>项目1:简历生成器</li> <li>项目2:电子商务网站</li> <li>项目3:博客系统</li> </ul> </section> <section id="contact"> <h2>联系我</h2> <p>如果你对我的个人网页或者项目有任何疑问或者建议,欢迎与我联系。</p> <p>Email: xxx@example.com</p> <p>电话: 123-456-7890</p> </section> <footer> © 2021 个人网页. All rights reserved. </footer> </body> </html>

相关推荐
机构师6 小时前
<uniapp><指针组件>基于uniapp,编写一个自定义箭头指针组件
javascript·uni-app·vue·html
诗书画唱9 小时前
解决HTML/JS开发中的常见问题与实用资源
前端·javascript·html
CODE_RabbitV11 小时前
【1分钟速通】 HTML快速入门
前端·html
小*-^-*九11 小时前
php 使用html 生成pdf word wkhtmltopdf 系列1
pdf·html·php
Zz_waiting.11 小时前
案例开发 - 日程管理 - 第七期
开发语言·前端·javascript·vue.js·html·路由
rannn_11120 小时前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
一朵梨花压海棠go21 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
空山新雨(大队长)21 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
元亓亓亓1 天前
JavaWeb--day1--HTML&CSS
前端·css·html
索迪迈科技1 天前
Flex布局——详解
前端·html·css3·html5