css中的zoom的作用

zoom这个特性是IE特有的属性。
zoom:1;一般是拿来解决IE6的子元素浮动时候父元素不随着自动扩大的问题,功能相当于overflow:auto,同样也可以用height:1%来代替zoom:1。所以一般要在浮动元素的父元素加上overflow:auto;zoom:1;。这样,子元素浮动,父元素再也不会不自动跟子元素扩大了。

在现代浏览器,如果子元素float,则父元素不会自动被撑开

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width:200px;
}

#floatbox {
float: left;
width: 100px;
height: 100px;
border: 1px solid #0000FF;
background: #00FF00;
}
</style>

 

如果给父元素加上overflow:hidden

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width:200px;
zoom:1;
overflow:hidden;
}

 

或者给最后一个子元素加上clear:both

#nofloatbox > div:nth-child(2){
clear:both;
}

 

都会有清除浮动的效果.

 

zoom:1是针对ie的属性,可以激活hasLayout属性,关于hasLayout

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在InternetExplorer中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念,渲染引擎采用了 hasLayout 的属性,属性值可以为true或false。当一个元素的 hasLayout属性值为true时,我们说这个元素有一个布局(layout)

 

要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清楚的概念。大多IE下的显示错误,就是源于 haslayout。如果它设置成了true,它就不得不去渲染它自己,因此元素不得不扩展去包含它的流出的内容。例如浮动或者很长很长的没有截断的单词,如果haslayout没有被设置成true,那么元素得依靠某个祖先元素来渲染它。这就是很多的ie bugs诞生的地方。

 

#nofloatbox {
border: 1px solid #FF0000;
background: #CCC;
width:200px;
zoom:1;
/*overflow:hidden;*/
}


<body>
<div id="nofloatbox">
<div id="floatbox"></div>
<div></div>
</div>

CSS3 box-sizing 属性

当你设置一个元素为 box-sizing: border-box; 时,此元素的内边距和边框不再会增加它的宽度。这里有一个例子,两个元素都设置了 box-sizing: border-box; :

