电商五十九、运营商管理后台pinyougou02-manager-web模块项目的静态原型,admin文件夹内index.html文件分析之二

①续<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节点。

button,html input[type=button],input[type=reset],input[type=submit]
 {-webkit-appearance:button;cursor:pointer}

根据嵌套关系,这个HTML节点只对类型为type的input节点起作用。不对单独的HTML节点内的节点起作用。

对-webkit-appearance:button; 进行解释:Safari 和 Chrome浏览器,对HTML节点中type的input节点中的一些文本,进行按钮处理。

cursor:pointer;cursor:pointer意思是是计算机中把鼠标指针的形状弄成一只伸出食指的手。

button[disabled],html input[disabled]{cursor:default}

input[disabled]分析:

被禁用的 input 元素既不可用,也不可点击。可以设置 disabled 属性,直到满足某些其他的条件为止(比如选择了一个复选框等等)。然后,就需要通过 JavaScript 来删除 disabled 值,将 input 元素的值切换为可用。

注释:disabled 属性无法与 <input type="hidden"> 一起使用。

Last name的input输入框被禁用,不可输入内容,也不可点击。

cursor:default;表示是鼠标为默认值,箭头。

根据嵌套关系,单独的HTML节点没有此特性,只有HTML节点下的设置了disable属性的input节点,才有鼠标为箭头的属性。 

html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}

-webkit-tap-highlight-color:rgba(0,0,0,0);

   这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。

想要禁用这个高亮,设置颜色的alpha值为0即可。

这个HTML节点为单独的,所以,HTML节点下的这个或者这些节点有这个属性。

单独的HTML节点,则HTML节点下的这个或这些节点都有这个属性。

.layout-boxed html,
.layout-boxed body {
  height: 100%;

根据嵌套原理,只有在class为layout-boxed的HTML节点,才有设置的属性值: height: 100%;单独的HTML,节点,没有class为layout-boxed则不有此属性。

二、查找body节点。

 body{margin:0}

body单独一个,则根据嵌套原理,body节点以及以下的所有节点外边距均为0。

body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}

font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;分析:

如果机器安装了"Helvetica Neue"字体,就显示该字体,且为sans-serif无衬线字体,如果机器没有安装"Helvetica Neue"字体,就显示Helvetica,Arial字体,且为sans-serif无衬线字体。

 font-size:14px;分析:表示字体大小为14px。

;line-height:1.42857143;行高为1.42857143。

字体颜色:color:#333;

背景颜色:background-color:#fff;

根据嵌套原理,此body为单独一个body,所以此body节点和其内部的节点都满足此属性值。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值