腾讯新闻中心的首页改版啦,欢迎访问【http://news.qq.com】。我是负责这次改版的前端开发工程师,今天也从前端的角度分析一下改版的过程和效果。
我们先来看看改版前后的首屏效果:
从对比图上来看,主要有以下的变化:
- 样式更加简洁,删除不必要的CSS装饰
- 删除额外的新闻介绍,更加突出新闻的标题
- 页面趋于扁平化
1. 网页属性和头部信息
我们来看看两个页面中头部信息的设置
旧页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
新页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit" />