【ingbx】css\common.css学习第六步focus turn

【ingbx】css\common.css学习第三四五步header style,nav style,footer style
https://discuz.dismall.com/thread-1286209-1-1.html

1. /* focus turn */
   
2. 
   
3. #focus_turn { position:relative; height:450px; margin-bottom:10px; border:1px solid #D8D8D8; background:url() repeat-x; }
   
4. 
   
5. #focus_pic { margin:12px 0 0 12px!important;  margin:11px 0 0 12px; }
   
6. 
   
7.   #focus_pic li img { width:350px; height:450px; padding:1px; border:1px solid #D8D8D8; background:#FFF; }
   
8. 
   
9.   #focus_pic .normal { display:none; }
   
10. 
    
11.   #focus_pic .current { display:block; }
    
12. 
    
13. #focus_btn { position:absolute; right:14px; bottom:30px; border-left:1px solid #D8D8D8; }
    
14. 
    
15.   #focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }
    
16. 
    
17.   #focus_btn .normal { background:#000; color:#FFF; opacity:0.4; filter:alpha(opacity=50);  }
    
18. 
    
19.   #focus_btn .current { background:#7A8B8B; color:#FFF; }
    
20. 
    
21. #focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
    
22. 
    
23.   #focus_tx .normal { display:none; }
    
24. 
    
25.   #focus_tx .current { display:block; }
    
26. 
    
27. #focus_opacity {  position:absolute; left:14px; bottom:460px; width:350px; height:18px; background:#575757; opacity:0.4; filter:alpha(opacity=80); }
    

复制代码

/* focus turn */ 焦点图片轮换
---------------------------------------------------------------
#focus_turn { position:relative; height:450px; margin-bottom:10px; border:1px solid #D8D8D8; background:url() repeat-x; }
焦点图片轮换   位置：相对  高度：450像素  底端边距：10像素 边框宽度：1像素 实心线 颜色#D8D8D8（灰色一种） 背景图片地址（一般为../image/***.jpg） 重复方式，x轴重复显示
position : static | absolute | fixed | relative
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性
Margins Properties 外边距属性
Paddings Properties  内边距属性

---------------------------------------------------------------
#focus_pic { margin:12px 0 0 12px!important;  margin:11px 0 0 12px; }
焦点图片   边距 12像素 0像素 0像素 12像素 声明：  提升指定样式规则的应用优先权。边距 11像素 0 像素 0像素 12像素
---------------------------------------------------------------
  #focus_pic li img { width:350px; height:450px; padding:1px; border:1px solid #D8D8D8; background:#FFF; }
焦点图片 li属性里的图片参数 宽度350像素 高度450像素 填充距离 1像素 边框 1像素 实心线 颜色#D8D8D8（灰色一种） 背景色:#FFF（黑色的一种）
-----------------------------------------------------------------
  #focus_pic .normal { display:none; }
焦点图片 正常 不显示【定义是否显示】
-----------------------------------------------------------------
  #focus_pic .current { display:block; }
焦点图片 当前 锁定显示
-----------------------------------------------------------------
#focus_btn { position:absolute; right:14px; bottom:30px; border-left:1px solid #D8D8D8; }
焦点 按钮  位置：固定 右侧14像素 底部 30像素 左边框1像素 实心线颜色#D8D8D8（灰色一种）
-------------------------------------------------------------------------------------
  #focus_btn span { display:block; float:left; overflow:hidden; width:22px; height:22px; margin:0 0 0 -1px; border:1px solid #D8D8D8; text-align:center; font:14px Arial, Helvetica, sans-serif; font-weight:700; line-height:22px; cursor:pointer; }
焦点按钮  span 锁定显示  左边漂浮移动  溢出 隐藏  宽度 22像素  高度 22像素  边距：0像素 0像素 0像素 -1像素 边框1像素 实心线颜色   文本 居中对齐  字体尺寸：14像素 标准字体：微软arial字体，苹果helvetica字体，清晰小字体sans-serif字体，字体粗细 700，行高 22像素
normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用
bolder : IE5+　特粗体
lighter : IE5+　细体
number : IE5+　100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

overflow : visible | auto | hidden | scroll
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条


--------------------------------------------------------------------------------------
  #focus_btn .normal { background:#000; color:#FFF; opacity:0.4; filter:alpha(opacity=50);  }
焦点按钮 正常  背景色:#000黑色，前景色：白色，不透明度0.4
filter : 　要使用的滤镜效果。
alpha比例50%
---------------------------------------------------------------------------------

  #focus_btn .current { background:#7A8B8B; color:#FFF; }
当前 背景色  前景色
--------------------------------------
#focus_tx { height:20px; overflow:hidden; margin:5px 0 0 12px; font-size:14px; line-height:20px; }
焦点文本  高度20像素 溢出隐藏  外边距 5像素 0像素 0像素 12像素   字体大小 14像素  行间距 20像素
----------------------------------------------------------
  #focus_tx .normal { display:none; }
  #focus_tx .current { display:block; }
文本 正常 无  当前 锁定
-----------------------------------------------
#focus_opacity {  position:absolute; left:14px; bottom:460px; width:350px; height:18px; background:#575757; opacity:0.4; filter:alpha(opacity=80); }
焦点  不透明  绝对定位：左14像素 底部460像素  宽度350像素 高度18像素 背景色  不透明度0.4 80%
【absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框】

原帖地址：http://www.ingbx.com/bbs/viewthr ... p;page=1&extra=

效果图

楼上为原始尺寸大小截图

收藏学习

支持lz  学习了

不错的教程，学习了

支持lz
       收藏学习

怎样改JS文件呢？

怎样改JS文件呢？  怎么改图片都展示方式呢？
FF和IE都支持的滤镜