账号通
    

账号  

密码  

164043

查看

253

回复
主题:★★追求网站完美者必看★★用DIV+CSS的方法去掉科讯官方幻灯默认的那个框框 [收藏主题] 转到:  
孤风大虾 当前离线

1700

主题

7

广播

118

粉丝
添加关注
级别:高一年

用户积分:10218 分
登录次数:451 次
注册时间:2006/3/28
最后登录:2022/3/10
孤风大虾 发表于:2009/6/7 18:44:00   | 只看该作者 查看该作者主题 楼主 

先前我做了一个去掉边框的FLASH幻灯,下载的人很多,说明大家对这个还是有需要的。但是问题是,我是用官方的幻灯FLASH源文件逆转过来的,所以造成了一些不协调的地方,比如数字变形等。这个文件我自己都不怎么用-_-||||


 


今天设计一个网站又要用到幻灯,但是这个边框实在是太难看了,怎么办呢?突然我灵机一动,既然修改源文件不行,是否可以通过其他的手段来完成呢?说干就干,用我擅长的div+css来完成吧!


 


效果演示:


 



此主题相关图片如下:left_nav_01a.jpg
left_nav_01a.jpg


 


首先,在模板里需要放置幻灯的地方插入如下代码:


以下内容只有回复后才可以浏览,请先登录!


 


说明,在最外面的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;}
  #huandeng div { width:442px; height:222px;margin:-1px 0 0 -1px;}


[/replyview]


当然,宽度和高度根据你的需要要进行调整。


 


另外,在科讯后台设置幻灯的话,宽度和高度按照第二层的div的宽度和高度设置。这个很重要哦!第一个使用边框的是按照span的宽度和高度设置。


 


本教程由菏泽网站建设提供,菏泽地方网络工作室提供 虚拟主机 域名注册 域名快速备案 网站制作等业务。


 


新网互联分销平台www.difangla.com 全程无人值守开启空间域名!只要有支付宝就能用哦!


 


域名快速备案详情请点击http://www.hezewangzhan.com/news/list_497.html


 


 


 


=============================


 


下面发另外一名科讯网友的解决方法,他这个解决方法和我的解决方法不一致,但是也能够解决问题。只是同样是用DIV+CSS,从不同角度去思考的不同解决方法。下面附上原帖。


 


=============================


 



科汛系统中的FLASH幻灯1的边缘黑色去除方法可能有很多种包括flash反编译后修改FLASH,span块定义去除,今天我给大家一个方法是就用一句CSS代码就解决的方法:

首先在幻灯片标签前面加<div></div>

如我本来的是<div class="slide">{LB_首页幻灯}</div>
现在应该改成:<div class="slide">
<div></div>{LB_首页幻灯} </div>

然后在CSS定义中加入这么一行即可:

[replyview]
.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像素的不妥。使用我的方法则没有这个遗憾。但是,如果你需要设计一个单线的边框,这种解决方法则比我的解决方法要简洁一些。

 

总结:我的方法适合更多状况的运用,如设计更加丰富的图片边框等,这位网友的方法非常简单,适合需要变换幻灯片边框颜色的科讯使用者。

 

在这里我希望大家能够多多的将自己的使用经验心得分享出来,让更多的科讯新手可以更加快速的适应科讯的使用。在这里再次祝福科讯CMS越来越好。

 

刚刚仔细看了下,在另外一点上,使用这位网友提供的方法,可以显示标题,而我的方法是不能显示标题的。


 
  支持(1) | 反对(0) 回到顶部顶端 回到底部底部
wsbpx 当前离线

9

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:145 分
登录次数:37 次
注册时间:2010/4/23
最后登录:2017/11/8
wsbpx 发表于:2010/6/13 15:30:00   | 只看该作者 查看该作者主题 沙发 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
uaidc888 当前离线

330

主题

0

广播

0

粉丝
添加关注
级别:三年级

用户积分:1425 分
登录次数:1 次
注册时间:2010/6/12
最后登录:2010/6/19
uaidc888 发表于:2010/6/13 15:05:00   | 只看该作者 查看该作者主题 藤椅 
科汛在线考试系统(NET)
记号记号,下次用得着!
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
samyong1104 当前离线

25

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:158 分
登录次数:51 次
注册时间:2010/4/8
最后登录:2015/12/18
samyong1104 发表于:2010/6/12 17:06:00   | 只看该作者 查看该作者主题 板凳 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
xinyefeng 当前离线

16

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:41 分
登录次数:9 次
注册时间:2010/2/4
最后登录:2010/7/3
xinyefeng 发表于:2010/6/10 16:29:00   | 只看该作者 查看该作者主题 报纸 
科汛在线商城系统(NET)
教育厅将一条具有可,哭,
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
wahaha888 当前离线

65

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:33 分
登录次数:14 次
注册时间:2010/5/30
最后登录:2010/7/25
wahaha888 发表于:2010/6/5 15:32:00   | 只看该作者 查看该作者主题 地板 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
lover66 当前离线

19

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:35 分
登录次数:5 次
注册时间:2010/5/18
最后登录:2010/6/7
lover66 发表于:2010/6/5 13:33:00   | 只看该作者 查看该作者主题 7楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
hldsti7o 当前离线

67

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:295 分
登录次数:1 次
注册时间:2010/6/1
最后登录:2010/6/3
hldsti7o 发表于:2010/6/1 19:50:00   | 只看该作者 查看该作者主题 8楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
ruijing 当前离线

1

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:25 分
登录次数:1 次
注册时间:2010/5/30
最后登录:2010/5/30
ruijing 发表于:2010/5/30 17:07:00   | 只看该作者 查看该作者主题 9楼 
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
fdjzsb 当前离线

40

主题

0

广播

0

粉丝
添加关注
级别:学前班

用户积分:220 分
登录次数:2 次
注册时间:2010/5/28
最后登录:2010/6/9
fdjzsb 发表于:2010/5/28 17:34:00   | 只看该作者 查看该作者主题 10楼 
 楼主 真是太好了, 多谢 共享!
 
  支持(0) | 反对(0) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.25781秒 powered by KesionCMS 9.0