超详细超实用！！！AI编程之cursor编写一个官网（二）

news2024/12/22 20:35:53

云风网
云风笔记
云风知识库

一、新建html文件

选中添加index.html,输入编写官网要求，自动生成代码，先来个简单的。

在这里插入图片描述

<!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: #f0f0f0; /* 添加背景色 */
        }
        nav {
            background-color: #333;
            padding: 10px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0; /* 添加 margin: 0 */
        }
        nav ul li {
            display: inline;
            margin-right: 20px;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
        }
        main {
            padding: 20px; /* 添加内边距 */
        }
        h1 {
            color: #333; /* 添加标题颜色 */
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home">首页</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#services">服务</a></li>
                <li><a href="#contact">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home">
            <h1>欢迎来到我的官方网站</h1>
            <p>这里是网站的主要内容区域。如果您能看到这段文字，说明页面已正确加载。</p>
        </section>
        <!-- 其他部分可以根据需要添加 -->
    </main>

    <footer>
        <p>&copy; 2023 我的官方网站。保留所有权利。</p>
    </footer>
</body>
</html>

二、运行index.html

目前生成基本页面，点击菜单路由切换，但是内容不变，继续改造。
在这里插入图片描述

三、点击菜单显示不同内容

自动创建index.js,并编写代码

在这里插入图片描述
在这里插入图片描述

index.html 代码如下：

<!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: #f0f0f0;
        }
        nav {
            background-color: #333;
            padding: 10px;
        }
        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: flex;
            justify-content: space-around;
        }
        nav ul li {
            position: relative;
        }
        nav ul li a {
            color: white;
            text-decoration: none;
            padding: 10px 15px;
            display: block;
            transition: all 0.3s ease;
        }
        nav ul li a:hover,
        nav ul li a.active {
            background-color: #555;
            color: #ffd700;
        }
        nav ul li a::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #ffd700;
            transition: width 0.3s ease;
        }
        nav ul li a:hover::after,
        nav ul li a.active::after {
            width: 100%;
        }
        main {
            padding: 20px;
        }
        h1 {
            color: #333;
        }
        .content-section {
            display: none;
        }
        .content-section.active {
            display: block;
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#home" class="nav-link active">首页</a></li>
                <li><a href="#about" class="nav-link">关于我们</a></li>
                <li><a href="#services" class="nav-link">服务</a></li>
                <li><a href="#contact" class="nav-link">联系我们</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="home" class="content-section active">
            <h1>欢迎来到我的官方网站</h1>
            <p>这里是网站的主页内容。我们提供优质的服务和产品。</p>
        </section>
        <section id="about" class="content-section">
            <h1>关于我们</h1>
            <p>我们是一家致力于创新和卓越的公司，拥有多年的行业经验。</p>
        </section>
        <section id="services" class="content-section">
            <h1>我们的服务</h1>
            <ul>
                <li>网站开发</li>
                <li>移动应用程序开发</li>
                <li>UI/UX 设计</li>
                <li>数字营销</li>
            </ul>
        </section>
        <section id="contact" class="content-section">
            <h1>联系我们</h1>
            <p>电话：123-456-7890</p>
            <p>邮箱：info@example.com</p>
            <p>地址：中国北京市朝阳区123号</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2023 我的官方网站。保留所有权利。</p>
    </footer>

    <script src="index.js"></script>
</body>
</html>

index.js内容如下：

document.addEventListener('DOMContentLoaded', function() {
    const navLinks = document.querySelectorAll('.nav-link');
    const contentSections = document.querySelectorAll('.content-section');

    navLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);

            // 移除所有导航链接的 active 类
            navLinks.forEach(navLink => {
                navLink.classList.remove('active');
            });

            // 为当前点击的链接添加 active 类
            this.classList.add('active');

            contentSections.forEach(section => {
                if (section.id === targetId) {
                    section.classList.add('active');
                } else {
                    section.classList.remove('active');
                }
            });
        });
    });
});

再次运行index.html

在这里插入图片描述
在这里插入图片描述

四、优化菜单样式，兼容移动端

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

五、优化底部

在这里插入图片描述

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f0f0f0;
}

nav {
    background-color: #333;
    padding: 10px 0;
}

.nav-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

nav ul li {
    position: relative;
    margin: 0 10px;
}

nav ul li a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: block;
    transition: all 0.3s ease;
}

nav ul li a:hover,
nav ul li a.active {
    background-color: #555;
    color: #ffd700;
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #ffd700;
    transition: width 0.3s ease;
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%;
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    overflow-y: auto;
}

h1 {
    color: #333;
}

.content-section {
    display: none;
}

.content-section.active {
    display: block;
}

