Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码, ASP代码, 精选JS代码, WORDPRESS, 网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 | 酷码资源 » div http://www.3code.cn Wordpress外贸企业主题, Wp企业主题, wordpress企业主题, wordpress主题定制, PHP代码,ASP代码,精选JS代码,WORDPRESS,网站SEO,Flash焦点广告,JS焦点广告,CSS技巧 Sat, 04 Sep 2010 16:44:46 +0000 http://wordpress.org/?v=2.8.5 zh-cn hourly 1 DIV+CSS英文网站优化 http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/ http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/#comments Thu, 29 Jul 2010 15:53:54 +0000 admin http://www.3code.cn/?p=1809 什么是Div+CSS标准?
Div+CSS的标准化设计到底有什么好处?

Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。如果单独使用 DIV 而不加任何 CSS, 那么它在网页中的效果和使用是一样的。

DIV本身就是容器性质的,你不但可以内嵌table还可以内嵌文本和其它的HTML代码
CSS是 Cascading style Sheets的简称，中文译作“层叠样式表单”，在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。网上冲浪无论你用Internet Explorer还是Netscape Navigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。不管你用什么工具软件制作网页，都有在有意无意地使用 CSS。用好CSS能使你的网页更加简炼，同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB。

Div+CSS标准的优点:
1.大大缩减页面代码，提高页面浏览速度,缩减带宽成本;
2.结构清晰，容易被搜索引擎搜索到，天生优化了seo
3.缩短改版时间。只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。
4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，LX不再需要用FONT标签或者透明的1 px GIF图片来控制标题，改变字体颜色，字体样式等等。
5.CSS非常容易编写。你可以象写html代码一样轻松地编写CSS。
6.提高易用性。使用CSS可以结构化HTML，例如：

标签只用来控制段落，heading标签只用来控制标题，table标签只用来表现格式化的数据等等。你可以增加更多的用户而不需要建立独立的版本。
7.可以一次设计，随处发布。你的设计不仅仅用于web浏览器，也可以发布在其他设备上，比如PowerPoint。
8.更好的控制页面布局。不用多说。
9.表现和内容相分离。将设计部分剥离出来放在一个独立样式文件中，你可以减少未来网页无效的可能。
10.更方便搜索引擎的搜索。用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到你的内容，并可能给你一个较高的评价(ranking)。
11.Table 布局灵活性不大，你只能遵循 table tr td 的格式。而div 你可以 div ul li 也可以 ol li 还可以 ul li ……但标准语法最好有序的写。
12.另外如果你不是javascrput的高手，你可以不必去写ID，只用class就可以。当客户端程序员写完程序，需要调整时候，你可以在利用他的ID进行控制。
13.Table 中布局中，垃圾代码会很多，一些修饰的样式及布局的代码混合一起，很不利于直观。而Div 更能体现样式和结构相分离，结构的重构性强。
14.在几乎所有的浏览器上都可以使用。
15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
16.使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
17.你可以轻松地控制页面的布局 。
18.你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。

]]> http://www.3code.cn/divcss%e8%8b%b1%e6%96%87%e7%bd%91%e7%ab%99%e4%bc%98%e5%8c%96/feed/ 0 DIV层拖动 http://www.3code.cn/div-drag/ http://www.3code.cn/div-drag/#comments Tue, 20 Apr 2010 06:08:44 +0000 admin http://www.3code.cn/?p=1615 <style type="text/css">
.MoveDivContent
{
position: absolute;

width: 600px;
height: 200px;
border: 2px #507CD1 solid;
background: #EFF3FB;
cursor:pointer;
}
.MoveDivTitle
{
width: 600px;
line-height: 25px;
text-align: left;
background: #507CD1;
color:#FFFFFF;
cursor: move;
}
</style>

<script language="javascript" type="text/javascript">
/*
调用方法:var myDrag=new Endrag(source,target,offSetX, offSetY);
参数说明:source--鼠标动作绑定对象;target--操作目标对象(要移动的对象);offSetX--横坐标偏移;offSetY--纵坐标偏移
说明:通过多次调用本方法绑定多个对象的拖动
*/
funs = {
index: 100,
getFocus: function(target) {
if (target.style.zIndex != this.index) {
this.index += 2;
var idx = this.index;
target.style.zIndex = idx;
}
},
abs: function(element) {
var result = { x: element.offsetLeft, y: element.offsetTop };
element = element.offsetParent;
while (element) {
result.x += element.offsetLeft;
result.y += element.offsetTop;
element = element.offsetParent;
}
return result;
}
};

