Htmlayout-html_samples学习篇(二)

animations

---

知识点: 

1. 再hover状态下, 使用css 的 transition: blend,使前景图与另外的图片进行混合, 完成动画效果

2. behavior:dropdown; 让div有弹出的动作.  同时 其弹出元素要求使用<popup>标签. 

img 
{ 
  width:16px; 
  height:16px; 
  foreground-image:url(images/led-green.png);
}

img:hover
{ 
  foreground-image:url(images/led-red.png);
  transition: blend;   /*关键, 这里是混合效果*/
}

#test { behavior:dropdown; }
#test popup
{ 
   ...
}

思考: 

  可以使用popup做出menu的效果. 

transition

---

知识点:

1. :expanded 伪类选择器, 选中展开的容器

2. 使用 overflow-y:hidden 隐藏y轴上溢出的部分

3. visibility:visible/collapse 使元素隐藏/显示, 和display显示方式区别在于, 它为隐藏的对象保留其占据的物理空间.

4. behavior:expandable-list/collapsible-list; 使元素拥有可展开列表属性, 和<li>元素 的 transition:slide( 滑动效果)配合使用

body { 
  font-family:"Century Gothic","Tahoma"; 
  font-size:10pt; 
  padding: 10px;
  width:100%%; height:100%%;  
  background-color: #e9e8f3;
}

#thebar 
{
  width:100%%;	           /*窗口大小*/
  height:max-intrinsic;    /*内容最大宽度*/
  min-height:48px;         /*最小高度*/
  margin:0;
  padding:0;    
  border:1px solid #bdbccc;
  background-color: #fff;
  behavior:expandable-list;
  flow:horizontal;
  overflow-y:hidden;
  overflow-x:hidden;
}

#thebar > li 
{
   transition:slide;  /* sliding! */
   flow:horizontal;
   list-style-type:none;
   width:min-intrinsic; /* natural width */
   background-color: #F4F3F9;
   height:100%%;
} 

#thebar > li > .caption
{
  width:48px;
  height:100%%;
  text-align:center;
  vertical-align:middle;
  background-image:url(images/outlook/tab.png);
  background-repeat:expand stretch-left stretch-right stretch-middle;
  background-position:3px 3px 3px 3px;
} 

#thebar > li:collapsed > .caption:hover
{
  transition:blend;
  background-image:url(images/outlook/tab-hover.png);
} 

#thebar > li:collapsed > .caption:active
{
  background-image:url(theme:button-pressed);
} 

#thebar > li:expanded
{
    width:100%%; /* whole idea - it takes all available space */ 	  
}

 #thebar > li:expanded > .caption
{
  background-image:none; 
} 

#thebar > li > .content 
{
  //display:none;	 /* hidden by default */ 
  visibility: collapse;   /*内容默认全部失效*/
  vertical-align: middle;
  white-space: nowrap; /*内容全部在一行中*/
  height:100%%; 
  width:0;
}

#thebar > li:expanded > .content 
{
  //display:block; /* visible */
  visibility: visible;  /*内容只有在当li是展开的情况下 全部出现*/
  overflow-x:hidden;
  width:100%%;

思考: 

其实这里面实现的滑动效果主要是3点:

1. 定义一个拥有 behavior:expandable-list 的无序列表<ul> , 同时 位浮动 flow:horizontal 横向浮动. 

2. 在不同的情况下,图标使用不同的背景图片 ( 图标交互动作 )

      如: 1) 当该<li> 属于展开状态( : expended),  图标 清空背景图片.

           2) 当该<li>属于未展开状态时, hover 图标时 使用渐变(transition:blend;)背景图片

           3) 当该<li>属于未展开状态时active时, 图标 使用(background-image:url(theme:button-pressed); ??? 不理解,但实际测试时此条并不影响效果. 

           4) <li> 设置好 transition:slide 滑动属性. 

  3.   <li>下的内容元素,  默认设置成 visibility: collapse 隐藏, 当<li>属于expanded状态时, 设置visibility: visible 显示.

问题点:　

  1. <li>在什么情况下属于展开(: expended)状态.   我的理解是 当<li>被点击的时候即是展开状态, 如果ul 没有behavior:expandable-list/collapsible-list的属性时, 点击<li>时<li>无法得到展开状态

accesskeys  actions

---

知识点:

1. accesskeys  属于快捷键

2. actions 支持响应

html 
{ 
    behavior:accesskeys actions;
}
	
<input accesskey="^E" type="text"/>
<button accesskey="!NUMPAD7" action="alert:7 pressed">7</button>

accesskey 支持3种模式:

1. ^keyname   press of CTRL + keyname

2.   !keyname  Just keyname press

3.   keyname   press of ALT + keyname 

转载于:https://my.oschina.net/u/262502/blog/317885