1.GridSystem页面布局
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<style type="text/css">
/* reset */
html{color:#666;background:#FFF;}
body{text-align:center;font:13px/1.7 Verdana, Simsun, Arial, Helvetica, "Microsoft YaHei", Mingliu;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;table-layout:fixed;width:100%;}
img{border:none;}
li{list-style:none;}
img,object,textarea{vertical-align:top;}
input,select,button{vertical-align:middle;}
button{height:24px;*padding:0 3px;overflow:visible;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6,input,textarea,select,address,caption,cite,code,dfn,em,th,var,abbr,acronym{font-size:100%;font-style:normal;}
q:before,q:after{content:"";}
legend{color:#000;}
ins{text-decoration:none;}
div{padding:0;margin:0;zoom:1;}
div:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
/* common */
.page{margin:0 auto;text-align:left;}
.float_left{float:left;}
.float_right{float:right;}
.txt_left{text-align:left;}
.txt_center{text-align:center;}
.txt_right{text-align:right;}
.clear_both{clear:both;}
.module{margin:0 5px;margin-bottom:10px;padding:5px;border:1px solid #ccc;}
/* 960 grid 24 colums */
.grid_1{width:40px;}
.grid_2{width:80px;}
.grid_3{width:120px;}
.grid_4{width:160px;}
.grid_5{width:200px;}
.grid_6{width:240px;}
.grid_7{width:280px;}
.grid_8{width:320px;}
.grid_9{width:360px;}
.grid_10{width:400px;}
.grid_11{width:440px;}
.grid_12{width:480px;}
.grid_13{width:520px;}
.grid_14{width:560px;}
.grid_15{width:600px;}
.grid_16{width:640px;}
.grid_17{width:680px;}
.grid_18{width:720px;}
.grid_19{width:760px;}
.grid_20{width:800px;}
.grid_21{width:840px;}
.grid_22{width:880px;}
.grid_23{width:920px;}
.grid_24{width:960px;}
</style>
</head>
<body>
<div id="hd">
<div class="page grid_24">
<div class="masthead module txt_right">
<a href="http://www.v-ec.com">VEC</a>·<a href="http://www.w3cgroup.com">W3CGroup</a>·<a href="http://www.easyui.org.cn">EasyUI</a>·<a href="http://www.jslab.org.cn">JSLab</a>
</div>
<div class="logo module">
<a href="http://www.v-ec.com"><img src="http://www.v-ec.com/ijc/vec_logo.png" alt="v-ec.com"></a>
</div>
<div class="search module txt_center">
<form action="?">
<label>grid_24</label>
<input type="text" />
<button type="submit">搜索</button>
</form>
</div>
</div>
</div>
<div id="bd">
<div class="page grid_24">
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
<div class="grid_16 float_left">
<div class="grid_11 float_left">
<div class="module"><p>grid_11</p></div>
</div>
<div class="grid_5 float_left">
<div class="module"><p>grid_5</p></div>
</div>
<div class="grid_16 clear_both">
<div class="module"><p>grid_16</p></div>
</div>
</div>
</div>
<div class="page grid_24">
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
<div class="grid_11 float_left">
<div class="module">
<p>grid_11</p>
</div>
</div>
<div class="grid_5 float_left">
<div class="module">
<p>grid_5</p>
</div>
</div>
</div>
<div class="page grid_24">
<div class="grid_19 float_left">
<div class="module">
<p>grid_19</p>
</div>
</div>
<div class="grid_5 float_left">
<div class="module">
<p>grid_5</p>
</div>
</div>
</div>
<div class="page grid_24">
<div class="grid_16 float_left">
<div class="module">
<p>grid_16</p>
</div>
</div>
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
</div>
<div class="page grid_24">
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
</div>
<div class="page grid_24">
<div class="grid_8 float_left">
<div class="module">
<p>grid_8</p>
</div>
</div>
<div class="grid_16 float_left">
<div class="module">
<p>grid_16</p>
</div>
</div>
</div>
</div>
<div id="ft">
<div class="page grid_24">
<div class="module txt_center">
<p>Copyright © 1998 - 2009 W3CGroup. All Rights Reserved</p>
</div>
</div>
</div>
</body>
</html>
2.CSS style 三角
<style type="text/css">
span {
width: 0px;
height: 0px;
}
span.left {
border-left: 90px solid white;
border-bottom: 160px solid red;
}
span.right {
border-right: 90px solid white;
border-bottom: 160px solid red;
}
</style>
<div align="center">
<span class="left"></span>
<span class="right"></span>
</div>
3.css中使用js代码确定位置
<style type="text/css">
#postBar {
position:fixed;
left:0px;
bottom:0;
_position:absolute;
_top:expression(document.documentElement.clientHeight + document.documentElement.scrollTop - this.offsetHeight);
}
</style>
4.DIV列表表格布局
<style type="text/css">
#test{width:290px;background:#eee;}
#test ul{overflow:hidden;zoom:1;margin:0;padding:0 5px 10px 5px;}
#test li{display:inline;float:left;width:60px;height:60px;margin:10px 5px 0;list-style:none;background:#333;}
</style>
<div id="test">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
<li>fff</li>
<li>ggg</li>
<li>hhh</li>
</ul>
</div>
分享到：
相关推荐
只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题...
CSS特效,reset.css 转载白鹿本人写的CSS中常用的 reset.css文件，用于重置html默认样式，前几天正好在论坛上看到有些CSS新手请教如何写reset.css才是最好的，其实没有最好，只能说最适合自己的网站，每个人的要求和...
列举手册的几个特征： 内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度 每个属性及其它相关内容都有可浏览的DEMO示例 手册的在线版也适当的...
map标签 定义一个客户端图像映射。... area元素永远嵌套在map元素内部。...首先用 ps 得到几个坐标： 然后代码实现： CSS Code复制内容到剪贴板 <!DOCTYPE html> <html lang=en> <head>
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
今天我们将运行几个文本阴影示例，您可以为自己的工作复制和粘贴。 基本阴影 该文字阴影属性是超级易于使用，并在所有运行良好的现代浏览器，甚至没有这么多的供应商名称！但是，使用Modernizr之类的工具，即使在旧...
4.JS+CSS通用一个页面同时三个焦点图轮换效果完整实例 5.JS+CSS网页版模拟QQ登录框界面特效示例 6.JS+flash立柱广告代码仿百度MP3搜索右侧可伸缩的立柱广告效果 7.JS版本黑色超动感二级菜单导航模块代码 穿越...
44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片个数等示例 45. jQuery演示Ajax加载并显示图片的相片画廊实例 46. jQuery版Sexy Lightbox 2.3内容修饰框插件下载(支持HTML,flash,图片,视频等) ...
1.省略简写属性值的...除了以上介绍的几种属性，还有几种属性可以单独定义各方向的边框。下面对它们进行分类介绍。 设定上边框属性： border-top，它的设置格式和border相同，依次设置宽度、样式、颜色： ......
手册的几个特征： 内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度 每个属性及其它相关内容都有可浏览的DEMO示例 手册的在线版也适当的使用了...
不错的滚动效果，压缩包内的示例包括横向和竖向两种形式的滚动，本滚动结合图片和文字，运用CSS和Javascript技术，将滚动的内容扩展至DIV标签，也就是控制某个区域的滚动，而并非是一行或几个简单图片构成的滚动。
很多时候我们用js来实现视觉效果，其实不用那么麻烦，掌握一些常用的css知识能让你事半功倍，这篇文章讲的是使用纯css来实现一个列表项的选中效果，希望对你有所帮助 先上链接，点击预览...
这几天工作中遇到一个交互需求，要求实现一个效果，当鼠标移入一个元素的时候，元素出现一个动态的边框，如图： 动态边框 思路 看到这个效果，我首先想到的是设置元素的border属性，可惜border不能设置长度，无法...
一、什么是 CSS methodologies CSS methodologies，可以理解成 设计模式，也可以理解成 css 规范，市面使用情况如下图...而下面要介绍的几种主流的 css methodologies，则可以帮你做到很好的总结和梳理。 二、常见的 C
css()方法设置或返回被选元素的一个或多个样式属性,下面有几个不错的示例，大家可以感受下
从6.0版起，AspNetPager支持使用主题（Theme）与皮肤（Skin）统一控件的整体样式，配合asp.net 2.0中的DataSource控件，AspNetPager只需要编写短短几行代码，甚至无需编写任何代码，只需设置几个属性就可以实现分页...
今天我们来说几个CSS中的伪元素,它们在项目开发中用的并不多,但确实很有用，下面有个不错的示例，大家可以感受下
其中有几项是我们经常用到的，下面我们就详细介绍一下经常用于定义链接样式的四个伪类，它们分别是： :link :visited :hover :active 因为我们要定义链接样式，所以其中必不可少的就是超级链接中的锚标签–a，锚...
仅仅几个简单的html标签和css样式？ 上有很多有意思的示例。 绘图 按理说，它不怎么该干这种事情。但这也显示了CSS的强大。 示例一： 单标签chrome logo 我们画个chrome logo吧 可以看到，基本是通过“堆叠” ...