本帖最后由 bestabba 于 2009-5-1 21:23 编辑
【ingbx】css\common.css学习第三四五步header style,nav style,footer style
https://discuz.dismall.com/thread-1286209-1-1.html- /* focus turn */
- #focus_turn { position:relative; height:450px; margin-bottom:10px; border:1px solid #D8D8D8; background:url() repeat-x; }
- #focus_pic { margin:12px 0 0 12px!important; margin:11px 0 0 12px; }
- #focus_pic li img { width:350px; height:450px; padding:1px; border:1px solid #D8D8D8; background:#FFF; }
- #focus_pic .normal { display:none; }
- #focus_pic .current { display:block; }
- #focus_btn { position:absolute; right:14px; bottom:30px; border-left:1px solid #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; }
- #focus_btn .normal { background:#000; color:#FFF; opacity:0.4; filter:alpha(opacity=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; }
- #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); }
---------------------------------------------------------------
#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= |
楼主