首页 前端知识 HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码

HTML5实现酷炫个人产品推广、工具推广、信息推广、个人主页、个人介绍、酷炫官网、门户网站模板源码

2024-05-07 13:05:54 前端知识 前端哥 456 428 我要收藏

 

1. 首先,创建一个HTML文件,例如`index.html`,并添加以下内容:

 

```html

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>酷炫个人推广模板</title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

    <header>

        <nav>

            <ul>

                <li><a href="#home">首页</a></li>

                <li><a href="#products">产品推广</a></li>

                <li><a href="#tools">工具推广</a></li>

                <li><a href="#info">信息推广</a></li>

                <li><a href="#about">关于我</a></li>

            </ul>

        </nav>

    </header>

    <main>

        <section id="home">

            <h1>欢迎来到我的酷炫个人推广模板</h1>

            <p>这里是一段简短的介绍...</p>

        </section>

        <section id="products">

            <h2>产品推广</h2>

            <p>这里是产品推广的内容...</p>

        </section>

        <section id="tools">

            <h2>工具推广</h2>

            <p>这里是工具推广的内容...</p>

        </section>

        <section id="info">

            <h2>信息推广</h2>

            <p>这里是信息推广的内容...</p>

        </section>

        <section id="about">

            <h2>关于我</h2>

            <p>这里是关于我的个人介绍...</p>

        </section>

    </main>

    <footer>

        <p>版权所有 &copy; 2022 酷炫个人推广模板</p>

    </footer>

</body>

</html>

```

 

2. 接下来,创建一个CSS文件,例如`styles.css`,并添加以下内容:

 

```css

body {

    font-family: Arial, sans-serif;

    line-height: 1.6;

}

 

header {

    background: #333;

    color: #fff;

    text-align: center;

    padding: 1rem;

}

 

nav ul {

    padding: 0;

    list-style: none;

}

 

nav ul li {

    display: inline;

    margin: 0 1rem;

}

 

nav ul li a {

    color: #fff;

    text-decoration: none;

}

 

main {

    padding: 2rem;

}

 

section {

    margin-bottom: 2rem;

}

 

footer {

    background: #333;

    color: #fff;

    text-align: center;

    padding: 1rem;

}

```

 

这个示例提供了一个简单的酷炫个人推广模板,你可以根据需要修改内容和样式。 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7253.html
标签
评论
发布的文章

Unity读取Json的几种方法

2024-05-12 17:05:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!