基于HTML5和CSS3构建的个人网站源码分享——探索现代网页设计的魅力，html个人网页制作源代码

欧气 2024年11月16日 07:54 1 0

本文目录导读：

网站结构
HTML5代码
CSS3代码

随着互联网技术的飞速发展，HTML5和CSS3作为新一代的网页开发技术，已经成为了构建现代网站的主流工具，本文将为大家分享一个基于HTML5和CSS3的个人网站源码，并通过详细的分析，带领大家一起探索现代网页设计的魅力。

网站结构

以下是一个简单的个人网站结构，主要由以下几个部分组成：

基于HTML5和CSS3构建的个人网站源码分享——探索现代网页设计的魅力，html个人网页制作源代码

图片来源于网络，如有侵权联系删除

1、头部（Header）：包含网站的标志、导航栏和搜索框。

2、主体（Main）：展示网站的主要内容，如个人简介、技能展示、作品展示等。

3、底部（Footer）：包含版权信息、联系方式和友情链接等。

基于HTML5和CSS3构建的个人网站源码分享——探索现代网页设计的魅力，html个人网页制作源代码

图片来源于网络，如有侵权联系删除

HTML5代码

以下是网站头部、主体和底部的HTML5代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <div class="logo">
            <img src="images/logo.png" alt="网站标志">
        </div>
        <nav>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#works">作品</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
        <div class="search">
            <input type="text" placeholder="搜索...">
            <button>搜索</button>
        </div>
    </header>
    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>这里是我的个人简介...</p>
        </section>
        <section id="skills">
            <h2>技能</h2>
            <ul>
                <li>HTML5</li>
                <li>CSS3</li>
                <li>JavaScript</li>
                <li>Vue.js</li>
                <li>React.js</li>
            </ul>
        </section>
        <section id="works">
            <h2>作品</h2>
            <div class="work-item">
                <img src="images/work1.jpg" alt="作品1">
                <h3>作品1</h3>
                <p>这里是作品1的简介...</p>
            </div>
            <div class="work-item">
                <img src="images/work2.jpg" alt="作品2">
                <h3>作品2</h3>
                <p>这里是作品2的简介...</p>
            </div>
        </section>
        <section id="contact">
            <h2>联系</h2>
            <p>邮箱：example@example.com</p>
            <p>电话：1234567890</p>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2021 个人网站</p>
        <p>联系我：example@example.com</p>
    </footer>
</body>
</html>

CSS3代码

以下是网站样式的CSS3代码示例：

{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #333;
}
.logo img {
    width: 100px;
}
nav ul {
    list-style: none;
    display: flex;
}
nav ul li {
    margin-left: 20px;
}
nav ul li a {
    color: #fff;
    text-decoration: none;
}
.search {
    display: flex;
}
.search input {
    width: 200px;
    padding: 5px;
}
.search button {
    padding: 5px 10px;
    background-color: #555;
    color: #fff;
    border: none;
    cursor: pointer;
}
main {
    padding: 20px;
}
section {
    margin-bottom: 30px;
}
footer {
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: #fff;
}

通过以上HTML5和CSS3代码，我们可以构建一个具有现代感的个人网站，在实际开发过程中，我们可以根据需求添加更多功能，如响应式设计、动画效果等，希望本文能帮助大家更好地理解HTML5和CSS3，为构建自己的网站打下基础。

基于HTML5和CSS3构建的个人网站源码分享——探索现代网页设计的魅力，html个人网页制作源代码

图片来源于网络，如有侵权联系删除

标签： #html5和css3制作个人网站源码