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源代码示例(css全程指南)" 提供了一个全面的学习资源，帮助读者深入理解CSS的工作原理和应用技巧。这本书的光盘部分专门针对属性选择器提供了实践案例，这是CSS中一个非常重要的概念。 属性选择器允许我们基于...
通过分析压缩包内的文件，我们可以探讨几个重要的CSS知识点。 首先，我们看到有三个CSS文件：css练习1.css、css练习2.css和css练习3.css。这些文件很可能包含了不同的CSS样式规则，用以控制HTML文档的呈现。CSS允许...
《CSS实战手册》的内容可能涵盖以下几个主要方面： 1. **CSS基础**：包括选择器的使用，如类选择器、ID选择器、元素选择器等，以及CSS的基本语法结构，如何定义样式规则。 2. **盒模型**：讲解CSS盒模型，包括内...
接下来，我们将通过几个示例来展示这些技巧的实际应用。 1. **Validation.html** - 这可能是一个包含表单验证的例子，其中三角形可能用于指示输入项的状态，如错误或警告。通过CSS，我们可以在错误消息旁边添加一个...
在CSS的学习中，你可能会接触到以下几个关键知识点： 1. **选择器**：这是CSS的基础，用于选取你想要样式化的HTML元素，如`class`选择器、`id`选择器、标签选择器等。 2. **属性**：定义元素的样式，如`color`...
在这个示例中，CSS将用于美化和布局学生查询界面，包括： 1. 选择器与声明：通过选择器（如ID、类或标签）指定要应用样式的元素，并用花括号`{}`包裹声明，如`.container {width: 100%;}`。 2. 布局管理：利用div...
项目主要包括以下几个文件： index.html：主 HTML 文件，定义了网页的基本结构和内容。 styles.css： CSS 文件，负责网页的外观和布局。 script.js：JavaScript 文件，实现了网页的交互功能。 这些文件协同工作，...
在"html5+css示例程序"中，我们可以深入学习以下几个关键知识点： 1. HTML5新元素： - `<header>`和`<footer>`：用于定义页面头部和底部区域。 - `<nav>`：用于包含导航链接。 - `<section>`：表示文档中的独立...
只要简单的修改几个CSS文件就可以重新设计一个有成百上千页面的站点。 4.强大的字体控制和排版能力。CSS控制字体的能力比糟糕的FONT标签好多了，有了CSS，我们不再需要用FONT标签或者透明的1 px GIF图片来控制标题...
创建兼容性良好的CSS下拉菜单需要注意以下几点： 1. **层叠和定位**：CSS的`position`属性是实现下拉菜单的关键，通常设置为`relative`或`absolute`。`relative`使元素相对于其正常位置定位，而`absolute`则使其相...
在这个示例中，`<div>`将被用作各个菜单层级的容器。 CSS则负责定义这些`<div>`元素的外观和行为。通过设置适当的样式，我们可以让菜单项在鼠标悬停时显示下拉子菜单，实现响应式交互效果。CSS的关键属性包括但不...
CSS样式可以通过几种不同的方式加载到HTML中。导入样式使用标签直接在HTML文档的部分定义CSS规则；链接样式使用标签引入外部CSS文件，这种方法的好处是样式可以在多个页面中复用；行内样式通过在HTML标签内直接使用...
CSS特效,reset.css 转载白鹿本人写的CSS中常用的 reset.css文件，用于重置html默认样式，前几天正好在论坛上看到有些CSS新手请教如何写reset.css才是最好的，其实没有最好，只能说最适合自己的网站，每个人的要求和...
然而，这个示例并未提供与之对应的悬停状态样式，这可能意味着需要在实际应用中添加额外的类来处理鼠标悬停事件。 这些CSS样式可以轻松应用于HTML中的`<button>`或`<a>`元素，通过设置`class`属性来应用相应的样式...
这个名为"html+div+css的几个demo"的压缩包文件集合，显然是为了展示如何利用这些技术来创建功能丰富的网页模板。接下来，我们将深入探讨每个知识点。 1. HTML（HyperText Markup Language）：HTML是构建网页的基础...
这个压缩包文件"收藏的几个经典的css样式表示例"显然包含了几个使用CSS实现的独特设计技巧。下面我们将深入探讨其中可能涉及的知识点，特别是关于“纯css实现的圆角、山顶角”的部分。 首先，我们来讨论CSS中的圆角...
这样的CSS实现有几个优点：首先，它无需JavaScript，减少了页面加载时间；其次，它对搜索引擎友好，因为所有的链接和内容都是直接在HTML中可见的；最后，它易于理解和维护，对于熟悉CSS的开发者来说，调整样式和行为...
列举手册的几个特征： 内容包括CSS2.1和大部分CSS3 所有手册内容都写有对IE6, IE7, IE8, IE9, Firefox, Chrome, Safari, Opera支持程度 每个属性及其它相关内容都有可浏览的DEMO示例 手册的在线版也适当的...
本文将通过多个示例深入探讨CSS在HTML中的应用，帮助你理解和掌握其核心概念及技巧。 首先，我们要明白CSS如何与HTML结合。在HTML中，CSS可以通过以下三种方式引入： 1. **内部样式**：在`<head>`标签内的`<style>...
**正文** ...在压缩包中的“DIV+CSS布局”文件中，很可能会包含这些布局模式的示例代码，供学习者参考和练习。通过深入研究这些实例，你可以深化对`DIV+CSS`布局的理解，并提升自己的网页设计技能。