.simple {
  width: 500px;
  margin: 20px auto;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border: solid blue 10px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

搜狗截图15年06月16日1030_3

既然没有比这更好的方法,一些CSS开发者想要页面上所有的元素都有如此表现。所以开发者们把以下CSS代码放在他们页面上:

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

这样可以确保所有的元素都会用这种更直观的方式排版。

既然 box-sizing 是个很新的属性,目前你还应该像我之前在例子中那样使用 -webkit-和 -moz- 前缀。这可以启用特定浏览器实验中的特性。同时记住它是支持IE8+。

JTBC网站内容管理系统

JTBC网站内容管理系统是一套可对现有模块进行扩充与克隆的网站系统核心,
采用UTF-8编码,采取 语言/代码/程序 两两分离的技术模式。

JTBC是什么?
JTBC是一个CMS产品,她可以帮助您快速的建立网站应用而不需要太多的专业知识。

使用JTBC需要支付费用吗?
不管您制作的是个人网站,还是公司或者企业网站,又或者是赢利性网站,使用JTBC都是免费的,不收取任何费用。

我为什么要选择JTBC,她有哪些优势?
JTBC的优势主要在于以下几点:

  1. JTBC是开源,免费的,这意味着您使用程序不需要为此支付任何费用。
  2. JTBC是跨平台的,有ASP/PHP/ASP.NET/JAVA四种开发环境,这意味着您只需了解JTBC即可在多环境下开发网站。
  3. JTBC是安全的,自发布以来JTBC暂未出现过任何程序上的重大安全问题,这意味着您不需要再为网站安全而担心。

使用JTBC需要了解哪些专业技术?

  1. 如果做为最终使用用户,则不需要任何的专业技术知识,只需对电脑操作有一定了解,就可以登录网站后台进行日常维护,比如添加新闻,查看客户留言等。
  2. 如果做为网站应用的搭建者,则需要了解一些域名,服务器,FTP上传,数据库连接等知识,将JTBC程序放置到服务器后进行简单的设置后即可使用。
  3. 如果做为网站栏目与视觉的设计者,则需要了解一些HTML与CSS的知识,再对JTBC的使用方法进行一些了解,即可方便的将网站程序修改成自己所希望的样子,如果使用者对程序与数据库也有了解,则更佳。

我以前使用JTBC制作的网站忘记密码了,应该怎么处理?
可以按照所使用的程序版本,下载一份最新的原版程序,然后分别打开老网站的数据库和原版的数据库,将老数据库中的管理员表(admin)删除,将原版数据库中对应的表复制进去即可恢复默认的用户名和密码的状态。

我在后台修改了网站模板,但是为什么不生效?
这个原因是因为JTBC会缓存网站中的模板,可以在后台的系统缓存管理中,删除全部缓存即可生效。

我的一个空间上放置了2份JTBC程序,为什么会相互冲突?
这个原因是因为JTBC使用了高速缓存来存储一些配置以及模板等文件,同时运行2个JTBC会引起高速缓存名称相同,因此才出现冲突的情况,解决的办法是修改其中1个网站程序的参数(appName)使其拥有独立的名称即可。

win7下IIS的安装和配置 图文教程

Windows7安装IIS
win7下IIS的安装和配置 图文教程,需要的朋友可以参考下

最近工作需要IIS,自己的电脑又是Windows7系统,找了下安装的方法,已经安装成功。在博客里记录一下,给需要的朋友,也是给自己留个备份,毕竟我脑子不是很好使。

一、首先是安装IIS。打开控制面板,找到“程序与功能”,点进去

Windows7安装IIS

二、点击左侧“打开或关闭Windows功能”

Windows7安装IIS

三、找到“Internet 信息服务”,按照下图打勾即可

Windows7安装IIS

等待安装完成

Windows7安装IIS

四、安装完成后,再回到控制面板里面,找到“管理工具”,点进入

五、双击“Internet 信息服务(IIS)管理器”就是IIS了。如果经常需要使用IIS的朋友,建议鼠标指到“Internet 信息服务(IIS)管理器”上,右键--发送到--桌面快捷方式,这样就能从桌面进入IIS,而不用每次都点控制面板。

IIS界面:

Windows7安装IIS

六、选中“Default Web Site”,双击中间的“ASP”

Windows7安装IIS

把“启用父路径”改为“True”

Windows7安装IIS

七、下面就是配置站点了。单击右侧“高级设置”

Windows7安装IIS

选择你网站的目录

Windows7安装IIS

八、回到IIS,单击右侧的“绑定...”,选中你要绑定的网站,点“编辑”

Windows7安装IIS

如果是一台电脑,只修改后面的端口号就行,可以随意修改数字。如果是办公室局域网,点击下拉框,选择自己电脑上的局域网IP,例如:192.168.**.**,然后修改端口号

Windows7安装IIS

九、回到IIS,如果右侧显示停止,就选择启动,然后点击下面的浏览网站,就可以打开你绑定文件夹里面的网站了

Windows7安装IIS

十、如果有多个网站,在IIS左边“网站”右键“添加网站”

Windows7安装IIS

主要修改三个地方,“网站名称”、“物理路径”、“端口”,如果局域网,请修改“IP地址”,同上

Windows7安装IIS

十一、添加好后,点击新建的网站名字,就是这个网站的详情了。

Windows7安装IIS

通过以上教程,大家对win7下IIS的安装和配置应该有所了解了,更多相关配置与使用,相信大家在以后使用过程中,慢慢就会了解。

css overflow溢出隐藏(文字溢出时的自动隐藏处理)

overflow 属性说明:

版本:CSS2  兼容性:IE4+ NS6+ 继承性:无
语法:overflow : visible | auto | hidden | scroll

相关参数说明如下:

visible::不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效。
auto:此为body对象和textrea的默认值。在需要时剪切内容并添加滚动条
hidden:不显示超过对象尺寸的内容。
scroll:总是显示滚动条。

使用说明及要点:

◎ 检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
◎ 设置textarea对象为hidden值将隐藏其滚动条。
◎ 对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到◎ 右边或左边(视direction属性设置而定)的单元格。
◎ 自IE5开始,此属性在MAC平台上可用。 对应的脚本特性为overflow。

示例:

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }

text-overflow版本:IE6+专有属性 继承性:无

div 溢出隐藏 div文字溢出用点(省略号)代替

