• Css限制文本长度，运用Text-Overflow

    by{ guangboo }, published {2009-07-26}, Tag { css / }

    页面显示一段文字的时候，我们不希望他换行，又不想让他超出一定长度的时候，我们经常会在后台将过长的文字截取前面一段，然后在后面加上"..."。然而这样做，搜索引擎就搜索不到那段被截掉的文字了。有些人使用JS来实现同样的效果，将多余的文字截取，这样做成本太高。其实CSS就又这样的功能。只要很简单的代码，就可以在几乎所有浏览器下使用。当然在IE下更简单。

    .txt{
	overflow:hidden;//隐藏多余的文字
	white-space:nowrap;//保证文字不换行
	text-overflow:ellipsis;//文字后加"..." clip表示什么都不加
	width:60%;//宽度，也可以用PX,不过用百分比的话，容易看出效果。
}

    只要在div 的class上设置改类就行了，这个类只能在IE中使用，其实其他FF，opera也有自己的解决方法，下面是同样的类：

    .txt{
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;          /* for IE */
	-o-text-overflow: ellipsis;      /* for Opera */
	-icab-text-overflow: ellipsis;   /* for iCab */
	-khtml-text-overflow: ellipsis;  /* for Konqueror Safari */
	-moz-text-overflow: ellipsis;    /* for Firefox,mozilla */
	-webkit-text-overflow: ellipsis; /* for Safari,Swift*/
	width:60%
}

    基本非IE的浏览器的私有属性都会以-xxx-这样开始，-o-就是以Presto为引擎的 Opera私有的、-icab-是iCab私有的，-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）、-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）、-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。
    对于FF也可以使用这个：
    .txt:after{content:"...";padding-left:3px;font-size:12px;}/* for Firefox */

    这样使用的时候就可以放心使用了。

    因为这是CSS3标准，很多浏览器还不支持，了解更多请去CSS3.INFO

  • 【转】对Div和Table运用的理解

    by{ guangboo }, published {2009-07-20}, Tag { css / HTML / }

    对DIV和Table运用的理解,大家都有不同的看法,本人看资料及自己开发的经验作如下总结,希望对迷茫的朋友有帮助! 网页布局一直是WEBpage开发人员关注的内容,从早期table构架页面到DIV再到DIV＋Table，可以说我们的需求一直在变，但是目的一直没有改变。Why?，很明显从简单到复杂，再从复杂到简单；从简单运用到复杂运用；一切都是围绕需求性来做的。很多开发设计人员在从事页面布局开发的时候都要考虑到几点：布局是否合理，结构是否紧凑，是否有充分的扩展性，可读性是否强。而合理使用Table和DIV来构架我们的web是我们探讨的一个重要问题。对此要从几个不同的方位来看待:

    一.定位。

    首先，严格意义来说，table和div都是可用合理的布局方法，你不能否认table的价值，或者div只有优点没有缺点。可以说web架构即可以使用table也可以div。那么关键就是你对你的web需求的定位。　我们需要考虑到web页面给我们的站点会带来多大的影响。如我们的站点针对的海量的访问，海量的数据，（当然cache问题这里不讨论）那么在构架上通常会减少table使用量，尤其是大量的循环的时候，当然table也是有用的。对于复杂的站点来说，div+css有时候很难准确定义出我们所表达的内容这时候table就是很好的选择。这也是开发前要考虑的问题，在要达到开发目的的同时保证所需要的成本。同样用div+css来实现一个结构复杂的page时往往不如用一个table就能简单得搞定。

    二.特性。

    table和div有其各自得特征。这也意味着他们价值取向有不同，对于开发设计的人员来说很重要的。 table可以很容易建立起结构化的界面，通过table自身的参数定义，我们能把页面布局很快定义成我们所需要的效果。当然css的配合就可以相对减少。缺点就是扩展性和可读性相对较差，扩展性差表现在维护和修正上面，一个复杂的table布局的站点，她的海量页面在随着需求变化下，开发人员将一筹莫展，大量的修改需求会把web的界面开发工作彻底粉碎。可读性差，这个也是相对来说. 从web设计来说，给技术人员最大的一个障碍便是当table容器内内容过多时，使页面的加载时间增加，因为浏览器首先要加载标签，而在加载到 之前，table里的内容不会显示。也就是说，当涉及到双列或三列布局时，给技术人员制造了很大的麻烦。单单从布局上来说，表格是不具有优势的。 div呢，在html语法中我们知道div的含有和作用，如果用它来实现布局页面的话，几乎完全要靠css来支撑，可以说div不能单独使用，尤其是针对性强的web，给用户视觉上的效果要求十分严格，div的使用要配合专业的css参数来实现。从前面的例子可以看出div布局更加灵活，能简单也能够复杂。相同的显示效果在css和div的配合上可以产生不同的搭配方式。扩展性强是她的优点，开发设计人员只要对相应的css做调整就能让布局焕然一新，这点是table远远不及的。但在对结构相对复杂的局部，往往div+css开发难度高，一个简单效果div和css要写半天，这点table就好很多了，用dw之类的所见即所得的软件下我们可以轻易做出用div+css写半天才能做出的东西。

    三.兼容 　

    这是每个website的一个重要课题，浏览器的兼容问题。table和div在兼容问题中，table更具有优势。 　　

    我们常用的ie，火狐浏览器对div css设置上非常挑剔，往往同一个css在2种浏览器上会有不同的结果，对开发人员来说是个可怕的问题。我们不可能对用户的浏览器进行排斥，因此只有通过在开发的时候调整我们的语法和布局方法。div要求我们严格css支持，而table可以不用考虑这么多。table的严谨在不同浏览器中得到了很好的表现。 　　在考虑我们的定位，特征，兼容问题后，如何布局，采用何种构架方案我想大家心里应该都很清楚了，我想说对于真正的开发者来说善用其利是最重要的理念。而不是一味偏好，或者体现自己技术能力来做开发设计工作。对于div我们可以充分发挥其灵活清晰的架构特性，配合table的严谨来实现各种webpage的需求。

  • Dynamically Loading An External Javascript Or Css File

    by{ guangboo }, published {2007-11-22}, Tag { Javascript / css / HTML / } 
    <head>
    <link type="text/css" rel="stylesheet" href="style/style.css"/>  
    <script type="text/javascript" src="js/jsFile.js"></script>
</head>

    We commonly load external javascript (*.js) or css (*.css) file on the page with the above way,doesn't we? Actually, we can make use of javascript and DOM implementing dynamically loading those files.We can use operating DOM method to achieve it.For example, load an external javascript file and an external css file with the following function.

     

    function requireFile(fileName, fileType){
    var ref;
    if(fileType == "js"){
        ref = document.createElement("script");
        ref.setAttribute("type", "text/javascript");
        ref.setAttribute("src", fileName);
    }
    if(fileType == "css"){
        ref = document.createElement("link");
        ref.setAttribute("type", "text/css");
        ref.setAttribute("rel", "stylesheet");
        ref.setAttribute("href", fileName);
    }
    document.getElementsByTagName("head")[0].appendChild(ref);
}

    Then. we can use requireFile("js/js.js", "js") to dynamically load js/js.js file or requireFile("style/style.css", "css") to dynamically load style.css file.

    That's OK!