|
主题:★★追求网站完美者必看★★用DIV+CSS的方法去掉科讯官方幻灯默认的那个框框 [收藏主题] | 转到: |
先前我做了一个去掉边框的FLASH幻灯,下载的人很多,说明大家对这个还是有需要的。但是问题是,我是用官方的幻灯FLASH源文件逆转过来的,所以造成了一些不协调的地方,比如数字变形等。这个文件我自己都不怎么用-_-||||
今天设计一个网站又要用到幻灯,但是这个边框实在是太难看了,怎么办呢?突然我灵机一动,既然修改源文件不行,是否可以通过其他的手段来完成呢?说干就干,用我擅长的div+css来完成吧!
效果演示:
首先,在模板里需要放置幻灯的地方插入如下代码: 以下内容只有回复后才可以浏览,请先登录!
说明,在最外面的DIV加了一个背景,这个背景是一个边框,我自己设计的幻灯边框。
第二个div是为了固定住幻灯的大小,让幻灯显示为宽度430,高度210。这个很重要,最重要的是,要隐藏溢出,外填充是为了确定好位置。
第三个用了span,这里为什么用span?从语法上讲说不过去,但是用div的话,就需要重新给样式了,这样比较麻烦,因此选择了这个span
用span,因为是行内元素,要赋予他盒子属性必须先块状化,所以用display:block;,然后宽度和高度都比第二层的div宽2像素,其实,就是那个边框所占据的位置。利用外填充,将他向左向上移动一像素,正好遮住了左边和上面的边框。而第二层比第三层少2像素,下面的和右边的当然也遮住了。这就是为什么第二层要使用隐藏溢出overflow:hidden;属性的缘故。
OK,通过这样的设计,这个恼人的边框就没有了。当然,你如果懂CSS的话,可以根据我的思路自己灵活变换,如果你不懂CSS,而又要简单的来实现的话,也很简单。上面这个我是用了自己设计的幻灯边框的,如果你不用这个边框,那么就可以精简一下,精简的这个比较通用,你可以任意复制过去,不需要任何div+css的基础。
HTML代码: [replyview] <div id="huandeng"><div>{LB_网站幻灯}</div></div>
CSS代码:
#huandeng { width:440px; height:220px;overflow:hidden;} [/replyview] 当然,宽度和高度根据你的需要要进行调整。
另外,在科讯后台设置幻灯的话,宽度和高度按照第二层的div的宽度和高度设置。这个很重要哦!第一个使用边框的是按照span的宽度和高度设置。
本教程由菏泽网站建设提供,菏泽地方网络工作室提供 虚拟主机 域名注册 域名快速备案 网站制作等业务。
新网互联分销平台www.difangla.com 全程无人值守开启空间域名!只要有支付宝就能用哦!
域名快速备案详情请点击http://www.hezewangzhan.com/news/list_497.html
=============================
下面发另外一名科讯网友的解决方法,他这个解决方法和我的解决方法不一致,但是也能够解决问题。只是同样是用DIV+CSS,从不同角度去思考的不同解决方法。下面附上原帖。
=============================
科汛系统中的FLASH幻灯1的边缘黑色去除方法可能有很多种包括flash反编译后修改FLASH,span块定义去除,今天我给大家一个方法是就用一句CSS代码就解决的方法: .slide div { width:253px;height:386px;z-index: 9999;background:#transparent;position: absolute;padding:0;border:1px solid #ffd5d5;} [/replyview] 我的css中的SLIDE定义是: .slide{float:left;width:255px;} 也就是说上面的.slide div中的width:253px;是你建立那个幻灯标签的时候填写的宽度减去2px,高度height:386px;是你建立那个幻灯标签的时候填写的高度+18px(为什么呢?因为幻灯下面的文字展示官方默认是20px前去要覆盖在上面的2PX同宽度性质一样) 是不是很简单呢?具体原理就是在幻灯片上面再建立一层移动的层覆盖在幻灯片上面,然后给这个层描边苗个边的色彩border:1px solid #ffd5d5; 这个色彩根据你的实际需要的颜色确定! |
|
支持(1) | 反对(0) 顶端 底部 |
支持(0) | 反对(0) 顶端 底部 |
<上一主题 | 下一主题 > |