在div布局中内容溢出了容器,超出了容器所限定的宽度应该怎么办呢?很是疑惑,于是搜集整理一番,发现可以让内容超出容器时超出部分显示省略号,这种做法不仅解决了问题,而且很美观,好了,不多说了,有兴趣的朋友可以参考下

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>div中溢出文字用点代替的代码</title>
<style type="text/css">
/*<![CDATA[*/
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</body>
</html>

TD也可以溢出隐藏显示

 

或许我这篇文章一取这样的名字,就会有人要问了:你怎么还在关注table啊,那早就过时了…赶紧Xhtml…div好…ul好…ol好…dl好…完了,不知道还有什么好了。

table真的过时了么?你真的了解table么?你真的会用table么?

打口水仗不是我们要做的,留给那些时间很充裕的人吧。

言归正传:

不记得是什么时候,有人在用table模拟DataGrid的时候说,为什么td超出设置为固定宽度的文字不能隐藏,而是会直接换行呢?

是的,事实确实如此,如:
代码如下:

<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table:TD也玩overflow:hidden">
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台,突出的性价比,漂亮的外观</td>
</tr>
</table>

 

运行如上代码,你会发现单元格里超过固定宽度的文字不会被隐藏掉,而是换行显示了,显然,这并不是我的本意。

看起来,这似乎是table的一个特性,它不能很好的支持{width:*px;white-space:nowrap;overflow:hidden;}的组合,说到底就是white-space:nowrap这个东东没起作用,所以看起来overflow:hidden就失效了。{注:如果是一连串的无意义字符则可生效,例如:<td>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>,这个时候就不需要{white-space:nowrap}来强制它在一行内显示,因为这一连串的a会被认定为是一个字而不发生换行,从而超出.col1宽度的a会被隐藏}

[解决方案一:]

后来有人提到使用百分比宽度就可以了,经测试,确实可以,稍微将第一段的其中几行样式修改一下,其它的不变:

代码如下:
.col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}

 

将修改后的代码运行后,会发现,超出宽度的文字果然被隐藏了,想要的效果似乎得到了。

事实上使用百分比宽度确实可以解决这个文字隐藏的问题,但这似乎并不是想要的最佳的解决方案,因为有的时候我们需要的是一个固定的宽度,而不是百分比宽度。

而这一切的根源就在于如何使得单元格内的文字不换行在一行内显示。

[解决方案二:]

要达到这个要求,除了使用样式,我们也许还会想到一个许久不用了的标签<nobr>,这个元素的作用就是强制内容在一行显示。以上代码做如下修改,其它则不变:

代码如下:
<table border="1" cellspacing="0" summary="回头来看看Table:TD也玩overflow:hidden">
<tr>
<td><nobr>神舟 优雅Q400N</nobr></td>
<td><nobr>优雅Q400N,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td>
<td><nobr>迅驰4平台,突出的性价比,漂亮的外观</nobr></td>
</tr>
</table>

 

做了这个修改,会发现,效果确实达到,是不是该兴奋呢?不,这似乎还不是最佳的解决方案,因为毕竟使用了一个许久不用且不推荐使用的元素标记,这多少让人觉得有点不爽。

沿着这个思路,我换了一个角度来考虑这个问题,发现问题迎刃而解。

既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap,那么我们在固定宽度的单元格内再加一个标记元素呢?

最佳方案:

代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table:TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;table-layout:fixed;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th><strong>产品名称</strong></th>
<th><strong>产品介绍</strong></th>
<th><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N,2007年7月上市,采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台,突出的性价比,漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>

 

运行上面的代码,会发现这样的做法是可以的,而且从代码的简洁性、可读性和合理性几方面来说,都较前几种方案为好。

{还没有做过给单元格隐藏超过固定宽度内容的同学,可先在机器上玩玩,然后再来看本文}

其实table是一个有趣,可玩性很高东东。我们不应该带着有色眼睛去看它,因为它有它存在的道理。

之后会继续写一些关于table的文章,也作自娱之用。

ecshop新添商品提示"此商品不存在规格,请为其添加规格"的解决方法

ecshop新添商品提示"此商品不存在规格,请为其添加规格"的解决方法

