CSS几个示例

最新推荐文章于 2022-06-24 08:54:18 发布

daoger

最新推荐文章于 2022-06-24 08:54:18 发布

阅读量121

点赞数

分类专栏：随便看看文章标签： CSS HTML Microsoft

本文链接：https://blog.csdn.net/daoger/article/details/83481121

版权

随便看看专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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>

daoger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS几个示例

1.GridSystem页面布局[code="html"]/* reset */html{color:#666;background:#FFF;}body{text-align:center;font:13px/1.7 Verdana, Simsun, Arial, Helvetica, "Microsoft YaHei", Mingliu;}body,div,...
复制链接

扫一扫