【ChatGPT】说做个模板能有多难交给我！

最新推荐文章于 2023-08-17 19:41:56 发布

半抹灯芯

最新推荐文章于 2023-08-17 19:41:56 发布

阅读量140

点赞数

分类专栏： ChatGPT 文章标签： Chat ChatGPT Powered by 金山文档

本文链接：https://blog.csdn.net/u012240615/article/details/129730968

版权

ChatGPT 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

我问ChatGPT：“做一个《时尚大气的门户网站》html模板要有幻灯片通栏广告最新新闻最新动态国内新闻国际新闻要够复杂页面内容要多主要颜色为蓝色代码太长的话分对此发给我 css、js单独文件”

非常感谢您的需求，我可以帮您提供一个基本的HTML模板，并将其分为HTML、CSS和JS文件。如下所示：

索引.html：

<!DOCTYPE html>
<html>
<head>
    <title>时尚大气的门户网站</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <header>
        <div class="logo">Logo</div>
        <nav>
            <ul>
                <li><a href="#">最新新闻</a></li>
                <li><a href="#">最新动态</a></li>
                <li><a href="#">国内新闻</a></li>
                <li><a href="#">国际新闻</a></li>
            </ul>
        </nav>
    </header>
    <section class="slider">
        <img src="images/slider1.jpg" alt="Slider Image">
        <img src="images/slider2.jpg" alt="Slider Image">
        <img src="images/slider3.jpg" alt="Slider Image">
    </section>
    <section class="ad">
        <img src="images/ad.jpg" alt="Advertisement">
    </section>
    <main>
        <section class="news">
            <h2>最新新闻</h2>
            <ul>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
            </ul>
        </section>
        <section class="updates">
            <h2>最新动态</h2>
            <ul>
                <li>
                    <a href="#">更新标题</a>
                    <p>更新内容</p>
                </li>
                <li>
                    <a href="#">更新标题</a>
                    <p>更新内容</p>
                </li>
                <li>
                    <a href="#">更新标题</a>
                    <p>更新内容</p>
                </li>
            </ul>
        </section>
        <section class="domestic-news">
            <h2>国内新闻</h2>
            <ul>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
            </ul>
        </section>
        <section class="international-news">
            <h2>国际新闻</h2>
            <ul>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
                <li>
                    <a href="#">新闻标题</a>
                    <p>新闻摘要</p>
                </li>
            </ul>
        </section>
    </main>
</body>
</html>

风格.css：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
}

header {
    background-color: #007bff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
}

.logo {
    font-size: 32px;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
}

nav li {
    margin-left: 30px;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

nav a:hover {
    border-bottom: 2px solid