css制作腾讯首页
布局结构分析
腾讯首页采用经典的顶部导航+主体内容+底部信息的结构。顶部包含Logo、导航栏和登录入口，主体分为新闻资讯、视频、广告位等模块，底部为版权信息和链接。
基础HTML结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>腾讯首页</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="top-nav">
<div class="logo">腾讯网</div>
<nav class="main-nav">
<a href="#">新闻</a>
<a href="#">视频</a>
<a href="#">体育</a>
</nav>
<div class="user-login">登录</div>
</header>
<main class="content">
<section class="news-feed">...</section>
<section class="video-section">...</section>
</main>
<footer class="footer">...</footer>
</body>
</html>CSS核心样式
/* 全局样式 */
body {
font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
margin: 0;
color: #333;
}
/* 顶部导航栏 */
.top-nav {
display: flex;
align-items: center;
height: 60px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
padding: 0 15%;
}
.logo {
font-size: 24px;
font-weight: bold;
color: #0066CC;
}
.main-nav {
flex-grow: 1;
display: flex;
gap: 30px;
margin-left: 40px;
}
.main-nav a {
text-decoration: none;
color: #222;
}
/* 主体内容区 */
.content {
width: 70%;
margin: 20px auto;
display: grid;
grid-template-columns: 2fr 1fr;
gap: 20px;
}
.news-feed {
background: #f9f9f9;
padding: 15px;
}
.video-section {
background: #f0f0f0;
}
/* 响应式处理 */
@media (max-width: 768px) {
.content {
grid-template-columns: 1fr;
}
}交互效果实现
悬浮导航高亮效果：
.main-nav a:hover {
color: #0066CC;
border-bottom: 2px solid #0066CC;
}卡片悬浮动画：
.news-card {
transition: transform 0.3s;
}
.news-card:hover {
transform: translateY(-5px);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}视觉细节优化
使用腾讯品牌色系：
:root {
--tencent-blue: #0066CC;
--tencent-gray: #F5F5F5;
}图标字体引入：
@import url('//at.alicdn.com/t/font_1234567_x.css');
.icon {
font-family: "iconfont" !important;
}
