【ingbx】css\common.css学习第二步common style

【ingbx】css\common.css学习第一步
https://discuz.dismall.com/thread-1286135-1-1.html

2------------------------------------------------------------------------------------------
/* common style */
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix { display:inline-block; }
/*\*/ .clearfix {display:block;} /**/
======================================================
普通样式：
clearfix对float的使用
一个非常常见的CSS问题，定位使用浮动的时候，下面的层被浮动的层所覆盖，或者层里嵌套的子层超出了外层的范围。
CSS的方法--使用：after
/*需要用到的CSS样式表的最初设想*/
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
/*实际用到的CSS样式表(针对不同浏览器做了优化)*/
.clearfix:after {content: ".";display: block;height: 0;clear:both;visibility: hidden;}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/ *
html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
-------------------------
content : attr(alt) | counter(name) | counter(name, list-style-type) | counters(name, string) | counters(name, string, list-style-type) | no-close-quote | no-open-quote | close-quote | open-quote | string | url (url)
attr(alt) : 　使用alt特性的文字
counter(name) : 　使用已命名的计数器
counter(name, list-style-type) : 　使用已命名的计数器并遵从指定的list-style-type属性
counters(name, string) : 　使用所有已命名的计数器
counters(name, string, list-style-type) : 　使用所有已命名的计数器并遵从指定的list-style-type属性
no-close-quote : 　并不插入quotes属性的后标记。但增加其嵌套级别
no-open-quote : 　并不插入quotes属性的前标记。但减少其嵌套级别
close-quote : 　插入quotes属性的后标记
open-quote : 　插入quotes属性的前标记
string : 　使用用引号括起的字符串
url : 　使用指定的绝对或相对地址
-------------------------
display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
table : 　CSS2　将对象作为块元素级的表格显示
table-caption : 　CSS2　将对象作为表格标题显示
table-cell : 　CSS2　将对象作为表格单元格显示
table-column : 　CSS2　将对象作为表格列显示
table-column-group : 　CSS2　将对象作为表格列组显示
table-header-group : 　CSS2　将对象作为表格标题组显示
table-footer-group : 　CSS2　将对象作为表格脚注组显示
table-row : 　CSS2　将对象作为表格行显示
table-row-group : 　CSS2　将对象作为表格行组显示
-------------------------------------------
clear : none | left |right | both
none : 　允许两边都可以有浮动对象
both : 　不允许有浮动对象
left : 　不允许左边有浮动对象
right : 　不允许右边有浮动对象
---------------------------------------------
visibility : inherit | visible | collapse | hidden
inherit : 　继承上一个父对象的可见性
visible : 　对象可视
hidden : 　对象隐藏
collapse：主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象，其作用等同于hidden。IE5.5尚不支持此属性。
-----------------------------------------------
.box_l { float:left; }
.box_r { float:right; }
float : none | left |right
none : 　对象不浮动
left : 　对象浮在左边
right : 　对象浮在右边
-------------------------------------------
.bg_fff { background:#FFF!important; }
.bg_f8 { background:#F8F8F8; }
.color_black { color:#999!important; }
!important 声明
-----------------------------------------
.column { width:960px; overflow:hidden; margin:0 auto 10px; }
        .col1 { float:left; width:700px; overflow:hidden; }
        .col2 { float:right; width:250px; overflow:hidden; }
        .col3 { float:left; width:380px; overflow:hidden; }
        .col4 { float:right; width:310px; overflow:hidden; }
宽度width 自动auto
overflow : visible | auto | hidden | scroll
visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

-------------------------------------------

.pages { height:35px; overflow:hidden; text-align:center; line-height:25px; font-family:Verdana; }
        .pages a, .pages strong { margin:0 1px; padding:2px 6px; border:1px solid #E4E4E4; color:#369; text-decoration:none!important; }
        .pages a:hover { border-color:#369; }
        .pages strong { border-color:#369; background:#369; color:#FFF; }
        .pages .prev { padding:4px 5px 2px; border:none; text-decoration:underline!important; }
        .pages .next { padding:4px 5px 2px; border:none; text-decoration:underline!important; }
-----------------
text-align : left | right | center | justify
left : 　左对齐
right : 　右对齐
center : 　居中
justify : 　两端对齐
-------------------
line-height : normal | length
normal : 　默认行高
length : 　百分比数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位
---------------------
font-family : name
font-family : cursive | fantasy | monospace | serif | sans-serif
name : 字体名称。按优先顺序排列。以逗号隔开。如果字体名称包含空格，则应使用引号括起
第二种声明方式使用所列出的字体序列名称。如果使用fantasy序列，将提供默认字体序列
-----------------------
text-decoration : none || underline || blink || overline || line-through
none : 　无装饰
blink : 　闪烁
underline : 　下划线
line-through : 　贯穿线
overline : 　上划线
------------------
hover 悬停
strong 加重
prev 前一页
next 下一页
-----------------------------------------------
.input_tx { padding:2px 0 2px 2px; border:1px solid; border-color:#666 #CCC #CCC #666; line-height:16px; color:#666; }
        #login_box .input_tx { width:150px; }
        #login_box #login_authcode_input .input_tx,#registerform  #seccode { width:60px; }
        .search_content .input_tx { width:160px;}
        .footer_search .input_tx { width:190px; }
        #registerform .input_tx, .lost_pw .input_tx { width:180px;}
插入文本 行高线
-------------------------------------
.input_search { width:54px; height:24px; overflow:hidden; border:none; background:url(../images/btn_search_bg.gif) no-repeat; text-align:center; line-height:24px; color:#FFF; font-weight:700; letter-spacing:1px; }

letter-spacing : normal | length
normal : 　默认间隔
length : 　由浮点数字和单位标识符组成的长度值，允许为负值。请参阅长度单位
---------------------------------------
.input_reset { width:71px; height:24px; overflow:hidden; border:none; background:url(../images/btn_reset_bg.gif) no-repeat; line-height:24px; text-indent:23px; letter-spacing:1px;}
.ad_pagebody { width:960px; overflow:hidden; margin:0 auto 10px; }
.ad_mainbody { width:960px; overflow:hidden; margin:0 auto 10px; }
.ad_sidebar { width:250px; overflow:hidden; margin:0 auto 10px; text-align:center; }
.ad_article {  float:left; max-width:650px; overflow:hidden; margin:0 12px 12px 0!important; margin:0 9px 12px 0; }
广告样式设置
----------------------------------------
.margin_bot10 { margin-bottom:10px; }
.margin_bot0 { margin-bottom:0!important;}
========================================
.global_module { overflow:hidden; padding-bottom:10px; border:1px solid #D8D8D8; background:#F8F8F8; }
        .global_module1_caption { height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption1_bg.gif) repeat-x; color:#FFF; line-height:31px; }
                .global_module1_caption h3 { display:inline; float:left; margin:0 20px; font-weight:700; }
                .global_module1_caption a.more { display:inline; float:right; margin:0 20px; color:#FFF; font-family:simsun; }
        .global_module2_caption { height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption2_bg.gif) repeat-x; line-height:31px; }
                .global_module2_caption h3 { padding:0 15px; font-weight:700; }
        .global_module3_caption { position:relative; height:31px; overflow:hidden; margin-bottom:10px; background:url(../images/global_caption3_bg.gif) repeat-x; line-height:31px; }

position : static | absolute | fixed | relative
static : 　无特殊定位，对象遵循HTML定位规则
absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置
fixed : 　IE5.5及NS6尚不支持此属性
-----------------------------
========================================
以下代码是控制global的主要部分
                .global_module3_caption h3 { padding:0 15px; font-weight:400; }
                .global_module3_caption h3 img { margin-top:3px;}
                a.btn_capiton_op { position:absolute; top:3px; right:10px; display:block; width:96px; height:24px; overflow:hidden; background:url(../images/more_op_bg.gif) no-repeat; color:#295B72; line-height:26px; text-indent:-9999px; }
.global_tx_list1 { width:100%; min-height:150px; height:expression(this.style.height < 150 ? 150: true); overflow:hidden; }

min-height : none | length
none : 　无最小高度限制
length : 　由浮点数字和单位标识符组成的长度值 | 或者百分数。不可为负数。
--------------------------------

        .global_tx_list1 li { display:inline; float:left; width:300px; height:25px; overflow:hidden; margin:0 15px 0 20px; padding-left:12px; background:url(../images/icon_li.gif) no-repeat 0 11px; line-height:25px; }
        .global_tx_list1 .box_r { padding-left:10px; color:#999; }
        .global_tx_list1 .box_r a { color:#999; }
        .ext_li_short { height:auto;}
                .ext_li_short li { display:inline; float:left; width:70px; height:25px; overflow:hidden; margin:0 15px 0 20px; padding-left:12px; background:url(../images/icon_li.gif) no-repeat 0 11px; line-height:25px;  }

.global_tx_list2 { min-height:150px; height:expression(this.style.height < 150 ? 150: true); overflow:hidden; padding:0 15px; }
        .global_tx_list2 li { height:25px; overflow:hidden; line-height:25px; }
        .global_tx_list2 .box_r { padding-left:10px; color:#999; }

.global_tx_list3 { overflow:hidden; padding:0 15px; }
        .global_tx_list3 li { height:25px; overflow:hidden; padding-left:12px; background:transparent url(../images/icon_li.gif) no-repeat scroll 0 11px; line-height:25px; }
        .global_tx_list3 .box_r { padding-left:10px; color:#999; }

.global_tx_list4 { overflow:hidden; margin-bottom:20px; padding:0 15px; }
        .global_tx_list4 li { height:35px; overflow:hidden; background:url(../images/dashed_bg.gif) repeat-x 0 34px; line-height:35px; font-size:14px; }
        .global_tx_list4 li a { color:#369; }
        .global_tx_list4 .box_r { padding-left:10px; color:#999; font-size:12px; }

.global_tx_list5 { margin-bottom:10px; padding-bottom:0; background:url(../images/zebra_bg.gif) repeat 0 31px; }
        .global_tx_list5  .global_module2_caption { margin-bottom:0; }
        .global_tx_list5 ul { padding:0 15px 0 30px; background:url(../images/top10_bg.gif) no-repeat 15px 10px; }
        .global_tx_list5 ul li { height:28px; overflow:hidden; line-height:28px; }
        .global_tx_list5 .box_r, .global_tx_list5 .box_r a { color:#999;}

.global_tx_list6 { margin-bottom:10px; padding-bottom:0; background:url(../images/zebra_bg.gif) repeat 0 31px; }
        .global_tx_list6  .global_module2_caption { margin-bottom:0; }
        .global_tx_list6 ul { padding:0 15px 0 30px; background:url(../images/top10_bg.gif) no-repeat 15px 10px; }
        .global_tx_list6 ul li { height:28px; overflow:hidden; *margin-bottom:-2px; line-height:28px; }
        .global_tx_list6 .box_l { width:150px; height:28px; overflow:hidden; }
        .global_tx_list6 .box_r { width:50px; overflow:hidden; text-align:right; }
        .global_tx_list6 .box_r a { color:#999;}

.global_avatar_list {}
        .global_avatar_list li { display:inline; float:left; height:78px; }
        .global_avatar_list li img { display:block; width:48px; height:48px; padding:1px; border:1px solid #D8D8D8; }
        .global_avatar_list li span { display:block; width:52px; height:25px; overflow:hidden; line-height:25px; text-align:center; }

.global_piclist { height:125px; overflow:hidden; padding:10px 0 0 7px; }
        .global_piclist li{ position:relative; display:inline; float:left; width:106px; height:123px; overflow:hidden; margin-left:7px; }
        .global_piclist li div { display:table-cell; *display:block; width:102px; height:104px; *height:102px; overflow:hidden; border:1px solid #E0E9F2; background:#FFF; text-align:center; vertical-align:middle; *font-size:85px; cursor:pointer; }
        .global_piclist li div img, .user_photolist dl dt div img { max-width:100px; max-height:100px; width:expression(this.width > 100 && this.width > this.height ? 100: true); height:expression(this.height > 100 ? 100: true);  vertical-align:middle; }
        .global_piclist li span { position:absolute; left:0; bottom:0; *bottom:-2px; width:102px; height:16px; overflow:hidden; line-height:16px; text-align:center; }

.globalnews_piclist { padding-left:2px; }
        .globalnews_piclist li { display:inline; float:left; margin:3px 0 0 10px; }
        .globalnews_piclist img { display:block; width:100px; height:70px; padding:1px; border:1px solid #D8D8D8; }
        .globalnews_piclist span { display:block; width:104px; height:25px; overflow:hidden; line-height:25px; text-align:center; }

支持一下！

很棒，辛苦了

学习了   支持lz

我顶~~ 嘿嘿~~~~

顶了
http://hip-hops.net/

真的好棒

谢谢楼主哈啊啊

up,纯支持


www.liudo.net