AI DeepSeek
很强大啊
 
<!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> 
* { 
margin: 0; 
padding: 0; 
box-sizing: border-box; 
font-family: "Microsoft YaHei", sans-serif; 
} 
 
/* 导航栏 */ 
.navbar { 
background: #0078d7; 
padding: 12px 20px; 
display: flex; 
align-items: center; 
position: fixed; 
width: 100%; 
top: 0; 
z-index: 100; 
} 
 
.logo { 
width: 120px; 
margin-right: 40px; 
} 
 
.nav-links { 
display: flex; 
gap: 30px; 
} 
 
.nav-links a { 
color: white; 
text-decoration: none; 
font-size: 16px; 
} 
 
.user-section { 
margin-left: auto; 
display: flex; 
gap: 20px; 
} 
 
/* 轮播图 */ 
.carousel { 
margin-top: 60px; 
height: 400px; 
background: #f0f0f0; 
position: relative; 
} 
 
.carousel img { 
width: 100%; 
height: 100%; 
object-fit: cover; 
} 
 
.carousel-indicators { 
position: absolute; 
bottom: 20px; 
left: 50%; 
transform: translateX(-50%); 
display: flex; 
gap: 10px; 
} 
 
.indicator { 
width: 12px; 
height: 12px; 
border-radius: 50%; 
background: rgba(255,255,255,0.5); 
} 
 
/* 内容分类 */ 
.categories { 
padding: 40px 20px; 
max-width: 1200px; 
margin: 0 auto; 
} 
 
.category-grid { 
display: grid; 
grid-template-columns: repeat(6, 1fr); 
gap: 30px; 
} 
 
.category-card { 
text-align: center; 
padding: 20px; 
border-radius: 8px; 
background: white; 
box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
} 
 
.category-icon { 
font-size: 32px; 
margin-bottom: 10px; 
} 
 
/* 推荐内容 */ 
.recommendations { 
padding: 20px; 
max-width: 1200px; 
margin: 0 auto; 
} 
 
.recommendation-list { 
display: flex; 
gap: 20px; 
overflow-x: auto; 
padding: 10px 0; 
} 
 
.recommend-item { 
flex: 0 0 280px; 
background: white; 
border-radius: 8px; 
overflow: hidden; 
box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
} 
 
.recommend-thumbnail { 
height: 160px; 
background: #f0f0f0; 
} 
 
.recommend-info { 
padding: 15px; 
} 
 
/* 页脚 */ 
.footer { 
background: #333; 
color: white; 
padding: 40px 20px; 
text-align: center; 
margin-top: 60px; 
} 
</style> 
<!-- 引入图标库 --> 
</head> 
<body> 
<!-- 导航栏 --> 
<nav class="navbar"> 
<img src="logo-placeholder.png" alt="Logo" class="logo"> 
<div class="nav-links"> 
<a href="#">首页</a> 
<a href="#">频道</a> 
<a href="#">直播</a> 
<a href="#">会员</a> 
</div> 
<div class="user-section"> 
<a href="#" style="color: white">登录</a> 
<a href="#" style="color: white">注册</a> 
</div> 
</nav> 
 
<!-- 轮播图 --> 
<div class="carousel"> 
<img src="banner-placeholder.jpg" alt="轮播图"> 
<div class="carousel-indicators"> 
<div class="indicator"></div> 
<div class="indicator"></div> 
<div class="indicator"></div> 
</div> 
</div> 
 
<!-- 内容分类 --> 
<section class="categories"> 
<div class="category-grid"> 
<div class="category-card"> 
<i class="fas fa-video category-icon" style="color: #0078d7"></i> 
<h3>视频</h3> 
</div> 
<div class="category-card"> 
<i class="fas fa-broadcast-tower category-icon" style="color: #ff6b6b"></i> 
<h3>直播</h3> 
</div> 
<!-- 更多分类... --> 
</div> 
</section> 
 
<!-- 推荐内容 --> 
<section class="recommendations"> 
<h2>热门推荐</h2> 
<div class="recommendation-list"> 
<div class="recommend-item"> 
<div class="recommend-thumbnail"></div> 
<div class="recommend-info"> 
<h4>热门剧集推荐</h4> 
<p>最新上线精品剧集</p> 
</div> 
</div> 
<!-- 更多推荐项... --> 
</div> 
</section> 
 
<!-- 页脚 --> 
<footer class="footer"> 
<p>© 2023 腾讯公司 版权所有</p> 
<div class="footer-links"> 
<a href="#">关于我们</a> |  
<a href="#">用户协议</a> |  
<a href="#">隐私政策</a> 
</div> 
</footer> 
</body> 
</html> 
2025-02-13
浏览1335
登录后评论
2
分享