36kr网站用什么做的选哪家好 免费工具推荐
36kr网站用什么做的选哪家好 免费工具推荐
模板网站太丑不够用，你是不是也遇到过这种尴尬？客户想要一个有质感、专业、能打的网站，结果随便找个模板，要么配色杂乱，要么交互生硬，根本没法看。这时候你就会想，36kr网站用什么做的？别人家的网站为什么看着顺眼，功能也强，而我的却像拼图一样？其实，36kr的网站用的是主流技术栈，但关键不在于技术，而在于设计规范和前端工程实现的细节把控。如果你也想找一款免费工具来帮助你快速搭建高质感网站，那这篇内容正好适合你。
设计原则：打造专业感从底层开始
做网站设计，首先要搞清楚几个核心设计原则，否则你永远做不出像36kr那样的网站。这些原则不是玄学，而是来自MDN Web Docs的实践推荐。
响应式优先
36kr网站用的是响应式设计，这意味着无论用户用手机、平板还是电脑，界面都能适配。响应式设计的核心是移动端优先，也就是先考虑手机端，再适配大屏。如果你没有这一步，网站在大屏上会显得局促，在手机端又会变得混乱。
一致性原则
一致性是所有优秀网站的共性。36kr的网站在图标、字体、间距、按钮样式上都高度统一。比如，所有的按钮都采用圆角设计、统一的字体粗细，以及颜色过渡平滑。如果你在项目中没有一套清晰的UI规范，最终的结果只会是：看起来像拼凑的。
信息层级清晰
36kr网站信息结构清晰，标题、副标题、正文等层级分明，用户一眼就能找到自己需要的信息。这个层级设计不是随便排版，而是基于用户的视觉路径来安排内容。你可以用F型布局，或者Z型布局，但一定要保证重点内容在用户视线范围内。
布局与间距规范：让网站“呼吸感”更强
布局和间距是影响网站质感的重要因素。很多人只关注颜色和字体，却忽视了页面的空间关系，这会导致网站显得拥挤或空洞。
水平与垂直间距
在36kr网站中，各个元素之间的间距控制得非常精准。比如，标题和正文之间有1.5倍的行高，段落之间用24px的间距，图片和文字之间也有明确的留白。这些数字不是随意设定的，而是基于人体工程学和阅读习惯。你可以参考MDN Web Docs上的推荐值，例如：
- 行高：1.5倍字体大小
- 段落间距：24px
- 按钮间距：16px
- 图片与文字间距：24px
布局结构
36kr网站采用网格布局（Grid Layout），这是一种非常灵活的布局方式，可以轻松实现多列对齐、响应式适配。如果你使用CSS Grid，记得设置gap属性，用来控制子元素之间的间距。
.container {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 24px;
}
上面这段代码会自动创建一个响应式网格布局，每列最小宽度250px，最大宽度100%，并且子元素之间有24px的间距。这种布局方式非常适合内容类网站，比如新闻、资讯类网站。
色彩与字体：让网站“有温度”
色彩和字体是网站视觉风格的核心。36kr网站整体风格偏现代、科技感，配色以深色为主，字体选择也很考究。如果你的网站配色杂乱，字体不统一，用户第一眼就会觉得“不够专业”。
配色方案
36kr的配色以深蓝、灰色为主，搭配少量的亮色高光，比如橙色或红色，用来突出重点内容。这种配色方案适合科技类、资讯类网站。你可以使用MDN Web Docs推荐的色彩系统，比如：
- 主色：#1E1E1E（深灰）
- 辅助色：#4A90E2（科技蓝）
- 高光色：#FF6B6B（红色）
- 背景色：#F5F5F5（浅灰）
这些颜色搭配起来，既能保证视觉清晰度，又不会显得单调。
字体选择
36kr网站的字体选择也很讲究，标题使用Roboto，正文使用Open Sans。这两款字体都是现代、易读性高的字体，非常适合内容类网站。你可以通过Google Fonts免费使用这些字体。
<link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap" rel="stylesheet">
body {font-family: 'Open Sans', sans-serif;
}h1, h2, h3 {font-family: 'Roboto', sans-serif;
}
组件设计：打造可复用的UI模块
36kr网站的组件设计非常讲究，每个组件都有明确的样式和功能，而且可以被复用。比如，按钮、卡片、导航栏、输入框等组件，都遵循统一的设计规范。
按钮组件
36kr网站的按钮采用圆角设计，颜色统一，交互状态明确。你可以使用以下代码实现一个标准的按钮组件：
.button {padding: 12px 24px;border: none;border-radius: 8px;font-size: 16px;cursor: pointer;transition: background-color 0.3s ease;
}.button.primary {background-color: #4A90E2;color: #fff;
}.button.primary:hover {background-color: #3572B6;
}
卡片组件
卡片组件是内容展示的核心，36kr网站的卡片布局清晰，图文比例合理。你可以使用以下代码实现一个卡片组件：
.card {background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);padding: 24px;margin-bottom: 24px;
}.card img {width: 100%;border-radius: 4px;margin-bottom: 16px;
}
前端实现：代码才是硬道理
36kr网站用的是主流前端技术栈，比如HTML5、CSS3、JavaScript，以及现代框架如React或Vue。如果你用的是免费工具，那推荐你用WordPress + Elementor，或者Webflow，这两个工具都支持快速搭建高质感网站，而且无需写太多代码。
基础HTML结构
以下是一个简单的HTML结构，适合用来搭建一个基础网站：
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>36kr风格网站</title><link href="https://fonts.googleapis.com/css2?family=Roboto&family=Open+Sans&display=swap" rel="stylesheet"><style>body {font-family: 'Open Sans', sans-serif;margin: 0;padding: 0;}header {background-color: #1E1E1E;color: #fff;padding: 24px;text-align: center;}.container {max-width: 1200px;margin: 0 auto;padding: 24px;}.card {background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);padding: 24px;margin-bottom: 24px;}.card img {width: 100%;border-radius: 4px;margin-bottom: 16px;}.button {padding: 12px 24px;border: none;border-radius: 8px;font-size: 16px;cursor: pointer;transition: background-color 0.3s ease;}.button.primary {background-color: #4A90E2;color: #fff;}.button.primary:hover {background-color: #3572B6;}</style>
</head>
<body><header><h1>36kr风格网站</h1></header><div class="container"><div class="card"><img src="https://example.com/image1.jpg" alt="示例图片"><p>这是卡片内容，使用了统一的样式和布局，符合36kr的设计风格。</p><button class="button primary">了解更多</button></div><div class="card"><img src="https://example.com/image2.jpg" alt="示例图片"><p>这是另一张卡片，样式与上一张一致，便于复用和维护。</p><button class="button primary">了解更多</button></div></div>
</body>
</html>
这段代码可以快速搭建一个基础的网站页面，如果你使用免费工具如Webflow或WordPress，可以直接套用这种结构，节省大量的开发时间。