标签：css工作笔记
1.自适应页面中的注意点
2.有关页面嵌套
3.有关手机自适应页面
1.自适应页面中的注意点
CSS基本布局举例
左列固定，右边自适应
.Main{margin-left:200px; height:600px;}
#right{width:100%;float:right; height:100%;}
左右固定，中间自适应.Main{margin-left:200px;margin-right:300px; height:600px;}
#left{width:200px;margin-left:200px;float:left; height:100%;}#right{width:300px;margin-right:-300px;float:right; height:100%;}#middle{width:100%;float:left; height:100%;}
右固定，左边自适应.main{margin-right:300px; height:600px;}
#left{width:100%;float:left;background:#F69;height:100%height:100%;}
#right{margin-right:-300px;width:300px;float:right;background:#F3C; height:100%;}
多用padding，少用具体的高度值
2.有关页面嵌套
……
<li><a href="test1.html" target="showBox">测试1</a></li>
<li><a href="test2.html" target="showBox">测试2</a></li>
.menu{
width: 20%; height: 100%; border-right: 1px solid #ccc; float: left;box-sizing: border-box;
-moz-box-sizing: border-box; /*兼容性写法*/-webkit-box-sizing: border-box;
}.menu .adaption{ padding: 10px 10px; }
.showBox{ float: left; width: 80%; border: none; height: 100%;box-sizing: border-box;
-moz-box-sizing: border-box;-webkit-box-sizing: border-box;
}3.有关手机自适应页面
页面头部的写法不同于PC端页面的写法：
<!doctype html><html>
<head><meta charset="utf-8" />
<meta name = "viewport" content ="width=device-width,initial-scale=1.0,user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/basics.css"/>
<link rel="stylesheet" type="text/css" href="css/medioadaption.css"/>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<title>xxx</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>…
</html>
/*需注意先basic.css初始化，然后medioadaption.css，最后才是 index.css 的样式*/……
/*排版上的顺序是先link ，然后title , 最后script */ /*上面的meta内容是手机页面中需要用到的特定格式*/
本文出自 “旅行者唯一的等待” 博客，请务必保留此出处http://sunnyyeyuzhu.blog.51cto.com/6793234/1628957
标签：css工作笔记
原文地址：http://sunnyyeyuzhu.blog.51cto.com/6793234/1628957