@media (max-width: 600px) {
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li {
        margin: 5px 0;
    }
    nav ul li a {
        padding: 10px 20px;
    }
}

/* 保留之前的样式，并在文件末尾添加以下内容 */

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    overflow-y: auto;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
    width: 100%;
}

/* 修改现有的 main 样式 */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    flex: 1;
    overflow-y: auto;
}

/* 添加滚动条样式（可选） */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

在这里插入图片描述

这样一个简单的官网结构就出来了，后续根据个人需求进行改进，全程没有写过一行代码，配置提示要求即可

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2157751.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WPS2019 数据透视表多列数据如何显示同一行

WPS2019 数据透视表多列数据如何显示同一行

在excel表格中&#xff0c;只有行筛选&#xff0c;没有列筛选功能&#xff0c;当我们需要只选取某些列的数据时&#xff0c;使用数据透视表是个可行的方法&#xff0c;但默认生成的数据透视表可观性较差。要如何才能使得数据透视表格式与原来数据格式一样美观易看呢&#xff1f…
阅读更多...
Leetcode990.等式方程的可满足性

Leetcode990.等式方程的可满足性

题目 原题链接 等式方程的可满足性 思路 定义一个长度为26&#xff08;变量为小写字母&#xff09;的数组充当并查集&#xff0c;并将数组中的元素初始化为 -1判断“”并合并元素&#xff0c;将相等的放在一个集合中判断“!”&#xff1b;不等的如果在一个集合中&#xff0c;则…
阅读更多...
【Linux】指令和权限的这些细节，你确定都清楚吗？

【Linux】指令和权限的这些细节，你确定都清楚吗？

&#x1f680;个人主页&#xff1a;奋斗的小羊 &#x1f680;所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 前言&#x1f4a5;一、Linux基本指令&#x1f4a5;1.1 mv 指令&#x1f4a5;1.2 cat 指令&#x1f4a5;…
阅读更多...
webLogic反序列化漏洞CVE-2017-3506

webLogic反序列化漏洞CVE-2017-3506

1.环境搭建 cd vulhub-master/weblogic/weak_password docker-compose up -d 2.判断wls-wsat组件是否存在 拼接/wls-wsat/CoordinatorPortType 查看页面是否有回显 有回显说明存在组件 3.在当前页面抓包 反弹shell 添加请求包内容 <soapenv:Envelope xmlns:soapenv&q…
阅读更多...
hCaptcha 图像识别 API 对接说明

hCaptcha 图像识别 API 对接说明

hCaptcha 图像识别 API 对接说明 本文将介绍一种 hCaptcha 图像识别 API 对接说明&#xff0c;它可以通过用户输入识别的内容和 hCaptcha验证码图像&#xff0c;最后返回需要点击的小图像的坐标&#xff0c;完成验证。 接下来介绍下 hCaptcha 图像识别 API 的对接说明。 注册…
阅读更多...
线程的状态及join()插队方法

线程的状态及join()插队方法

一、线程的状态 线程整个生命周期中有6种状态&#xff0c;分别为 NEW 新建状态 、RUNNABLE 可运行状态、TERMINATED 终止状态、TIMED_WAITING计时等待状态、WAITING 等待状态、BLOCKED 阻塞状态 线程各个状态之间的转换&#xff1a; 在 JAVA 程序中&#xff0c;一个线程对象通过…
阅读更多...
一文搞懂offset、client、scroll系列及案例

一文搞懂offset、client、scroll系列及案例

目录 一、offset 1-1、offset系列属性 1-2、offset与style区别 1-3、案例 1-3-1、计算鼠标在盒子内的坐标 1-3-2、拖动模态框 二、client 2-1、client系列属性 三、scroll 3-1、scroll系列属性 3-2、案例 3-2-1、滚动页面一定距离后固定侧边栏 一、offset offset是…
阅读更多...
pg入门3—详解tablespaces—下

pg入门3—详解tablespaces—下

pg默认的tablespace的location为空&#xff0c;那么如果表设置了默认的tablespace&#xff0c;数据实际上是存哪个目录的呢? 在 PostgreSQL 中&#xff0c;如果你创建了一个表并且没有显式指定表空间&#xff08;tablespace&#xff09;&#xff0c;或者表空间的 location 为…
阅读更多...
数据库数据恢复—SQL Server附加数据库出现“错误823”怎么恢复数据？

数据库数据恢复—SQL Server附加数据库出现“错误823”怎么恢复数据？

SQL Server数据库故障&#xff1a; SQL Server附加数据库出现错误823&#xff0c;附加数据库失败。数据库没有备份&#xff0c;无法通过备份恢复数据库。 SQL Server数据库出现823错误的可能原因有&#xff1a;数据库物理页面损坏、数据库物理页面校验值损坏导致无法识别该页面…
阅读更多...
【靶点Talk】免疫检查点争夺战：TIGIT能否超越PD-1？