function Endrag(source, target, offSetX, offSetY) {
source = typeof (source) == "object" ? source : document.getElementById(source);
target = typeof (target) == "object" ? target : document.getElementById(target);
var x0 = 0, y0 = 0, x1 = 0, y1 = 0, moveable = false, index = 100, NS = (navigator.appName == 'Netscape');
offSetX = typeof offSetX == "undefined" ? 0 : offSetX;
offSetY = typeof offSetY == "undefined" ? 0 : offSetY;
source.onmousedown = function(e) {
e = e ? e : (window.event ? window.event : null);
funs.getFocus(target);
if (e.button == (NS) ? 0 : 1) {
if (!NS) { this.setCapture() }
x0 = e.clientX;
y0 = e.clientY;
x1 = parseInt(funs.abs(target).x);
y1 = parseInt(funs.abs(target).y);
moveable = true;
}
};
//拖动;
source.onmousemove = function(e) {
e = e ? e : (window.event ? window.event : null);
if (moveable) {
target.style.left = (x1 + e.clientX - x0 - offSetX) + "px";
target.style.top = (y1 + e.clientY - y0 - offSetY) + "px";
}
};
//停止拖动;
source.onmouseup = function(e) {
if (moveable) {
if (!NS) { this.releaseCapture(); }
moveable = false;
}
};
}
</script>

<div style="background-color:#666666; width:400px; height:300px; z-index:1000000; position:relative; overflow:hidden;">
<div id="MoveDiv">adasdza</div>
</div>
<script type="text/javascript">
moveTag();
function moveTag() {
var i = new Endrag('MoveDiv', 'MoveDiv', 0, 0);
}
</script>

]]> http://www.3code.cn/div-drag/feed/ 0 绝对定位的DIV位置不随分辨率变化而变化 http://www.3code.cn/div-abs/ http://www.3code.cn/div-abs/#comments Wed, 27 Jan 2010 11:02:32 +0000 admin http://www.3code.cn/?p=1523 绝对定位的DIV位置不随分辨率变化而变化

<div style="z-index:50; position:absolute;top:240px;left:30%;margin:-100px 0 0 -100px;">这里你可以放任何内容</div>

]]> http://www.3code.cn/div-abs/feed/ 0 JS Div Scroll Bar用层模拟滚动条 http://www.3code.cn/js-div-scroll-bar/ http://www.3code.cn/js-div-scroll-bar/#comments Thu, 14 Jan 2010 07:38:52 +0000 admin http://www.3code.cn/?p=1493 JS Div Scroll Bar用层模拟滚动条(ie, firefox下测试通过)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>
<META http-equiv=Content-Type content="text/html; charset=gbk"><LINK
rev=stylesheet href="scroll/marketcenter.css" type=text/css
rel=stylesheet>
<META content="MSHTML 6.00.5730.13" name=GENERATOR></HEAD>
<BODY>
<DIV id=content>
<DIV>
<DIV></DIV>
<DIV id=roll style="POSITION: relative"><!--Scrollbar begin-->
<DIV id=Scrollbar-Container-1>
<DIV-Up></DIV>
<DIV-Down></DIV>
<DIV-Track>
<DIV-Handle></DIV></DIV></DIV>
<!--Scrollbar end--><!--Container begin-->
<DIV>
<DIV id=Scroller-1>
<DIV-Container>
<DIV>
<DL>
adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>adadad<br>
dadasd<br>
dad<br>
fa<br>

</DL></DIV></DIV></DIV></DIV>
<!--Container end--></DIV></DIV></DIV>

<SCRIPT src="scroll/scroll.js" type=text/javascript></SCRIPT>
</BODY></HTML>

JS与CSS文件去这里下载：http://www.3code.cn/download/scroll.rar

]]> http://www.3code.cn/js-div-scroll-bar/feed/ 0 在firefox与IE下DIV+CSS Padding效果不同的解决方法 http://www.3code.cn/firefox-ie-divcss-padding/ http://www.3code.cn/firefox-ie-divcss-padding/#comments Mon, 21 Dec 2009 05:48:01 +0000 admin http://www.3code.cn/?p=1371 <div style="padding-top:5px;width:200px;height:15px;background-color:#ffeeee"> test </div>
以上代码在IE中和firefox会有不同的效果.最主要原因是firefox解释padding-top与IE的效果不同

fixfox对DIV总高度是padding-top+height的,而IE中,padding-top是包含在height中的,

要解决这一个矛盾,可以利用!important

padding-top:5px;
height:10px !important;
height:15px;

以上定义了两个height, 其中一个后面加了!important , IE将会忽略这个属性,而使用后面的height:15px; 而firefox却不会忽略这个属性, 直接使用height:10px

这样就可以很巧妙的解决这个问题

]]> http://www.3code.cn/firefox-ie-divcss-padding/feed/ 3 DIV相对于父DIV底部对齐 http://www.3code.cn/div-subdiv/ http://www.3code.cn/div-subdiv/#comments Mon, 30 Nov 2009 07:31:00 +0000 admin http://www.3code.cn/?p=915 DIV相对于父DIV底部对齐

<style type="text/css"> .box1 {border:1px #cccccc solid;  width:500px; height:600px;position:relative;} .box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:0;} </style> <div>     <div></div> </div>

重点是：bottom:0;

]]> http://www.3code.cn/div-subdiv/feed/ 0