①index.html文件的内容为：
<!DOCTYPE html>
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>运营商后台管理系统</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet" href="../plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
<script src="../plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="../plugins/adminLTE/js/app.min.js"></script>
<script type="text/javascript">
function SetIFrameHeight(){
var iframeid=document.getElementById("iframe"); //iframe id
if (document.getElementById){
iframeid.height =document.documentElement.clientHeight;
}
}
</script>
<script type="text/javascript" src="../plugins/angularjs/angular.min.js"></script>
<!-- 有base_pagination.js和base.js两个基础controller，用不需要分页的controller，即base.js -->
<script type="text/javascript" src="../js/base.js"></script>
<script type="text/javascript" src="../js/service/loginService.js"></script>
<script type="text/javascript" src="../js/controller/indexController.js"></script>
</head>
<body class="hold-transition skin-green sidebar-mini"
ng-app="pinyougou" ng-controller="indexController" ng-init="showLoginName()">
<div class="wrapper">
<!-- 页面头部 -->
<header class="main-header">
<!-- Logo -->
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>品优购</b></span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>品优购-运营商后台</b></span>
</a>
<!-- Header Navbar: style can be found in header.less -->
<nav class="navbar navbar-static-top">
<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
<span class="sr-only">Toggle navigation</span>
</a>
<div class="navbar-custom-menu">
<ul class="nav navbar-nav">
<!-- Messages: style can be found in dropdown.less-->
<li class="dropdown messages-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-envelope-o"></i>
<span class="label label-success">4</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有4个邮件</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<!-- start message -->
<a href="#">
<div class="pull-left">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<h4>
系统消息
<small><i class="fa fa-clock-o"></i> 5 分钟前</small>
</h4>
<p>欢迎登录系统?</p>
</a>
</li>
<!-- end message -->
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
团队消息
<small><i class="fa fa-clock-o"></i> 2 小时前</small>
</h4>
<p>你有新的任务了</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Developers
<small><i class="fa fa-clock-o"></i> Today</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user3-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Sales Department
<small><i class="fa fa-clock-o"></i> Yesterday</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
<li>
<a href="#">
<div class="pull-left">
<img src="../img/user4-128x128.jpg" class="img-circle" alt="User Image">
</div>
<h4>
Reviewers
<small><i class="fa fa-clock-o"></i> 2 days</small>
</h4>
<p>Why not buy a new awesome theme?</p>
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">See All Messages</a></li>
</ul>
</li>
<!-- Notifications: style can be found in dropdown.less -->
<li class="dropdown notifications-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-bell-o"></i>
<span class="label label-warning">10</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有10个新消息</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<a href="#">
<i class="fa fa-users text-aqua"></i> 5 new members joined today
</a>
</li>
<li>
<a href="#">
<i class="fa fa-warning text-yellow"></i> Very long description here that may not fit into the page and may cause design problems
</a>
</li>
<li>
<a href="#">
<i class="fa fa-users text-red"></i> 5 new members joined
</a>
</li>
<li>
<a href="#">
<i class="fa fa-shopping-cart text-green"></i> 25 sales made
</a>
</li>
<li>
<a href="#">
<i class="fa fa-user text-red"></i> You changed your username
</a>
</li>
</ul>
</li>
<li class="footer"><a href="#">View all</a></li>
</ul>
</li>
<!-- Tasks: style can be found in dropdown.less -->
<li class="dropdown tasks-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-flag-o"></i>
<span class="label label-danger">9</span>
</a>
<ul class="dropdown-menu">
<li class="header">你有9个新任务</li>
<li>
<!-- inner menu: contains the actual data -->
<ul class="menu">
<li>
<!-- Task item -->
<a href="#">
<h3>
Design some buttons
<small class="pull-right">20%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-aqua" style="width: 20%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">20% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li>
<!-- Task item -->
<a href="#">
<h3>
Create a nice theme
<small class="pull-right">40%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-green" style="width: 40%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">40% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li>
<!-- Task item -->
<a href="#">
<h3>
Some task I need to do
<small class="pull-right">60%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-red" style="width: 60%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">60% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
<li>
<!-- Task item -->
<a href="#">
<h3>
Make beautiful transitions
<small class="pull-right">80%</small>
</h3>
<div class="progress xs">
<div class="progress-bar progress-bar-yellow" style="width: 80%" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100">
<span class="sr-only">80% Complete</span>
</div>
</div>
</a>
</li>
<!-- end task item -->
</ul>
</li>
<li class="footer">
<a href="#">View all tasks</a>
</li>
</ul>
</li>
<!-- User Account: style can be found in dropdown.less -->
<li class="dropdown user user-menu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="../img/user2-160x160.jpg" class="user-image" alt="User Image">
<span class="hidden-xs">{{loginName}}</span>
</a>
<ul class="dropdown-menu">
<!-- User image -->
<li class="user-header">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
<p>
{{loginName}}
<small>最后登录 11:20AM</small>
</p>
</li>
<!-- Menu Footer-->
<li class="user-footer">
<div class="pull-left">
<a href="#" class="btn btn-default btn-flat">修改密码</a>
</div>
<div class="pull-right">
<a href="../logout" class="btn btn-default btn-flat">注销</a>
</div>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</header>
<!-- 页面头部 /-->
<!-- 导航侧栏 -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img src="../img/user2-160x160.jpg" class="img-circle" alt="User Image">
</div>
<div class="pull-left info">
<p> {{loginName}}</p>
<a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
</div>
</div>
<!-- /.search form -->
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu" >
<li class="header">菜单</li>
<li id="admin-index"><a href="index.html"><i class="fa fa-dashboard"></i> <span>首页</span></a></li>
<!-- 菜单 -->
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i>
<span>商家管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="seller_1.html" target="iframe">
<i class="fa fa-circle-o"></i>商家审核
</a>
</li>
<li id="admin-login">
<a href="seller.html" target="iframe">
<i class="fa fa-circle-o"></i>商家管理
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i>
<span>商品管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="brand.html" target="iframe">
<i class="fa fa-circle-o"></i>品牌管理
</a>
</li>
<li id="admin-login">
<a href="specification.html" target="iframe">
<i class="fa fa-circle-o"></i>规格管理
</a>
</li>
<li id="admin-login">
<a href="type_template.html" target="iframe">
<i class="fa fa-circle-o"></i>模板管理
</a>
</li>
<li id="admin-login">
<a href="item_cat.html" target="iframe">
<i class="fa fa-circle-o"></i>分类管理
</a>
</li>
<li id="admin-login">
<a href="goods.html" target="iframe">
<i class="fa fa-circle-o"></i>商品审核
</a>
</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-folder"></i>
<span>广告管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li id="admin-login">
<a href="content_category.html" target="iframe">
<i class="fa fa-circle-o"></i>广告类型管理
</a>
</li>
<li id="admin-login">
<a href="content.html" target="iframe">
<i class="fa fa-circle-o"></i>广告管理
</a>
</li>
</ul>
</li>
<!-- 菜单 /-->
</ul>
</section>
<!-- /.sidebar -->
</aside>
<!-- 导航侧栏 /-->
<!-- 内容区域 -->
<div class="content-wrapper">
<iframe width="100%" id="iframe" name="iframe" onload="SetIFrameHeight()"
frameborder="0" src="home.html"></iframe>
</div>
<!-- 内容区域 /-->
<!-- 底部导航 -->
<footer class="main-footer">
<div class="pull-right hidden-xs">
<b>Version</b> 1.0.8
</div>
<strong>Copyright © 2014-2017 <a href="http://www.itcast.cn">研究院研发部</a>.</strong> All rights reserved.
</footer>
<!-- 底部导航 /-->
</div>
</body>
</html>②<body class="hold-transition skin-green sidebar-mini"
ng-app="pinyougou" ng-controller="indexController" ng-init="showLoginName()">分析。
引入的样式表只有这几个。分别在eclipse中都打开。然后分别Ctrl+F，查找hold-transition。最后在：
<link rel="stylesheet" href="../plugins/adminLTE/css/AdminLTE.css">中找到hold-transition。
body.hold-transition .content-wrapper,
body.hold-transition .right-side,
body.hold-transition .main-footer,
body.hold-transition .main-sidebar,
body.hold-transition .left-side,
body.hold-transition .main-header .navbar,
body.hold-transition .main-header .logo {
/* Fix for IE */
-webkit-transition: none;
-o-transition: none;
transition: none;
}
其中：
body.hold-transition .content-wrapper,
body.hold-transition .right-side,
body.hold-transition .main-footer,
body.hold-transition .main-sidebar,
body.hold-transition .left-side,
body.hold-transition .main-header .navbar,
body.hold-transition .main-header .logo
的意思是：
在body节点，class="hold-transition"，body内部的节点，class为content-wrapper,right-side,main-footer,main-sidebar,left-side,left-side,然后body内部节点class为main-header 的节点内部，class为navbar的节点，和body内部节点class为main-header 的节点内部，class为logo的节点这些节点的这些class增加属性：
{
/* Fix for IE */
-webkit-transition: none;
-o-transition: none;
transition: none;
}
一、首先在引入的四个样式表中找到.content-wrapper。
1、style.css样式表文件
.content-wrapper .data-type {
/*width: 90%;*/
margin: 10px 5px;
border:1px solid #d4d4d4;
border-radius: 2px;
}
这个.content-wrapper与一般的.content-wrapper不一样，表示class为content-wrapper的节点以下的节点，这个或者这些节点class为data-type，则：
/*width: 90%;*/
margin: 10px 5px;
border:1px solid #d4d4d4;
border-radius: 2px;
因为.content-wrapper 与.data-type中间是空格不是逗号间隔，所以不是class为content-wrapper则：
/*width: 90%;*/
margin: 10px 5px;
border:1px solid #d4d4d4;
border-radius: 2px;
根据嵌套关系.content-wrapper .data-type { }不符合此iframe节点的样式。
2、_all-skins.min.css样式表文件
.skin-blue-light .content-wrapper,.skin-blue-light .main-footer{border-left:1px solid #d2d6de}
这个content-wrapper,是和前面不一样的。它是在.skin-blue-light的前提下的。意思是：在class为skin-blue-light的节点下的节点，若这个或这些节点的class为content-wrapper，则：
{border-left:1px solid #d2d6de}
同理：
这个main-footer，和前面的也不一样。它是在.skin-blue-light的前提下的。意思是：在class为skin-blue-light的节点下的节点，若这个或这些节点的class为main-footer，则：
{border-left:1px solid #d2d6de}
根据嵌套关系.skin-blue-light .content-wrapper,.skin-blue-light .main-footer{border-left:1px solid #d2d6de}不符合此iframe节点的样式。
.skin-black-light .content-wrapper,.skin-black-light .main-footer{border-left:1px solid #d2d6de}
这个content-wrapper,是和前面不一样的。它是在.skin-black-light的前提下的。意思是：在class为.skin-black-light的节点下的节点，若这个或这些节点的class为content-wrapper，则：
{border-left:1px solid #d2d6de}
同理：
这个main-footer，和前面的也不一样。它是在.skin-black-light的前提下的。意思是：在class为.skin-black-light的节点下的节点，若这个或这些节点的class为main-footer，则：
{border-left:1px solid #d2d6de}
根据嵌套关系.skin-black-light .content-wrapper,.skin-black-light .main-footer{border-left:1px solid #d2d6de}不符合此iframe节点的样式。
.skin-green-light .content-wrapper,.skin-green-light .main-footer{border-left:1px solid #d2d6de}
这个content-wrapper,是和前面不一样的。它是在.skin-green-light的前提下的。意思是：在class为.skin-green-light的节点下的节点，若这个或这些节点的class为content-wrapper，则：
{border-left:1px solid #d2d6de}
同理：
这个main-footer，和前面的也不一样。它是在.skin-green-light的前提下的。意思是：在class为.skin-green-light的节点下的节点，若这个或这些节点的class为main-footer，则：
{border-left:1px solid #d2d6de}
.根据嵌套关系skin-green-light .content-wrapper,.skin-green-light .main-footer{border-left:1px solid #d2d6de}不符合此iframe节点的样式。
.skin-red-light .content-wrapper,.skin-red-light .main-footer{border-left:1px solid #d2d6de}
这个content-wrapper,是和前面不一样的。它是在.skin-red-light的前提下的。意思是：在class为.skin-red-light的节点下的节点，若这个或这些节点的class为content-wrapper，则：
{border-left:1px solid #d2d6de}
同理：
这个main-footer，和前面的也不一样。它是在.skin-red-light的前提下的。意思是：在class为.skin-red-light的节点下的节点，若这个或这些节点的class为main-footer，则：
{border-left:1px solid #d2d6de}
根据嵌套关系.skin-red-light .content-wrapper,.skin-red-light .main-footer{border-left:1px solid #d2d6de}不符合此iframe节点的样式。
.skin-yellow-light .content-wrapper,.skin-yellow-light .main-footer{border-left:1px solid #d2d6de}
这个content-wrapper,是和前面不一样的。它是在.skin-yellow-light的前提下的。意思是：在class为.skin-yellow-light的节点下的节点，若这个或这些节点的class为content-wrapper，则：
{border-left:1px solid #d2d6de}
同理：
这个main-footer，和前面的也不一样。它是在.skin-yellow-light的前提下的。意思是：在class为.skin-yellow-light的节点下的节点，若这个或这些节点的class为main-footer，则：
{border-left:1px solid #d2d6de}
根据嵌套关系.skin-yellow-light .content-wrapper,.skin-yellow-light .main-footer{border-left:1px solid #d2d6de}不符合iframe节点的样式。
.skin-purple-light .content-wrapper,.skin-purple-light .main-footer{border-left:1px solid #d2d6de}
这个content-wrapper,是和前面不一样的。它是在.skin-purple-light的前提下的。意思是：在class为.skin-purple-light的节点下的节点，若这个或这些节点的class为content-wrapper，则：
{border-left:1px solid #d2d6de}
同理：
这个main-footer，和前面的也不一样。它是在.skin-purple-light的前提下的。意思是：在class为.skin-purple-light的节点下的节点，若这个或这些节点的class为main-footer，则：
{border-left:1px solid #d2d6de
.根据嵌套关系skin-purple-light .content-wrapper,.skin-purple-light .main-footer{border-left:1px solid #d2d6de}}不符合此iframe节点的样式。
3、bootstrap.min.css样式表
4、AdminLTE.css样式表
/*
* Content Wrapper - contains the main content
* ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
*/
.content-wrapper,
.right-side,
.main-footer {
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
}
transition:......
是IE10以上的浏览器，IE9及以下的浏览器都不适用。所以要在HTML文件中加入一句话：
<meta http-equiv="X-UA-Compatible" content="IE=edge">其中，电脑端装的IE浏览器要是IE10及以上的IE版本。否则也不起作用。
-moz-transition:........对火狐浏览器适用。
-webkit-transition:..........对Safari 和 Chrome浏览器适用。
-o-transition:..........对Opera浏览器适用。
定义和用法
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
语法
transition: transition-property transition-duration transition-timing-function transition-delay;其中：transition-property的值可以是width、margin或者transform等等。
transition-duration的值可以是2s、0.3s和10s等等。
transition-timing-function 的值可以是以下几个：
transition-delay可以是1s、4s和10s等等过渡动作延时的时间值。
有一个test.html以便理解以上内容：
test.html文件的内容为：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<style>
/*
* Content Wrapper - contains the main content
* ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
*/
.content-wrapper{
width:800px;
height:1000px;
margin:10px auto auto 130px;
background-color:#0FFCCC;
-webkit-transition: -webkit-transform 3s ease-in-out, margin 3s ease-in-out;
-moz-transition: -moz-transform 3s ease-in-out, margin 3s ease-in-out;
-o-transition: -o-transform 3s ease-in-out, margin 3s ease-in-out;
transition:transform 5s ease-in-out,margin 5s ease-in-out;
}
.content-wrapper:hover{
margin:20px auto auto 230px;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div class="content-wrapper">
</div>
</body>
</html>首先， background-color:#0FFCCC;要起作用，即要有背景颜色，需要定义好height的值，否则，没有背景颜色。width的值可以不定义，默认是100%，然后再margin后的值。如果不定义height的px值，或者height也定义成100%，则背景颜色值失效。
而且为了让HTML文件让IE10及以上版本读取，需要加上一句话：
<meta http-equiv="X-UA-Compatible" content="IE=edge">或者 <meta http-equiv="X-UA-Compatible" content="IE=10">（不过第二句话是需要电脑端安装了IE10，如果没有安装IE10则不行,第一句话则电脑端没有安装IE10,安装了IE11也可以。）
.right-side和.main-footer同理（同上）。
此/*
* Content Wrapper - contains the main content
* ```.right-side has been deprecated as of v2.0.0 in favor of .content-wrapper ```
*/
.content-wrapper,
.right-side,
.main-footer {
-webkit-transition: -webkit-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-moz-transition: -moz-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out, margin 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, margin 0.3s ease-in-out;
margin-left: 230px;
z-index: 820;
}
根据嵌套关系，是单独的一个，.content-wrapper,符合此iframe的样式。
.layout-top-nav .content-wrapper,
.layout-top-nav .right-side,
.layout-top-nav .main-footer {
margin-left: 0;
}
这个content-wrapper,是和前面不一样的。它是在.layout-top-nav的前提下的。意思是：在class为.layout-top-nav的节点下的节点，若这个或这些节点的class为content-wrapper，则：
margin-left: 0;
.layout-top-nav .right-side和.layout-top-nav .main-footer同理（同上）。
根据嵌套关系.layout-top-nav .content-wrapper,
.layout-top-nav .right-side,
.layout-top-nav .main-footer {
margin-left: 0;
} 中的.layout-top-nav .content-wrapper,不符合此iframe的样式。
index.html文件没有使用.layout-top-nav，即class="layout-top-nav"。
@media (max-width: 767px) {
.content-wrapper,
.right-side,
.main-footer {
margin-left: 0;
}
}
@media (max-width: 767px){ }的意思是：当屏幕宽度小于等于767px时，class="content-wrapper"，则： margin-left: 0;
.right-side和 .main-footer同理（同上）。
根据嵌套关系@media (max-width: 767px) {
.content-wrapper,
.right-side,
.main-footer {
margin-left: 0;
}
}中单个 .content-wrapper,符合此iframe节点的样式。
@media (min-width: 768px) {
.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
margin-left: 0;
}
}
@media (min-width: 768px){ }的意思是：当屏幕宽度大于等于768px时，
在class为sidebar-collapse的节点下的节点，class为content-wrapper的这个节点或者这些节点， margin-left: 0;
.sidebar-collapse .right-side和.sidebar-collapse .main-footer 同理（同上）。
根据嵌套关系@media (min-width: 768px) {
.sidebar-collapse .content-wrapper,
.sidebar-collapse .right-side,
.sidebar-collapse .main-footer {
margin-left: 0;
}
}中的 .sidebar-collapse .content-wrapper,不符合此iframe节点的样式。
在index.html文件中，没有class="sidebar-collapse"节点。
@media (max-width: 767px) {
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
}
}
@media (max-width: 767px) { }的意思是：当屏幕宽度小于等于767px时，在class为sidebar-open的节点下的节点，这个或者这些节点的class为content-wrapper,则：
{
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
}
transform的含义是：改变，使…变形；转换。
CSS3 transform都有哪些常用属性？
transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。
此处只讲translate( x, y)，其中x表示左右移动，正值为右移，负值为左移。其中y表示上下移动，正值为上移，负值为下移。
-webkit-transform: translate(230px, 0);Safari 和 Chrome浏览器，节点class为sidebar-open以下的节点，class为content-wrapper的所有节点右移230px。
-ms-transform: translate(230px, 0);IE 9浏览器，节点class为sidebar-open以下的节点，class为content-wrapper的所有节点右移230px。
-o-transform: translate(230px, 0);Opera浏览器，节点class为sidebar-open以下的节点，class为content-wrapper的所有节点右移230px。
transform: translate(230px, 0);IE10及以上浏览器，节点class为sidebar-open以下的节点，class为content-wrapper的所有节点右移230px。
.sidebar-open .right-side和 .sidebar-open .main-footer同理（同上）。
.content-wrapper,
.right-side {
min-height: 100%;
background-color: #ecf0f5;
z-index: 800;
}
这里我们要着重讲一下：min-height: 100%;
NO1.height的百分比
当我们给块元素设置百分比高度时,往往没能看到效果.因为百分比的大小是相对其最近的父级元素的高的大小,也就是说,其最近的父级元素应该有一个明确的高度值才能使其百分比高度生效.
<div id="container1">
<div id="wrap">
wrap's height work
</div>
</div>
<br>
<div id="container2">
<div id="wrap2">
wrap2's height doesn't work
</div>
</div>#container1 {
height: 100px;
background-color: red;
}
#wrap {
height: 50%;
background-color: green;
}
#container2 {
}
#wrap2 {/*该height属性无效,因为其父元素没有一个明确的高度*/
height: 50%;
background-color: green;
}子元素的百分比高度也可以基于父元素的百分比高度,前提是父元素的父元素必须有一个明确的高度:
<div id="#container">
<div id="wrap">
<div id="content">
content's percent height work only when does the wrap'height work
</div>
</div>
</div>#container {
height: 500px;
}
#wrap {
height: 100%;
}
#content {
height: 50%;
}但是,我们应该尽量避免这种多层百分比高度嵌套的风格.
NO2.min-height的百分比
再说说min-height吧.设置min-height的元素即使内容的高度很少时也能撑开到min-height设置的高度;当内容的高度大于min-height时就设置为内容的高度.
要使min-height的百分比值生效,其父元素的height值必须为一个固定的高度或者是一个有效的百分比高度.
值得注意的是,父元素设置了有效的min-height但没有设置height属性时,子元素的height和min-height的百分比不会生效.因为设置height和min-height必须基于一个设置了固定高度或者是一个有效百分比高度的父元素.
<div id="container1">
<div id="wrap">
wrap's min-height work
</div>
</div>
<br>
<div id="container2">
<div id="wrap2">
wrap2's min-height doesn't work
</div>
</div>#container1 {
height: 100px;
background-color: red;
}
#wrap {
/*该min-height生效,因为其父元素设置了有效height属性*/
min-height: 50%;
background-color: green;
}
#container2 {
min-height: 100px;
}
#wrap2 {
/*该min-height无效,因为其父元素没有设置有效的height属性(即使设置了min-height属性)*/
min-height: 50%;
}经过上面的分析，我们不用Ctrl+F所有的content-wrapper，首先我们要看看index.html文件中的class="content-wrapper"的结构。
根据嵌套关系
@media (max-width: 767px) {
.sidebar-open .content-wrapper,
.sidebar-open .right-side,
.sidebar-open .main-footer {
-webkit-transform: translate(230px, 0);
-ms-transform: translate(230px, 0);
-o-transform: translate(230px, 0);
transform: translate(230px, 0);
}
}中的 .sidebar-open .content-wrapper,不符合此iframe节点的样式。
class="content-wrapper"的嵌套关系是：
<body class="hold-transition skin-green sidebar-mini"
ng-app="pinyougou" ng-controller="indexController" ng-init="showLoginName()">
<div class="wrapper">
.......................
<!-- 内容区域 -->
<div class="content-wrapper">
<iframe width="100%" id="iframe" name="iframe" οnlοad="SetIFrameHeight()"
frameborder="0" src="home.html">
</iframe>
</div>
.......................
</div>
</body>
首先在四个样式表文件中查找id="iframe"的样式，即#iframe{ }是否存在，因为
<iframe width="100%" id="iframe" name="iframe" οnlοad="SetIFrameHeight()"
frameborder="0" src="home.html">没有提及class=""，所以只用看id="iframe"。注意：还要看iframe节点。
.embed-responsive iframe{ }表示：class="embed-responsive"的节点下的为<iframe></iframe>节点。所以我们这里<iframe></iframe>节点不符合条件。
首先查看<body>、<div>和<iframe>节点在四张样式表中有没有样式，再分别查看其class和id的值在样式表中的值，以及其组合在样式表中的值。
class="hold-transition skin-green sidebar-mini" 节点下的class="wrapper"节点下的class="content-wrapper"：
首先单独的class：
class="content-wrapper"即在样式表中找： .content-wrapper{ }
class="hold-transition"即在样式表中找： .hold-transition{ }
class="skin-green"即在样式表中找： .skin-green{ }
class="sidebar-mini" 即在样式表中找： sidebar-mini{ }
然后两个的class组合：
class="hold-transition" 节点下的class="content-wrapper"即在样式表中找： .hold-transition .content-wrapper{ }
class="skin-green"节点下的class="content-wrapper"即在样式表中找：.skin-green .content-wrapper{ }
class="sidebar-mini"节点下的class="content-wrapper"即在样式表中找：.sidebar-mini .content-wrapper{ }
class="wrapper"节点下的class="content-wrapper"即在样式表中找：.wrapper .content-wrapper{ }
class="hold-transition" 节点下的class="wrapper"即在样式表中找： .hold-transition .wrapper{ }
class="skin-green"节点下的class="wrapper"即在样式表中找：.skin-green .wrapper{ }
class="sidebar-mini"节点下的class="wrapper"即在样式表中找：.sidebar-mini .wrapper{ }
然后三个的class组合：
class="hold-transition" 节点下的class="wrapper"节点下的class="content-wrapper"即在样式表中找：
.hold-transition .wrapper .content-wrapper{ }
class="skin-green" 节点下的class="wrapper"节点下的class="content-wrapper"即在样式表中找：
.skin-green .wrapper .content-wrapper{ }
class="sidebar-mini" 节点下的class="wrapper"节点下的class="content-wrapper"即在样式表中找：
.sidebar-mini .wrapper .content-wrapper{ }
③<body class="hold-transition skin-green sidebar-mini"
ng-app="pinyougou" ng-controller="indexController" ng-init="showLoginName()">的重新分析。
<html>
<body class="hold-transition skin-green sidebar-mini"
ng-app="pinyougou" ng-controller="indexController" ng-init="showLoginName()">
<div class="wrapper">
.................
<!-- 内容区域 -->
<div class="content-wrapper">
<iframe width="100%" id="iframe" name="iframe" οnlοad="SetIFrameHeight()"
frameborder="0" src="home.html"></iframe>
</div>
<!-- 内容区域 /-->
</div>
</body>
</html>
首先查看四个引入的样式表文件里面的节点的样式。节点有：<html>、<body>、<div>和<iframe>
分别在四个样式表文件中：Ctrl+F查询。
一、查找HTML节点。
html{font-family:sans-serif;-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%}
解释：font-family:sans-serif;
Serif和Sans-serif字体的区别
在西方国家罗马字母阵营中，字体分为两大种类：Sans Serif和Serif。
Serif的意思是，在字的笔划开始及结束的地方有额外的装饰，而且笔划的粗细会因直横的不同而有不同。相反的，Sans Serif则没有这些额外的装饰，笔划粗细大致差不多。如下图：
可以看出，我们平时所用的Georgia、Times New Roman等就属于Serif字体，而Arial、Tahoma、Verdana等则属于Sans Serif字体。对中文而言，同样存在这两大种类，很明显，宋体、细明体(繁体中常用)等就属于Serif，而黑体、幼圆等则属于Sans Serif。
“无衬线体”（Sans-serif） “有衬线体”（Serif）
html{font-family:sans-serif;}无衬字体，且对于不同的设备和操作系统有自己的不同的，默认字体和大小。此处省略。
test03.html文件的内容为：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
<style>
.content-wrapper{
width:100px;
height:50px;
font-family:serif;
font-size:10px;
}
.content-wrapper02{
width:100px;
height:50px;
font-family:sans-serif;
font-size:10px;
}
</style>
</head>
<body>
<!-- 内容区域 -->
<div class="content-wrapper">
kkkk serif
</div>
<div class="content-wrapper02">
kkkk sans-serif
</div>
</body>
</html>直接复制以上内容，或者在其他网站看到类似内容，复制粘贴到html文件中，可能会没有效果，因为会有;&nsp等多余字符的产生，导致网页内容出问题，而出不来serif和sans-serif的效果。正常情况下，如手敲代码或者复制粘贴成功HTML文件的代码，产生的效果如下：
解释：-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;
无论是横屏还是竖屏，或者是放大缩小屏幕，文本的大小始终是原始大小的100%。
-webkit-text-size-adjust:100%;Safari 和 Chrome浏览器,无论是横屏还是竖屏，或者是放大缩小屏幕，文本的大小始终是原始大小的100%。
-ms-text-size-adjust:100%;IE 9浏览器,无论是横屏还是竖屏，或者是放大缩小屏幕，文本的大小始终是原始大小的100%。
这个属性只适用于一些智能手机和平板电脑。
223
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
