爱奇艺模仿网站源码，仿爱奇艺网站源码下载

欧气 2025年03月14日 06:45 1 0

爱奇艺作为国内领先的在线视频平台之一,其网页设计简洁而富有现代感，用户体验极佳，以下将详细解析如何通过HTML和CSS实现类似的设计效果。

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

HTML结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>爱奇艺模仿网站</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="logo">爱奇艺模仿网站</div>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">电影</a></li>
                <li><a href="#">电视剧</a></li>
                <li><a href="#">综艺</a></li>
                <li><a href="#">动漫</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="banner">
            <!-- Banner content -->
        </section>
        <section class="content">
            <h1>Welcome to Our Website</h1>
            <p>本站致力于为您提供最优质、最丰富的影视资源，无论是热门大片还是经典剧集，我们都为您精心挑选。</p>
            <p>我们的团队由一群热爱电影的年轻人组成，我们相信每个人心中都有一部属于自己的电影，让我们共同寻找那份感动吧！</p>
            <p>您可以轻松找到您喜欢的影片，享受高清画质带来的视觉盛宴。</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 爱奇艺模仿网站. All rights reserved.</p>
    </footer>
</body>
</html>

CSS样式

/* styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}
header {
    background-color: #2c3e50;
    color: white;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo {
    font-size: 24px;
}
nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
}
nav li {
    margin-right: 20px;
}
nav a {
    color: white;
    text-decoration: none;
}
.banner {
    background-image: url('banner.jpg');
    height: 300px;
    background-size: cover;
    background-position: center;
}
.content {
    padding: 40px;
    text-align: center;
}
.content h1 {
    font-size: 36px;
    margin-bottom: 20px;
}
.content p {
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 20px;
}
footer {
    background-color: #34495e;
    color: white;
    text-align: center;
    padding: 10px 0;
}