因为业务需求,网站新增了案例展示功能,同时添加了商品类型,在新增案例,提交后,会显示"此商品不存在规格,请为其添加规格"的提示。

经过对添加商品相关文件的分析,终于找到了解决方法,只需在 /admin/includes/lib_goods.php文件中添加一行代码AND a.attr_type = 1,添加位置如下:

/**
 * 检查单个商品是否存在规格
 *
 * @param   int        $goods_id          商品id
 * @return  bool                          true,存在;false,不存在
 */
function check_goods_specifications_exist($goods_id)
{
    $goods_id = intval($goods_id);

    $sql = "SELECT COUNT(a.attr_id)
            FROM " .$GLOBALS['ecs']->table('attribute'). " AS a, " .$GLOBALS['ecs']->table('goods'). " AS g
            WHERE a.cat_id = g.goods_type
            AND g.goods_id = '$goods_id'
            AND a.attr_type = 1";
    $count = $GLOBALS['db']->getOne($sql);

    if ($count > 0)
    {
        return true;    //存在
    }
    else
    {
        return false;    //不存在
    }
}

请注意
AND g.goods_id = '$goods_id'
AND a.attr_type = 1";
这两行代码部分。

在修改前,请注意备份原文件,以防不测。

通过以上修改后,就解决了新添商品提示"此商品不存在规格,请为其添加规格"的问题。

asp版jtbc中文章或产品模块detail模板的缩略图调用方法

asp版jtbc中文章或产品模块detail模板的缩略图调用方法

因建站需求,需要在jtbc文章详细页显示缩略图,可在jtbc默认的情况下无法调用,现影子通过研究,得出以下方法:

首先找到 articlecommonincfilesmodule_config.asp 文件

在函数 jtbc_cms_module_detail()中
在tmpstr = Replace(tmpstr, "{$topic}", ttpoic)行下面添加

tmpstr = Replace(tmpstr, "{$image}",  htmlencode(get_str(rs(cfname("image")))))
这样在detail模板就可以通过{$image} 调用产品缩略图了。

 

Image Optimizer使用教程

Image Optimizer跟JPEG Optimizer同一家公司所出版的影像最佳化软件,可以将JPG、GIF、PNG、BMP、TIF等图型影像文件利用Image Optimizer独特的MagiCompress压缩技术最佳化。可以在不影响图型影像品质状况下将图型影像减肥,最高可减少50%以上图型影像文件大小,让你腾出更多网页空间和减少网页下载时间。Image Optimizer完全给与使用者自行控制图型影像最佳化,可自行设定压缩率外,也附有即时预览功能,可以即时预览图型影像压缩减肥后的品质。另外,也可利用内建的批次精灵功能(Batch Wizard)一次将大量的影像文件最佳化。

使用教程:
  单击左侧的“优化图像”按钮,就可以看到Image Optimizer打开了一个新窗口,里面会出现经过优化的图像。同时打开“压缩图像”对话框。在新打开的优化后的图像窗口的上方可以看到优化后图像文件的大小:优化后图片大小减小了很多,优化前(BMP格式)为2329 KB,优化后(JPG格式)为98 KB,效果惊人,而图片质量却没有明显下降。在“压缩图像”对话框中,我们可以选择输出文件的格式,根据格式的不同还可以手动选择压缩比(对于JPEG格式)或者颜色数目(对于GIF和PNG格式),以获得更好的压缩效果。此时,在程序窗口的右下角状态栏中还可以看到目前的图像文件使用28.8Kbps解调器下载所需的时间,这对于网页设计人员来说很有帮助。

  首先,我们来看看JPG的压缩,在“JPEG质量”栏中,可通过调节滑杆观察“优化后”窗口中图像的变化,来寻找一个图像质量和图像大小的最佳平衡点,一般来说,将质量设定为80,然后点击右侧的那根小魔棒(AutoCompress,自动压缩),Image Optimizer开始对JPEG图像进行自动再压缩。如果你还不太满意,可以左右拖拉MagiCompression(魔术压缩)滑杆,根据图像效果选择一个魔术压缩的平衡点。

  在“压缩图像”面板上,还有几个复选框,它们的作用如下:“高色彩”复选框使文件能包含一些额外的色彩信息,质量也会稍好一些,但图像体积稍大;“渐进”复选框可以为你生成一个渐进的JPEG图像,所谓渐进,就是在较慢的网络接入中,允许在浏览器上先显示一个质量很低的JPEG图像,然后逐渐由模糊到清晰,显示质量逐渐提高。这是一项十分实用的技术;“灰度”复选框将图像转变为灰度图像;“注释”复选框可以在输出图像中保留注释信息。压缩完毕,将图像存储为一个JPEG文件即可。

