JQUERY实战一

梁乔峰 — Wed, 24 Jun 2009 14:04:00 GMT

汗！居然有人说我写的东西是抄的，就算我写错了，讲错了，我都不会抄人家的东西的，所以放心，我这里没有转载的东西，有的都是本人的作品。所以无奈唯有加上；::梁乔峰::明镜台::原创空间::C#.NET2.0,C++技术BLOG转载请保留

前段时间写了JQUERY的学习笔记，后来发现其实没啥好写的，之前自己写过一篇感觉不怎么满意的，所以删掉了。这篇写实战吧，就以这个网站作为范例，www.seiey.com 这个也笔者近期做的网站，这个网站内实现的动画通篇都是用JQUERY实现的。应用的JQUERY的一些组件，并且做出了部分的扩扩展，网站内的JS没有加密的，至少现在没有加密呵呵，而且因为设计师要求效果比较高，所以很多都只能用PNG24的图片去实现，所以装载有但慢。
        汗，还想写下我那个实际应用的。但发现开始写的时候才想起自己，都不知道说些什么，代码贴？那个很无聊啊。内容解析。。。你只要上了那个网下载下来。。。里面有很详细的注释，并且整个页面都是HTML的。。。所以笔者在这里。。。耍下无赖。。。

        想先看到的。。。去网站哪里抓哈哈，24号上这个网的话，可能是1个星期前的不完整版本，我想明天下午才把部分的BUG。。修改了，再放上服务器。

        想学东西。。自己动手学下如何从别人网站上偷师。。。。方法--->打开IE输入网址：www.seiey.com -->页面-->另存为-->保存为HTML

梁乔峰 2009-06-24 22:04 发表评论

CSS+DIV布局心得

梁乔峰 — Mon, 25 May 2009 06:22:00 GMT

CSS+DIV布局已經變成白菜一樣了，到處都是CSS+DIV布局，去面試一個做網頁的公司，肯定會問，你會CSS+DIV布局不。到底啥是CSS+DIV布局呢？傳統上都是以用TABLE布局的，TABLE布局的要點是有兩個，第一：適當的地方合并行和列，第二：懂TABLE嵌套Table。
而且還可以直接在頁面上控制Table的高度長度。TABLE布局最大的缺點，除了沉長的TR,TD之外，言論最多的就是SEO里對Table布局的鄙視。大部分SEO人都會覺得Table布局不利于SEO優化。這點。。到真是有點關系，我試過兩個完全一樣的網站，一個是用Table布局的，我是用CSS+DIV布局的，并適當的使用了H標記，在GOOGLE搜索上，我CSS+div布局的網站要比Table布局的要靠前。。。至于為什么，那個不是本文的重點。。忽略掉。

CSS+DIV布局最大的特點就是HTML文件里的代碼相對比較少，但是也造成了瀏覽器布局問題。。網上很多人都在說，我布局在IE里顯示正常，在FF下全部變形了。其實造成這樣問題的原因是你寫的CSS并不標準，可以說你寫的CSS都是根絕IE的標準來寫的，而不是CSS2.0的國際標準，無論是IE還是FF（3.0版前的我沒留意）都是支持CSS2.0的，但是在技術上，IE有寫模糊功能，可以令到非標準的CSS布局也能正確解析，一下是我寫CSS代碼的五個習慣，我不敢說我這五個習慣都是好習慣，至少我寫的CSS布局不會產生不良效果，也就是我寫的CSS有跨l瀏覽器能力。

第一：容器類DIV必須要有5個東西{margin，padding，width，height，overflow}，什么叫容器類，就是這個DIV只是用來放內部的DIV的，也可以說是一個定位的div..例如：我們經常使用居中，一般是這樣做的

body
{
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    height: 100%;
        width: 100%;
    overflow: auto;
    text-align: center;
    display: block;
}
/*---body我是作為最頂層容器的---所以它具備了我需要的所有東西，實現的效果是居中，我加上了display: block;雖然這個是一個默認屬性，但是我們不能保證所有瀏覽器都是默認，（如果是所有瀏覽器都默認的，我自己寫個瀏覽器的默認為none的給你耍）*/
#body_Div
{
    margin: 0px auto;
    padding: 0px;
    text-align: left;
    width: 1003px;
    height:100%;
    overflow:auto;
}
/*這個是核心層，多有的元素基本都是在這個層里的，這個層也具備了我想要的屬性，text-align: left; 因為在上層我把文本對齊成為居中，所以這個層我要把它還原為左對齊margin: 0px auto; 一般IE的CSS編寫者不會有這個auto值的，在IE會自動，但是在FF如果少了auto你將會發現FF里你的核心部分不是居中的。所以要做到通用，我們就必須要加上auto值，IE也支持auto值*/

第二：浮動對象，都擁有獨立的父DIV；關于這點。。有意見的人可能不少，持有的觀點就是，“你這樣做只會令DIV過分的多，過于復雜”，其實，我也不想這樣做，但是- -！IE對于浮動對象的{margin，padding}存在BUG所以為了減少一切可能的出錯，我唯有多花費一點代碼，說實在的我只是想它更健康。這個父DIV主要作用其實就是令到內部浮動對象更可控制，這個父DIV就是一個單純的容器DIV

第三：所有的浮動都需要閉合；這個有經驗的人都知道。。用完浮動你肯定需要把它閉合掉的，不閉合，可能不同瀏覽器在解析的時候會把你的浮動變成向下默認，（可以這樣解析：就是元素內部的子元素都默認具有浮動屬性）

第四：一個行向浮動如果超過3個那么請使用UL來實現浮動

第五：靈活使用類選擇，我個人的做法是，所有的id選擇器都是用于布局的，類選擇器都是用于呈現效果的，這樣做的好處就是，當你想要的效果出現問題的時候，更快速地找到錯誤。這個是我有意識的把“架構”和“內容”分離。

明鏡臺

梁乔峰 2009-05-25 14:22 发表评论

C++博客-::梁乔峰::明镜台::原创空间::C#.NET2.0,C++技术BLOG-随笔分类-CSS+DIV

JQUERY实战一

CSS+DIV布局心得