注意:为了让li可以在一行显示~可以有多种方法~比如设置li的display为inline-block~不过这里要用浮动来实现~否则给li添加的小图标会消失
2、小图标加文字的居中~
html代码:
.logo_rightimg{/*这样图片后面的文字就可以在图片高度的中间显示*/vertical-align:middle;margin-right:10px;}
3、焦点图类别
js、flash、css、jquery
jquery书写简单~
myFocus焦点图插件~是完全独立的js库~轻量级~效率高~提供很多风格~而且各种风格具有相同的接口~方便切换~完全开源免费
myFocus的使用:
a、将其js文件夹导入到工程~形成如下目录(其js文件夹中包含的就是蓝色选中的js文件和一个mf-pattern文件夹):
b、引入对应的文件并进行初始化
对应元素结构代码
4、input输入框添加背景图后需要设置其背景色~不然会出来很奇怪的效果
5、制作新闻列表时把向右浮动的日期写到标题的左侧~可以解决在ie下因为浮动而造成一行错位的效果
.news_listspan{color:#999;float:right;}显示效果:
6、在网页中引入优酷网视频
b、复制html代码
c、然后在html代码里写好的容器中插入复制的代码(可以根据页面布局自己设置一下视频的宽和高)
7、高度自适应的容器
页面中需要放置新闻时~因为内容长度不定~所以不能把盛放文本内容的容器盒子的高度写死
a、一个方案是给容器盒子写一个最小高度~这样~当内容不是很多时~容器会有一个最小的高度~当文本内容过多在盒子最小高度之内显示不下时~盒子的高度又可以动态扩充
注意:设置最小高度会面临一个问题~兼容性的问题~ie6没有min-height属性~这时~需要用到csshack~代码如下:
.list_box{width:770px;min-height:350px/*这个容器需要放置新闻~为了让高度随新闻内容增多而扩大~就不能写死一个高度~*/;_height:350px;/*ie6不支持min-height属性~这里利用csshack专门给ie6定高~而ie6有个特性即盒子放不下内容时盒子会被自动撑大*/background-color:#b00;border:1pxsolid#e8e8e8;float:right;}好在ie6就算写死了高度也会动态扩充~~不然真是叫天了~~
b、另一种情况是我们在布局的时候往往都是将这样的盒子放在一个更大的盒子里~比如页面是布局成上、中、下三个大盒子~上面的盒子放置导航之类的~中间放主体内容~这时~中间的大盒子可能包含若干个小盒子~并将小盒子设为浮动~形成多列布局~这时~为了让里面的小盒子的高度随内容动态扩充于是像方案a那样设置了最小高度~但是问题来了~因为子盒子是浮动的~所以父元素就崩塌了~即父元素的高度没办法被撑开~这时如果你事先给父元素写死一个告诉那父元素就是写死的高度~如果很不幸~这个父元素的子盒子又刚刚好因为装的文本太多而溢出~那与父元素同级的下一个盒子(以上面说的上、中、下盒子布局来说这里指的就是下这个盒子就会被中盒子里的子元素挡住)
就像这样:
解决方案可以是:
b.1、给中间和下边的盒子之间再加一个空的盒子(一般都是div)然后对其使用清除浮动~
b.2、给父盒子也写一个最小高度~并用csshack设置ie6下的高度(做法和上面提到的方案a一样)
b.3、当页面存在多个这种情况时~如果使用方案b.1就会导致html代码中出现很多没有意义仅仅是为了清除浮动而设置的盒子(一般为div)~当然也可以使用伪类after来做~不过更简单的方法是给父元素加一个overflow:hidden;的设置~这样父元素的高度就会被浮动子元素自动撑开~这时~不能写死父元素的高度~否则如果子元素因为内容过多而超出父元素事先写死的高度时超出的内容就会被隐藏掉~
最终解决后的效果如下:
讲那么多小小总结一下吧~~
即若要盒子高度根据内容的多少自动扩充~那可以给盒子设置一个最小高度同时利用csshack兼容ie6~写法如下:
min-height:350px;_height:350px;也可以不给盒子设置高度~同样可以让其高度自适应~
但是如果遇到盛放内容的盒子被包裹在一个更大的盒子里并且这个盛放内容的盒子设置了浮动时~父亲盒子的高度就无法自适应了~这时可以给父元素设置一个最小高度~并为父盒子下紧邻的盒子设置清除浮动~或者干脆加一个专门清除浮动的空盒子
另一个好的解决方案是给父盒子设置overflow:hidden;写法如下:
.list_main{/*包裹红色和浅绿色盒子的父盒子*/overflow:hidden;/*因为新闻内容长度不定~故此元素内部的子元素高度需要自适应~又因其子元素都浮动~为了让此父元素告诉能被子元素动态撑大~需要设置overfloat为hidden~这样紧邻于此父元素的下一个同级元素copyright就会被顶下去而无需设置清除浮动*/background-color:#fff;margin-top:10px;}.news_type{/*浅绿色盒子*/width:220px;height:350px;border:1pxsolid#e8e8e8;background-color:#9fc;float:left;}.list_box{/*红盒子*/width:770px;min-height:350px/*这个容器需要放置新闻~为了让高度随新闻内容增多而扩大~就不能写死一个高度~*/;_height:350px;/*ie6不支持min-height属性~这里利用csshack专门给ie6定高~而ie6有个特性即盒子放不下内容时盒子会被自动撑大*/background-color:#b00;border:1pxsolid#e8e8e8;float:right;}