另外,我们来压缩一个GIF或PNG文件,看看它与JPEG压缩有什么不同。它调整的“颜色数量”滑杆,值为2~256,选择一个最佳平衡点;“抖动”是GIF压缩中一项十分有用的技术。由于GIF 和PNG只有256种颜色,因此,在表现一些含有丰富色彩信息的照片图像或含有平缓过度色的图像时,就会出现梯田状的条形色块,这时,我们就需要用到“抖动”功能,该 功能可以模仿一些在调色板无法找到的颜色,从而使得整个图像颜色与颜色之间的过渡更为自然,不过,使用“抖动”功能后会使图像尺寸变大;选择“交错式”复选框可以生成一个交织的GIF图像,尽管这会使GIF图像有少许变大,但它能够让图像在浏览器上看起来比非交织的GIF图像显示得更快一些。这项技术与JPEG的渐进十分相似,即允许在浏览器上生成一个质量较低的图像,并由模糊到清晰。

  通过以上步骤,我们就可以成功地优化图像文件了。当然,如您对优化结果有更高的要求,还可以使用去除图像中的网点、选择优化区域等较高级的功能。

批量优化图像

  如果一幅一幅地来进行优化是非常麻烦的。此时,“批量优化”功能就可大显身手了,让Image Optimizer按照统一的优化标准,把多个图像一次优化完成。

  单击工具栏上的“批处理”,打开如图所示的批量优化窗口,单击“添加文件”按钮,浏览目标文件夹并选择所有需要优化的图片文件,然后单击“打开”按钮。或者单击“添加文件夹”按钮将一个目录下的图片都添加进来;接下来单击“下一步”,并在新窗口内选择输出文件的格式、相关参数,并指定输出文件保存的目录(默认为C:),最好使用和源文件不同的目录,以方便区分。

注册码:60782

网站头部随滚动条浮动功能实现(非JS)

经常看到一些网站,头部随滚动条浮动效果,
在这里影子分享一下,无需JS实现头部随滚动条浮动效果的方法:
这里我们使用div层的技巧配合position的值 fixed来共同实现。
先看一下 position的值 fixed的介绍:
生成绝对定位的元素,相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

我们可以利用绝对定位功能,相对浏览器顶部进行定位,保持一定的距离,即使窗口变化,也可以保持相对位置不变,而网站内容可以正常变动。
看下下面这个例子:
代码如下:





活动测试文件



浮动内容

其它内容

源代码:请直接查看源代码即可!

在例子中,我们利用一个盒子包含两个盒子,外部的盒子css设置
padding-top: 86px;
内边框,浮动的盒子,设置相对位置及层的高度
position: fixed;
z-index: 100;
以此来实现浮动层随滚动条浮动效果,根据此,可以实现更多功能。

wordpress设置的ICP备案号如何在前台显示

wordpress这个流行博客程序,在进入中国也学会了入乡随俗,新版的wordpress中文版,在后台设置常规面板最下方新增了一行输入备案号的选项,如图:

大家在看到这个时,新奇之余,一定也在想,在前台如何显示出来。

如果你是新版wordpress程序安装,就可以直接使用默认主题,会自动显示出来。

如果你是自己的主题,则可以看下面的方法:

在需要显示备案号的地方,添加以下代码即可。

< ?php echo get_option('zh_cn_l10n_icp_num');?>   

通过这个方法,大家就可以自由的调用后台设置的备案号了,现在动手去添加吧。

当然,比较熟悉php和wordpress的朋友,也可以自行在主题设置里添加输入备案号的功能设置,更加个性的实现。

wordpress设置的ICP备案号如何在前台显示,到此解决。

文章虽短,如果不清楚的同学,一样会帮上你大忙的,赶快去试一下吧。