【靶点Talk】免疫检查点争夺战：TIGIT能否超越PD-1？

曾经的TIGIT靶点顶着“下一个PD-1”的名号横空出世&#xff0c;三年的“征程”中TIGIT走过一次又一次的失败&#xff0c;然而面对质疑和压力仍有一批公司选择前行。今天给大家分享TIGIT靶点的相关内容&#xff0c;更多靶点科普视频请关注义翘神州B站和知乎官方账号。 TIGIT的“…
阅读更多...
C#和数据库高级：虚方法

C#和数据库高级：虚方法

文章目录 一、抽象方法和抽象类中的思考1.1、回顾抽象方法的特点1.2、针对抽象方法问题的引出 二、虚方法的使用步骤2.1、虚方法重写方法的调用2.2、系统自带的虚方法2.3、重写Equals方法2.4、虚方法和抽象方法的比较 三、虚方法和抽象方法的联系3.1、ToString()方法的应用 一、…
阅读更多...
2024/9/23 leetcode 25题 k个一组翻转链表

2024/9/23 leetcode 25题 k个一组翻转链表

目录 25.k个一组翻转链表 题目描述 题目链接 解题思路与代码 25.k个一组翻转链表 题目描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的…
阅读更多...
Gartner：中国企业利用GenAI提高生产力的三大策略

Gartner：中国企业利用GenAI提高生产力的三大策略

作者&#xff1a;Gartner高级首席分析师 雷丝、Gartner 研究总监 闫斌、Gartner高级研究总监 张桐 随着生成式人工智能&#xff08;GenAI&#xff09;风靡全球&#xff0c;大多数企业都希望利用人工智能&#xff08;AI&#xff09;技术进行创新&#xff0c;以收获更多的业务成果…
阅读更多...
JS 历史简介

JS 历史简介

目录 1. JS 历史简介 2. JS 技术特征 1. JS 历史简介 举例&#xff1a;在提交用户的注册信息的时候&#xff0c;为避免注册出现错误后重新填写信息&#xff0c;可以在写完一栏信息后进行校验&#xff0c;并提示是否出现错误&#xff0c;这样会大大提高用户提交的成功率&…
阅读更多...
PCL 随机下采样

PCL 随机下采样

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接&#xff1a; PCL点云算法与项目实战案例汇总&#xff08;长期更新&#xff09; 一、概述 随机下采样 是一种常用的点…
阅读更多...
大模型LLM对话模拟器Dialogue Simulator Visualization可视化工具

大模型LLM对话模拟器Dialogue Simulator Visualization可视化工具

伴随着生成式人工智能技术发展&#xff0c;进2年涌现出大语言模型LLM/Agent系统/AI推理等众多方向的技术项目和论文。其中对话系统&#xff0c;智能体交互是用户通过UX界面和AI系统进行交互&#xff0c;这种交互有时候也是多模态&#xff08;用户输入文字/语音/图像&#xff09…
阅读更多...
众数信科 AI智能体智慧办公解决方案——众数办公AI

众数信科 AI智能体智慧办公解决方案——众数办公AI

智慧办公解决方案 众数办公AI 智能问答 拥有广域知识库 结合AI交互能力 通过智能人机、多轮对话即可完成 信息检索、知识提炼、内容衍生等问答操作 为用户提供多样化的问答服务 PPT创作 支持用户明确计划创作内容后进行需求提交 即刻智能生成符合需求的文章 支持上百种…
阅读更多...
【软件工程】验证软件需求

【软件工程】验证软件需求

一、验证需求正确性的四个方面 二、验证软件需求的方法 三、用于需求分析的软件工具 小结 例题 判断题
阅读更多...
Java/Spring项目的包开头为什么是com？

Java/Spring项目的包开头为什么是com？

Java/Spring项目的包开头为什么是com&#xff1f; 下面是一个使用Maven构建的项目初始结构 src/main/java/ --> Java 源代码com.example/ --->为什么这里是com开头resources/ --> 资源文件 (配置、静态文件等)test/java/ --> 测试代码resourc…
阅读更多...
【机器学习】揭秘GBDT：梯度提升决策树

【机器学习】揭秘GBDT：梯度提升决策树

目录 &#x1f354; 提升树 &#x1f354; 梯度提升树 &#x1f354; 举例介绍 3.1 初始化弱学习器&#xff08;CART树&#xff09; 3.2 构建第一个弱学习器&#xff08;CART树&#xff09; 3.3 构建第二个弱学习器&#xff08;CART树&#xff09; 3.4 构建第三个弱学习…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023