用CSS取代TABLE
来源:互联网 发布:钉钉软件缺点 编辑:程序博客网 时间:2024/04/29 01:37
今天上了discuz的网站, http://www.supesite.com/index.php?action=home 看了它的首页,随手查看了一下它的源文件,结果发现discuz真是牛,全部用CSS设计的,没用一个table,很了不起啊.
我一直觉得CSS的定位很难,我做网站的时候用它老是偏掉,对不齐. 它就不会.
而且这个首页的源码还极牛,最上部分的一个导航我没查到它的文字在哪儿,结果发现body的最下面,用了一个Script.
<script type="text/javascript" src="http://www.discuz.com/products_nav/products_nav.js"></script>
就用迅雷下下来,看看原文件,果真这个script 就是最上部的导航条.
看看product_nav,js源文件吧:
var navCSS = document.createElement('link');
document.getElementsByTagName('head')[0].appendChild(navCSS);
navCSS.rel = 'stylesheet';
navCSS.type = 'text/css';
navCSS.href = 'http://www.discuz.com/products_nav/products_nav.css';
var navDiv = document.createElement('div');
navDiv.id = 'products_nav';
document.body.appendChild(navDiv);
navDiv.innerHTML = '<label><a href="http://www.comsenz.com" target="_blank" title="Comsenz Inc.">Comsenz</a></label><ul><li class="first"><a href="http://www.discuz.com/download" target="_blank">Discuz!</a></li><li><a href="http://www.discuznt.com" target="_blank">Discuz!NT</a></li><li><a href="http://www.supesite.com" target="_blank">SupeSite / X-Space</a></li><li><a href="http://www.5d6d.com" target="_blank">5d6d</a></li><li><a href="http://www.phpchina.com" target="_blank">PHPChina</a></li></ul></div>';
document.body.style.borderTop = '29px solid #EDEEEE';
document.getElementsByTagName('head')[0].appendChild(navCSS);
navCSS.rel = 'stylesheet';
navCSS.type = 'text/css';
navCSS.href = 'http://www.discuz.com/products_nav/products_nav.css';
var navDiv = document.createElement('div');
navDiv.id = 'products_nav';
document.body.appendChild(navDiv);
navDiv.innerHTML = '<label><a href="http://www.comsenz.com" target="_blank" title="Comsenz Inc.">Comsenz</a></label><ul><li class="first"><a href="http://www.discuz.com/download" target="_blank">Discuz!</a></li><li><a href="http://www.discuznt.com" target="_blank">Discuz!NT</a></li><li><a href="http://www.supesite.com" target="_blank">SupeSite / X-Space</a></li><li><a href="http://www.5d6d.com" target="_blank">5d6d</a></li><li><a href="http://www.phpchina.com" target="_blank">PHPChina</a></li></ul></div>';
document.body.style.borderTop = '29px solid #EDEEEE';
它先定义一个CSS,再建立一个Div,用document.body.appendChild加入,结果就能加到最上部了.(后来者居上啊).在家里上网网速比较快,如果网速慢,这个DIV应该是最后显示出来,网页会不会抖一下啊?
再看看首页的CSS文件,都是一个容器一个容器的做,看来也不难,多数用的都是DIV H2 UL LI 等容器,定义的也就是文字,背景,高度之类的,我们公司要做不同的模板,不懂用CSS能否实现,如果可以,程序可以少写很多.
明天再去看看163的blog,它就可以换肤,看它是怎么样实现的.今天给妞妞的blog换肤了,换了一个挺可爱BB型的.
#header {...}{
BACKGROUND: url(images/corner.gif) #0f559e no-repeat 0px 79px; HEIGHT: 84px
}
#header H2 {...}{
MARGIN: 0px
}
#header H2 A {...}{
BACKGROUND: url(images/site_logo.gif) #fff no-repeat 10px 50%; FLOAT: left; OVERFLOW: hidden; WIDTH: 265px; TEXT-INDENT: -9999px; HEIGHT: 79px
}
BACKGROUND: url(images/corner.gif) #0f559e no-repeat 0px 79px; HEIGHT: 84px
}
#header H2 {...}{
MARGIN: 0px
}
#header H2 A {...}{
BACKGROUND: url(images/site_logo.gif) #fff no-repeat 10px 50%; FLOAT: left; OVERFLOW: hidden; WIDTH: 265px; TEXT-INDENT: -9999px; HEIGHT: 79px
}
#footer {...}{
BORDER-TOP: #f8f8f8 5px solid; MARGIN-TOP: 1px; PADDING-LEFT: 230px; BACKGROUND: url(images/comsenz_logo_gray.gif) no-repeat 0px 100%
}
#footer P {...}{
PADDING-LEFT: 10px; MARGIN: 12px 0px 0px; FONT: 10px/20px Verdana, Arial, Helvetica, sans-serif; BORDER-LEFT: #c5c5d8 1px solid; COLOR: #666
}
#footer A {...}{
COLOR: #666; TEXT-DECORATION: underline
}
BORDER-TOP: #f8f8f8 5px solid; MARGIN-TOP: 1px; PADDING-LEFT: 230px; BACKGROUND: url(images/comsenz_logo_gray.gif) no-repeat 0px 100%
}
#footer P {...}{
PADDING-LEFT: 10px; MARGIN: 12px 0px 0px; FONT: 10px/20px Verdana, Arial, Helvetica, sans-serif; BORDER-LEFT: #c5c5d8 1px solid; COLOR: #666
}
#footer A {...}{
COLOR: #666; TEXT-DECORATION: underline
}
- 用CSS取代TABLE
- 用CSS取代传统布局揭秘尝新
- 用DIV+css写Table
- 用css将table翻转
- CSS TABLE
- css table
- table css
- CSS---<table>
- table css
- 【css】table
- table css
- table的align被什么取代
- 现在的table已经被取代了。。?
- 用CSS 而不是Table来制作圆角框
- 用div+css实现table效果
- 用CSS为table添加边框
- 用css来设置table的border
- 用CSS实现table细边框
- Linux必学的60个命令(3)-系统管理
- Linux必学的60个命令(4)-网络操作
- SqlHelper
- .NET开发人员应该下载的十个必备工具
- 为什么OGRE程序以窗口模式运行会出错?
- 用CSS取代TABLE
- 在c#中实现3层架构
- .Net平台开发的技术规范与实践精华总结
- Asp.net中数字、日期的格式化问题
- DXperience 7.2.2 for VS2005
- DXperience 6.3.7 for VS2003
- [DirectX开发学习日记]第一个DirectX程序及相关基础概念-(02)
- linux下调试core
- Flash格式及其产生的手段