首先讲一个博客系统的主要功能：
1、博客系统的主页以模块为单位进行显示
2、博客的所有模块可进行自由配置显示，
3、博客的页面布局可进行自由选择，即选择几列显示、或左宽右窄之类
4、博客的皮肤可进行自己选择
5、博客的皮肤可自行定义设置（开发中）
6、博主设置类别，每一种类别有自己默认的菜单、页面布局和默认显示模块
还是一样，先上两张效果图看看：
第一张：模块配置与页面布局设置
第二张：博客风格选择
稍后将关于这个系统的代码进行分析，敬请期待！
在通常的Web页面制作中，常常需要将CSS写在独立的CSS文件中，而这些CSS需要适应最为常见的几种浏览器，自然就存在着差异。本来MS的IE和Mozilla的FIREFOX应该算是最为常用的browser了，另加google的Chrome。 这三大主流的浏览器中，firefox和chrome自然对于W3c的标准支持的最好，而MS的IE却自有一套自己的标准，自然在做CSS时，需要几者兼顾，需要知道CSS2中的属性的hack，这里就将CSS2的HACK放出来，以供需要的朋友参考。
请看下面的代码：
<div id=”main”>
<div id=”content”></div>
</div>
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
我们可以通过三种方法来解决这个问题。
一，增加一个清除浮动，让父容器知道高度。请注意，清除浮动的容器中有一个空格。
<div id=”main”>
<div id=”content”></div>
<div style=”font: 0px/0px sans-serif;clear: both;display: block”> </div>
</div>
二，增加一个容器，在代码中存在，但在视觉中不可见。
<div id=”main”>
<div id=”content”></div>
<div style=”height:1px; margin-top:-1px;clear: both;overflow:hidden;”></div>
</div>
三，增加一个BR并设置样式为clear:both。
<div id=”main”>
<div id=”content”></div>
<br style=”clear:both;” />
</div>
用来看网页DOM结构.仅在FF IE SAFRIA下有效.
javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement(‘SCRIPT’);%20scriptElem.setAttribute(‘language’,%20′JavaScript’);%20scriptElem.setAttribute(’src’,%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript(‘http://westciv.com/xray/thexray.js’);
用法.
1.复制上面一段代码。
2.随便打开个网页吧，等它加载完。
3.在地址栏粘贴一下刚才复制的东西，按回车。
4.出来一个黑框框了吧。
5.随便点一个元素看看? 是不是比FB还好用?
这个老外的东东不错。。。
css如何定位网站的footer
平时拿CSS布局都是一些内容比较多的网站,前两天用CSS+DIV弄了个内容少的页面,发现了一个小问题,可能大家都会遇到,那就是网站FOOTER的定位,如果内容比较少的话,页面的FOOTER就会随着内容的减少跑到上面去,不是乖乖的在下面呆着,害得我研究了半天找高人终于给搞定了,也算一个小小的技巧给大家分享
首先我们要在外层设定一个DIV(content <—名字可以随便定义,),让这个DIV的高度等于浏览器的高度,然后将footer这个DIV设定为content的一个子DIV ,并使用绝对定位,使它固定到content的底端;这是大概的思路,
下面是实现的方法:
<body>
<div id=”content”>
<div id=”main”>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div id=”footer”>
<h1>Footer</h1>
<div>
</div>
</body>
然后我们写下CSS:
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
首先把HTML和BODY的HEIGHT属性设为100%;保证content的高度能撑满浏览器;
然后把#content的高度也设置为100% ，但是这里我们使用了“min-height”属性，而不是的height属性，这是因为如果#main中的内容如果增加了，他的高度超过了浏览器窗口的高度，那么如果把#content的高度仍然是100%，就会导致#footer仍然定位在浏器窗口的下端，从而遮盖了#content中的内容。
而使用min-height属性的作用就是使#content的高度“至少”为浏览器窗口的高度，而当如果它里面的内容增加了，他的高度会也跟随着增加，这才是我们需要的效果。
接下来，将#content设置为相对定位，目的是使他成为它里面的#footer的定位基准
然后把#foooter设置为绝对定位，并使之贴在#main的最下端。
但是要注意，如果当我们把#footer贴在#content的最下端以后，他实际上已经和上面的#main这个div重叠了，为了避免覆盖#main 中的内容，我们在#main中设置了下侧的padding，使padding-bottom的值等于#footer的高度，就可以保证避免覆盖#main 的文字了
<style>
body,html {
margin: 0;
padding: 0;
font: 12px/1.5 arial;
height:100%;
}
#content {
min-height:100%;
position: relative;
}
#main {
padding: 10px;
height:1000px;
padding-bottom: 60px; /* 20px(font-size)x2(line-height) + 10px(padding)x2=60px*/
}
#footer {
position: absolute;
bottom: 0;
padding: 10px 0;
background-color: #AAA;
width: 100%;
}
#footer h1 {
font: 20px/2 Arial;
margin:0;
padding:0 10px;
}
</style>
<body>
<div id=”content”>
<div id=”main”>
<h1>main</h1>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
<p>你可以改变浏览器窗口的高度，来观察footer效果。</p>
<p>文字文字文字文字文字文字文字文字文字文字</p>
</div>
<div id=”footer”>
<h1>Footer</h1>
<div>
</div>
</body>
最近评论