页面/CSS
Jul 19
原作者:Alex Robinson
原文标题:Equal Height Columns

这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法,大多采用背景图填充、加JS脚本的方法使列的高度相同,本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码:


#wrap{
overflow: hidden;
}


#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}


实现原理:

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom(足够大的值)到列的块元素 。

应用margin-bottom(足够大的值)到列的块元素。

padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。
Jun 21
                                                                                                                                    

红色和粉红色,以及它们的16进制代码。

#990033 #CC6699 #FF6699 #FF3366 #993366 #CC0066 #CC0033 #FF0066 #FF0033 #CC3399
#FF3399 #FF9999 #FF99CC #FF0099 #CC3366 #FF66CC #FF33CC #FFCCFF #FF99FF #FF00CC

紫红色,以及它们的16  è¿›åˆ¶ä»£ç ã€‚

#FF66FF #CC33CC #CC00FF #FF33FF #CC99FF #9900CC #FF00FF #CC66FF #990099 #CC0099
#CC33FF #CC99CC #990066 #993399 #CC66CC #CC00CC #663366      
蓝色,以及它们的16进制代码。
#660099 #666FF #000CC #9933CC #666699 #660066 #333366 #0066CC #9900FF #333399
#99CCFF #9933FF #330099 #6699FF #9966CC #3300CC #003366 #330033 #3300FF #6699CC
#663399 #3333FF #006699 #6633CC #3333CC #3399CC #6600CC #0066FF #0099CC #9966FF
#0033FF #66CCFF #330066 #3366FF #3399FF #6600FF #3366CC #003399 #6633FF #000066
#0099FF #CCCCFF #000033 #33CCFF #9999FF #0000FF #00CCFF #9999CC #000099 #6666CC
#0033CC                  
黄色、褐色、玫瑰色和橙色,以及它们的16进制代码。
#FFFFCC #FFCC00 #CC99090 #663300 #FF6600 #663333 #CC6666 #FF6666 #FF0000 #FFFF99
#FFCC66 #FF9900 #FF9966 #CC3300 #996666 #FFCCCC #660000 #FF3300 #FF6666 #FFCC33
#CC6600 #FF6633 #996633 #CC9999 #FF3333 #990000 #CC9966 #FFFF33 #CC9933 #993300
#FF9933 #330000 #993333 #CC3333 #CC0000 #FFCC99 #FFFF00 #996600 #CC6633  
绿色,以及它们的16进制代码。
#99FFFF #33CCCC #00CC99 #99FF99 #009966 #33FF33 #33FF00 #99CC33 #CCC33 #66FFFF
#66CCCC #66FFCC #66FF66 #009933 #00CC33 #66FF00 #336600 #33300 #33FFFF #339999
#99FFCC #339933 #33FF66 #33CC33 #99FF00 #669900 #666600 #00FFFF #336666 #00FF99
#99CC99 #00FF66 #66FF33 #66CC00 #99CC00 #999933 #00CCCC #006666 #339966 #66FF99
#CCFFCC #00FF00 #00CC00 #CCFF66 #CCCC66 #009999 #003333 #006633 #33FF99 #CCFF99
#66CC33 #33CC00 #CCFF33 #666633 #669999 #00FFCC #336633 #33CC66 #99FF66 #006600
#339900 #CCFF00 #999966 #99CCCC #33FFCC #669966 #00CC66 #99FF33 #003300 #99CC66
#999900 #CCCC99 #CCFFFF #33CC99 #66CC66 #66CC99 #00FF33 #009900 #669900 #669933
#CCCC00                  
白色、灰色和黑色,以及它们的16进制代码。
#FFFFF #CCCCCC #999999 #666666 #333333 #000000        
16色和它们的16进制代码。
Aqua Black Fuchsia Gray Gree Lime Maroon Navy Olive Purple
Red Silver Teal White Yellow Blue
Apr 27
转载  eWebEditor使用说明[转载] 收藏

声明:本文非我所写,只是为了方便阅读和整理资料的需要,写在空间里.文章版权归原作者所有.

安装:

安装是非常容易的,首先你要做的就是把eWebEditor文件上传到你的网站,请按以下步骤进行:

   1. 从eWebEditor产品网站下载最新的版本。
   2. 解压下载下来的压缩文件到你本机(确定eWebEditor内的目录文件结构层次保持与压缩文件内一致)。
   3. 在你的站点上建一个新文件夹,如:/eWebEditor/(最好在要目录下,调用更方便)。
   4. 把eWebEditor在的所有文件及目录上传到你站点刚才建立的文件夹中。
   5. 运行例子文件(http://www.yoursite.com/ewebeditor/example/test.asp),看是否运行正常。OK。

设置:

eWebEditor带有后台管理功能,你可以方便对样式,上传文件等进行管理。设置请注意:

    * 后台管理的登录地址:http://www.yoursite.com/ewebeditor/admin_login.asp
    * 第一次安装请用默认用户admin和密码admin登陆后台,并进入管理页面更改管理用户和密码
    * 建议安装好后,更改数据库名字,以免别人恶意下载,默认数据名为db/ewebeditor.mdb,更改名字后请修改include /startup.asp文件中相关连接
    * 系统自带有几个标准样式,不允许修改,在你新增样式时,最好先预览,然后通过“拷贝标准样式”的方式,以达到快速新增样式的目的,且不易出错

调用:

eWebEditor的调用是非常简单,基本上只是在原来的使用中加入一行代码。

标准调用:

<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>

参数说明:

    * /ewebeditor.asp应改为你实际安装的路径
    * 参数id:相关联的表单项名,也就是提交保存页要引用的表单项名,多个调用时,请保证id不同,可参见后面例子
    * 参数style:使用的样式名,可以是标准的样式名或自定义的样式名,如果使用标准standard可留空
    * width,height:根据实际需要设置,eWebEditor将自动调整与其适应
    * 在后台管理中,可以得到每个样式的最佳调用代码

所有入口参数:(即:eWebEditor.asp?后面的参数)

    * id:相关联的保存编辑内容的表单项名,也就是提交保存页要引用的表单项名
    * style:使用的样式名,可以是标准的样式名或自定义的样式名,如果使用标准standard可留空
    * originalfilename:相关联的保存上传原文件名列表的表单项名,必须是input类型,可以带onchange事件[例子]
    * savefilename:相关联的保存上传保存文件名列表的表单项名,必须是input类型,可以带onchange事件[例子]
    * savepathfilename:相关联的保存上传保存文件名(带路径)列表的表单项名,必须是 input类型,可以带onchange事件[例子]

例子:新增表单

你原来可能是:

<textarea name="content1" rows=10 cols=50></textarea>


现在是:

<input type="hidden" name="content1" value="">
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>


或者

<textarea name="content1" style="display:none"></textarea>
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>


例子:修改表单

你原来可能是:

<textarea name="content1" rows=10 cols=50><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>


现在是:

<input type="hidden" name="content1" value="<%=Server.HTMLEncode(oRs("D_Content"))%>">
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>


或者

<textarea name="content1" style="display:none"><%=Server.HTMLEncode(oRs("D_Content"))%></textarea>
<iframe ID="eWebEditor1" src="/ewebeditor.asp?id=content1&style=standard" frameborder="0" scrolling="no" width="500" HEIGHT="350"></iframe>


注意事项:

    * eWebEditor允许在同一表单里有多个,但请保证id在整个网页中是唯一的。即如果已经用了input name=content1第二个调用就要input name=content2之类的。
    * 在使用textarea作为原表单项时,要加入style="display:none"。
    * 在input修改时一定要用value="",而不是value=''。
    * 一定要在动态加入value值时用Server.HTMLEncode()进行处理,否则有可能内容被截掉。
    * <%@ Page Language="C#" AutoEventWireup="true" CodeFile="eWebEditor.aspx.cs" Inherits="admin_eWebEditor" validateRequest=false%>将此设为False,关闭验证,可使文章顺利提交。

高级调用:

eWebEditor还提供了一些高级调用的方法,如下,但请保证大小写一致:

    * getHTML():返回编辑器的内容
    * setHTML( html ):设置编辑器的内容
    * insertHTML( html ):在当前选择处插入内容
    * appendHTML( html ):在文档末尾追加内容
    * setMode( NewMode ):改变当前编辑状态
      å‚æ•°NewMode:
          o "CODE":代码状态
          o "EDIT":编辑状态
          o "TEXT":文本状态
          o "VIEW":预览状态

使用例子如下:

<Script Language=JavaScript>
// 取编辑器内容
var sHTML = eWebEditor1.getHTML();
// 设置编辑器内容
eWebEditor1.setHTML('<b>Hello My World!</b>');
// 在当前选择处理插入
eWebEditor1.insertHTML('This is Insert Function!');
// 在尾部追加内容
eWebEditor1.appendHTML('This is Append Function!');
// 改变编辑器状态为代码编辑状态
eWebEditor1.setMode('CODE');
</Script>

取值说明:

由于eWebEditor有对大表单进行自动处理,所以在取值时有些不同,具体如下:

原来是

<%
sContent = Request.Form("content1")
%>

现在是

<%
For i = 1 To Request.Form("content1").Count
        sContent = sContent & Request.Form("content1")(i)
Next
%>

接口:弹窗调用说明:

v2.7.5版本后加入了弹窗调用接口的扩充功能,能实现通过一个链接弹窗打开编辑器,并将编辑的内容保存入指定的表单域。

在eWebEditor根目录下文件名为PopUp.asp,提供的接口传入参数如下:

    * style : 样式名
    * form : 要返回或设置值的表单form名
    * field : 要返回或设置值的表单项textarea名

使用例子如下:

<HTML>
<BODY>
<Script Language=JavaScript>
function eWebEditorPopUp(style, form, field) {
        var oPopUp = window.open("PopUp.asp?style="+style+"&form="+form+"&field="+field, "PopUp"+form+field, "toolbar=no,location=no,directories=no,status=yes,menubar=no,scrollbars=yes,resizable=yes");
}
</Script>
<FORM ACTION="" METHOD="" NAME="myForm">
<TEXTAREA NAME="myField" COLS="50" ROWS="5"></TEXTAREA>
<INPUT TYPE="BUTTON" VALUE="HTML编辑" ONCLICK="eWebEditorPopUp('s_popup', 'myForm', 'myField')">
</FORM>
</BODY>
</HTML>

接口:前台解释(限制)扩充功能说明:

此功能禁用某些标签,如出于安全考虑的Script标签,等。各版本可能有所不同,请参看实际文件中的说明:

    * Function eWebEditor_DeCode(s_Content, sFilters) s_Content : 要转换的数据字符串
    * s_Filters : 要过滤掉的格式集,用逗号分隔多个

使用例子如下:
先包含扩展功能文件,以下路径相应更改

<!--#include file = "Include/DeCode.asp"-->
<%
' 此例只过滤SCRIPT标签,即意味着内容中的客户端脚本不会生效,您可根据实际的需要加入其它标签。
sContent = eWebEditor_DeCode(sContent, "SCRIPT")
%>

Aug 13
这个根本页面的高度调整iframe的高度。只对IE有效.
<iframe name="ifrName" src="targetName.htm" frameborder=false scrolling="auto" width="100%" height="100%" frameborder=no onload="document.all['ifrName'].style.height=ifrName.document.body.scrollHeight" ></iframe>



parent.document.all("框架ID名").style.height=document.body.scrollHeight;
parent.document.all("框架ID名").style.width=document.body.scrollWidth;
这里的 框架ID名 就是Iframe的ID,比如:
<IFRAME id="框架ID名" name="left" frameBorder=0 scrolling=no src="XXX.asp" width="100%"></IFRAME>
Jul 6
论坛的帖子显示IE跟FireFox下显示不一样,原来IE7以下不支min-height,挺闷的。

设死的情况下IE自动增高,FireFox又只显示一半。

最终找到解决方案:


两者都显示正常! [点击图片可在新窗口打开]
Pages: 1/2 First page 1 2 Next page Final page [ View by Articles | List ]