当前位置：首页 > CSS

css制作腾讯网站

2026-02-12 16:10:45CSS

腾讯网站CSS设计要点

腾讯网站设计风格以简洁、现代、科技感为主，色彩以蓝色为主色调，搭配白色背景。整体布局注重信息层级和用户体验，导航清晰，模块划分明确。

主色调与配色方案

腾讯品牌色为蓝色（#006EFF），常用于导航栏、按钮和重要元素。辅助色包括灰色（#F5F5F5用于背景）、深灰（#333333用于文字）和浅蓝（#E6F2FF用于高亮区域）。

:root {
  --tencent-blue: #006EFF;
  --background-gray: #F5F5F5;
  --text-dark: #333333;
  --highlight-blue: #E6F2FF;
}

导航栏设计

导航栏固定在顶部，高度约60px，包含Logo、主导航菜单和用户登录入口。使用flex布局实现水平排列，菜单项间距均匀。

css制作腾讯网站

.navbar {
  height: 60px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  padding: 0 5%;
}

.nav-menu {
  display: flex;
  gap: 30px;
}

.nav-item {
  color: var(--text-dark);
  font-weight: 500;
}

.nav-item:hover {
  color: var(--tencent-blue);
}

主体内容布局

采用响应式栅格系统，主要内容区域宽度限制为1200px，两侧留白。模块间用卡片式设计，增加阴影和圆角提升层次感。

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

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  padding: 20px;
  margin-bottom: 20px;
}

按钮样式

按钮使用腾讯蓝作为主色，圆角设计，hover状态颜色加深。重要按钮添加渐变效果增强视觉吸引力。

css制作腾讯网站

.btn {
  background-color: var(--tencent-blue);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn:hover {
  background-color: #0058CC;
}

.btn-primary {
  background: linear-gradient(90deg, #006EFF, #00A0FF);
}

响应式设计

通过媒体查询实现不同屏幕尺寸适配，移动端导航改为汉堡菜单，内容模块堆叠排列。

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .card {
    width: 100%;
  }
}

动画效果

适当添加微交互提升用户体验，如图标悬停旋转、按钮点击反馈等。使用CSS transition实现平滑过渡。

.icon {
  transition: transform 0.3s;
}

.icon:hover {
  transform: rotate(15deg);
}

.btn:active {
  transform: scale(0.98);
}

字体规范

使用系统默认无衬线字体，英文优先Helvetica，中文优先PingFang SC。标题字号较大，正文14-16px。

body {
  font-family: "Helvetica Neue", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1 {
  font-size: 28px;
  font-weight: 600;
}

h2 {
  font-size: 22px;
  font-weight: 500;
}