<!DOCTYPE html>
<html>
<head>
<title>××××</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<!--适配手机屏幕-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
<!--导入外部JQuery-->
<script src="js/jquery-1.11.1.min.js"></script>
<style type="text/css">
*{padding:0px;margin:0px;}
html,body{width:100%;font-size:14px;font-family:微软雅黑,sans-serif;background-color: #f5f5f5;}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
下面详细说明一下：
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
meta标签是元素可提供有关页面的元信息，这个标签内容很多，有兴趣请自行百度。
http-equiv属性把 content 属性关联到 HTTP 头部。我的理解是：告诉浏览器如何去显示页面，比如这个东西是html或者text类型的，应该用utf-8的格式进行编码。
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
这句话经常能看到，因为这句话使得你的页面能大致的适配手机屏幕，但这不是真正的响应式，你会发现这样写起来很难受，需要不断的调试，而且在手机上显示的效果并不好。
viewport属性是我们要页面展示的大小，这里我们设置页面的宽度就是设备的宽度，后面几句话是固定页面，不允许用户手动缩放，最大和最小都固定了。
*{padding:0px;margin:0px;}
html,body{width:100%;font-size:14px;font-family:微软雅黑,sans-serif;background-color: #f5f5f5;}
我css通常开头这么写，先用通配符*将所有的标签的padding和margin消除，这样写感觉页面更能受控制，具体的位置也可以大概才想得到，第一个div永远会顶在页面左上角。页面的会设置统一的14px的微软雅黑,sans-serif风格的字体，统一设置背景。
扫一扫
2888
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
