wangyunlei
- 浏览: 30752 次
- 性别:
- 来自: 上海
-
最新评论
CSS属性大全[说明加语法]
相关标签:
字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式 {writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补 白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值： thin|medium|thick|数值
4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|
double|inset|outset|ridge|groove}
6 边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 宽 度 {width:长度|百分比| auto}
8 高 度 {height:数值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分类列表
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
CSS样式二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>脚本控制三行三列自适应高度DIV布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
/*
------------------------------------------------
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 1.5.0
------------------------------------------------
*/
function P7_colH(){ //v1.5 by PVII-www.projectseven.com
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;
if(dA&&dA.length){
for(i=0;i<dA.length;i++){
dA[i].style.height='auto';
}
for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;
}
for(i=0;i<dA.length;i++){
if(an){
dA[i].style.height=h+'px';
}else{
P7_eqA(dA[i].id,dA[i].offsetHeight,h);
}
}
if(an){
for(i=0;i<dA.length;i++){
hh=dA[i].offsetHeight;
if(hh>h){
dA[i].style.height=(h-(hh-h))+'px';
}
}
}else{
document.p7eqa=1;
}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;
}
}
function P7_eqT(){ //v1.5 by PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();
}
}
function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
if(document.getElementById){
document.p7eqc=new Array;
for(i=0;i<arguments.length;i++){
document.p7eqc[i]=document.getElementById(arguments[i]);
}
setInterval("P7_eqT()",10);
}
}
function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
if(nh<adT){
setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);
}
}
</script>
<style type="text/css">
body {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
#header {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#mid {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#footer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#header {
BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px
}
h3 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
h5 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
#fbox {
BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
}
#mbox {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px
}
#sbox {
BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
}
p {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px
}
#footer {
CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center
}
</style>
<meta content="MSHTML 6.00.2800.1515" name="GENERATOR" />
</head>
<body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="header">
<h3>脚本控制三行三列自适应高度DIV布局</h3>
</div>
<div id="mid">
<div id="fbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
</div>
<div id="mbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
</div>
<div id="sbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
</div>
</div>
<div id="footer">
<h5>仅供演示WWW.AA25.CN</h5>
</div>
</body>
</html>
CSS样式 中国站长站头部导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国站长站 - 站长资讯 | 我们致力于为中文网站提供动力！</title>
<meta name="Keywords" content="站长,网站,资讯,站长网,站长资讯,站长工具" />
<meta name="Description" content="为站长提供及时全面的站长资讯" />
<link href="http://www.chinaz.com//images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function isMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
function ResumeError() {
return true;
}
window.onerror = ResumeError;
function $(id) {
return document.getElementById(id);
}
// 相对尺寸
function GetOffsetTop (el, p) {
var _t = el.offsetTop;
var _p = el.offsetParent;
while (_p) {
if (_p == p) break;
_t += _p.offsetTop;
_p = _p.offsetParent;
}
return _t;
};
function GetOffsetLeft (el, p) {
var _l = el.offsetLeft;
var _p = el.offsetParent;
while (_p) {
if (_p == p) break;
_l += _p.offsetLeft;
_p = _p.offsetParent;
}
return _l;
};
function showMenu (baseID, divID) {
baseID = $(baseID);
divID = $(divID);
//var l = GetOffsetLeft(baseID);
//var t = GetOffsetTop(baseID);
//divID.style.left = l + 'px';
// divID.style.top = t + baseID.offsetHeight + 'px';
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (! divID.isCreate) {
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function () {
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide () {
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur () {
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}
function doClick_down(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=4;i++){
id ="down"+i;
j = document.getElementById(id);
e = document.getElementById("d_con"+i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
function doClick_jy(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=8;i++){
id ="jy"+i;
j = document.getElementById(id);
e = document.getElementById("jy_con"+i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
function doZoom(size){
document.getElementById('textbody').style.fontSize=size+'px'
}
/// 修改及新增
function doClick_menu (o) {
o.className = 'menu_gg';
var j, id, e;
for (var i = 1; i <= 11; i++) {
id = 'menu' + i;
j = document.getElementById(id);
e = document.getElementById('menu_con' + i);
if (id != o.id) {
j.className = '';
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
var url = '';
switch (o.innerHTML) {
case '资讯':
url = '/plus/search.php?searchtype=titlekeyword&keyword=';
break;
case '源码':
url = 'http://down.chinaz.com/query.asp?q=';
break;
case '软件':
url = 'http://www.chinaz.cn/query.asp?q=';
break;
case '论坛':
url = 'http://bbs.chinaz.com/Search.html?mode=1&searchText=';
break;
case '博客':
url = 'http://my.chinaz.com/list.asp?selecttype=topic&keyword=';
break;
case '交易':
url = 'http://1m.chinaz.com/Search.asp?keyword=';
break;
case 'GOOGLE':
url = '/uploadfile/200812/2/C4141448514.gif%3BLH%3A60%3BLW%3A165%3BBGC%3Awhite%3BT%3A%23000000%3BLC%3A%230000cc%3BVLC%3A%23551A8B%3BALC%3A%23ff3300%3BGALT%3A%23008000%3BGFNT%3A%237777CC%3BGIMP%3A%23FF0000%3BDIV%3A%23000099%3BLBGC%3Awhite%3BAH%3Aleft%3B&domains=chinaz.com&sitesearch=chinaz.com&q=';
break;
case 'ALEXA':
url = 'http://alexa.chinaz.com/index.asp?domain=';
break;
case 'IP归属':
url = 'http://tool.chinaz.com/Ip/Index.asp?ip=';
break;
case 'Whois':
url = 'http://tool.chinaz.com/whois/';
break;
case '素材':
url = 'http://sc.chinaz.com/Search.aspx?page=1&SearchWord=';
break;
}
doClick_submit.url = url;
}
doClick_submit.url = '/plus/search.php?searchtype=titlekeyword&keyword=';
function doClick_submit () {
var keyword = document.getElementsByName('keyword')[0].value;
window.open(doClick_submit.url + keyword);
}
window.onload = function (){
var keyword = document.getElementsByName('keyword')[0];
keyword.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
doClick_submit();
}
};
}
</script>
</head>
<body>
<div class="container">
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="/">首页</a></li>
<li><a href="/News/Index.html" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a>
<div class="subnav disable" id="subnav1">
<p class="pointer">.</p>
<p><span>
<a href="/News/It/Index.html">业界动态</a> |
<a href="/News/Invest/Index.html">收购融资</a> |
<a href="/News/Portals/Index.html">门户动态</a> |
<a href="/News/Search/Index.html">搜索引擎</a> |
<a href="/News/Game/Index.html">网络游戏</a> |
<a href="/News/Biz/Index.html">电子商务</a> |
<a href="/News/Media/Index.html">广告传媒</a> |
<a href="/News/Soft/Index.html">厂商开发</a>
</span></p>
</div>
</li>
<li><a href="/Webmaster/Index.html" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">站长在线</a>
<div class="subnav disable" id="subnav2">
<p class="pointer">.</p>
<p><span>
<a href="/Webmaster/RecSite/Index.html">好站推荐</a> |
<a href="/Webmaster/Gather/Index.html">站长聚会</a> |
<a href="/Webmaster/Visit/Index.html">站长访谈</a> |
<a href="/Webmaster/Club/Index.html">站长茶馆</a> |
<a href="/Webmaster/Topsite/Index.html">网站排行</a>
</span></p>
</div>
</li>
<li><a href="/Webbiz/Index.html" id="nav_3" onmouseover="showMenu('nav_3','subnav3')">网站运营</a>
<div class="subnav disable" id="subnav3">
<p class="pointer">.</p>
<p><span>
<a href="/Webbiz/Exp/Index.html">建站经验</a> |
<a href="/Webbiz/BizPlan/Index.html">策划盈利</a> |
<a href="/Webbiz/Seo/Index.html">搜索优化</a> |
<a href="/Webbiz/Promot/Index.html">网站推广</a> |
<a href="/Webbiz/Free/Index.html">免费资源</a>
</span></p>
</div>
</li>
<li><a href="/Design/Index.html" id="nav_4" onmouseover="showMenu('nav_4','subnav4')">设计在线</a>
<div class="subnav disable" id="subnav4">
<p class="pointer">.</p>
<p><span>
<a href="/Design/Coolsite/Index.html">酷站推荐</a> |
<a href="/Design/Pages/Index.html">网页设计</a> |
<a href="/Design/Rules/Index.html">WEB标准</a> |
<a href="/Design/Video/Index.html">视频处理</a> |
<a href="/Design/Activity/Index.html">设计活动</a>
</span></p>
</div>
</li>
<li><a href="/Program/Index.html" id="nav_5" onmouseover="showMenu('nav_5','subnav5')">网络编程</a>
<div class="subnav disable" id="subnav5">
<p class="pointer">.</p>
<p><span>
<a href="/Program/Asp/Index.html">Asp编程</a> |
<a href="/Program/Php/Index.html">Php编程</a> |
<a href="/Program/.Net/Index.html">.Net编程</a> |
<a href="/Program/Xml/Index.html">Xml编程</a> |
<a href="/Program/Access/Index.html">Access</a> |
<a href="/Program/Mssql/Index.html">Mssql</a> |
<a href="/Program/Mysql/Index.html">Mysql</a>
</span></p>
</div>
</li>
<li><a href="/Union/Index.html" id="nav_6" onmouseover="showMenu('nav_6','subnav6')">联盟资讯</a>
<div class="subnav disable" id="subnav6">
<p class="pointer">.</p>
<p><span>
<a href="/Union/News/Index.html">联盟新闻</a> |
<a href="/Union/Intro/Index.html">联盟介绍</a> |
<a href="/Union/Comment/Index.html">联盟点评</a> |
<a href="/Union/Skill/Index.html">网赚技巧</a>
</span></p>
</div>
</li>
<li><a href="/Server/Index.html" id="nav_7" onmouseover="showMenu('nav_7','subnav7')">服务器</a>
<div class="subnav disable" id="subnav7">
<p class="pointer">.</p>
<p><span>
<a href="/Server/Web/Index.html">Web服务器</a> |
<a href="/Server/Ftp/Index.html">Ftp服务器</a> |
<a href="/Server/Mail/Index.html">Mail服务器</a> |
<a href="/Server/Dns/Index.html">Dns服务器</a> |
<a href="/Server/Win/Index.html">Win服务器</a> |
<a href="/Server/Linux/Index.html">Linux服务器</a> |
<a href="/Server/Safe/Index.html">安全防护</a>
</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
相关标签:
字体样式(Font Style)
序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 字体变形 {font-size-adjust:inherit|none}
14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}
文本样式(Text Style)
序号 中文说明 标记语法
1 行 间 距 {line-height:数值|inherit|normal;}
2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}
3 段首空格 {text-indent:数值|inherit}
4 水平对齐 {text-align:left|right|center|justify}
5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}
6 书写方式 {writing-mode:lr-tb|tb-rl}
背景样式
序号 中文说明 标记语法
1 背景颜色 {background-color:数值}
2 背景图片 {background-image: url(URL)|none}
3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
4 背景固定 {background-attachment:fixed|scroll}
5 背景定位 {background-position:数值|top|bottom|left|right|center}
6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}
框架样式(Box Style)
序号 中文说明 标记语法
1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}
2 补 白 {padding:padding-top padding-right padding-bottom padding-left}
3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}
宽度值： thin|medium|thick|数值
4 边框颜色 {border-color:数值 数值 数值 数值} 数值：分别代表top、right、bottom、left颜色值
5 边框风格 {border-style:none|hidden|inherit|dashed|solid|
double|inset|outset|ridge|groove}
6 边 框 {border:border-width border-style color}
上 边 框 {border-top:border-top-width border-style color}
右 边 框 {border-right:border-right-width border-style color}
下 边 框 {border-bottom:border-bottom-width border-style color}
左 边 框 {border-left:border-left-width border-style color}
7 宽 度 {width:长度|百分比| auto}
8 高 度 {height:数值|auto}
9 漂 浮 {float:left|right|none}
10 清 除 {clear:none|left|right|both}
分类列表
1 控制显示 {display:none|block|inline|list-item}
2 控制空白 {white-space:normal|pre|nowarp}
3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}
4 图形列表 {list-style-image:URL}
5 位置列表 {list-style-position:inside|outside}
6 目录列表 {list-style:目录样式类型|目录样式位置|url}
7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}
CSS样式二:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>脚本控制三行三列自适应高度DIV布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script type="text/javascript">
/*
------------------------------------------------
PVII Equal CSS Columns scripts
Copyright (c) 2005 Project Seven Development
www.projectseven.com
Version: 1.5.0
------------------------------------------------
*/
function P7_colH(){ //v1.5 by PVII-www.projectseven.com
var i,oh,hh,h=0,dA=document.p7eqc,an=document.p7eqa;
if(dA&&dA.length){
for(i=0;i<dA.length;i++){
dA[i].style.height='auto';
}
for(i=0;i<dA.length;i++){
oh=dA[i].offsetHeight;h=(oh>h)?oh:h;
}
for(i=0;i<dA.length;i++){
if(an){
dA[i].style.height=h+'px';
}else{
P7_eqA(dA[i].id,dA[i].offsetHeight,h);
}
}
if(an){
for(i=0;i<dA.length;i++){
hh=dA[i].offsetHeight;
if(hh>h){
dA[i].style.height=(h-(hh-h))+'px';
}
}
}else{
document.p7eqa=1;
}
document.p7eqth=document.body.offsetHeight;
document.p7eqtw=document.body.offsetWidth;
}
}
function P7_eqT(){ //v1.5 by PVII-www.projectseven.com
if(document.p7eqth!=document.body.offsetHeight||document.p7eqtw!=document.body.offsetWidth){
P7_colH();
}
}
function P7_equalCols(){ //v1.5 by PVII-www.projectseven.com
if(document.getElementById){
document.p7eqc=new Array;
for(i=0;i<arguments.length;i++){
document.p7eqc[i]=document.getElementById(arguments[i]);
}
setInterval("P7_eqT()",10);
}
}
function P7_eqA(el,h,ht){ //v1.5 by PVII-www.projectseven.com
var sp=10,inc=10,nh=h,g=document.getElementById(el),oh=g.offsetHeight,ch=parseInt(g.style.height);
ch=(ch)?ch:h;var ad=oh-ch,adT=ht-ad;nh+=inc;nh=(nh>adT)?adT:nh;g.style.height=nh+'px';
oh=g.offsetHeight;if(oh>ht){nh=(ht-(oh-ht));g.style.height=nh+'px';}
if(nh<adT){
setTimeout("P7_eqA('"+el+"',"+nh+","+ht+")",sp);
}
}
</script>
<style type="text/css">
body {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 75%; PADDING-BOTTOM: 0px; MARGIN: 5px; LINE-HEIGHT: 100%; PADDING-TOP: 0px; FONT-FAMILY: Verdana, Geneva, Arial, Helvetica, sans-serif
}
#header {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#mid {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#footer {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; WIDTH: 760px; PADDING-TOP: 0px
}
#header {
BACKGROUND: #f4f4f4; MARGIN-BOTTOM: 5px; HEIGHT: 60px
}
h3 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
h5 {
MARGIN: 0px; COLOR: #708090; PADDING-TOP: 25px; TEXT-ALIGN: center
}
#fbox {
BACKGROUND: #f1f1f1; FLOAT: left; WIDTH: 195px
}
#mbox {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BACKGROUND: #dff7ff; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 0px 5px; WIDTH: 360px; PADDING-TOP: 0px
}
#sbox {
BACKGROUND: #ffebcc; FLOAT: right; WIDTH: 195px
}
p {
PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; TEXT-INDENT: 2em; LINE-HEIGHT: 130%; PADDING-TOP: 10px
}
#footer {
CLEAR: both; BORDER-TOP: #ffffff 5px solid; BACKGROUND: #cddbed; HEIGHT: 60px; TEXT-ALIGN: center
}
</style>
<meta content="MSHTML 6.00.2800.1515" name="GENERATOR" />
</head>
<body onload="P7_equalCols('fbox','mbox','sbox')">
<div id="header">
<h3>脚本控制三行三列自适应高度DIV布局</h3>
</div>
<div id="mid">
<div id="fbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
</div>
<div id="mbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
<p>如果设计者使用像素为单位指定文字大小，大多数的用户将无法缩放文字，因为 Internet Explorer
改变文字大小的方式与别的浏览器不同。Mozilla 和 Opera 可以缩放已经设定像素大小的文字，而Windows 下的IE却不能。 </p>
</div>
<div id="sbox">
<p>亲和力指的并不只是关于盲人和屏幕阅读器。还有许多人虽然不是盲人，但是有视力障碍 -
你我变老时就会成为他们的一员。使网站变得更具亲和力的一个最简单的方法就是允许用户改变文字大小；拒绝提供这样的选择就剥夺了用户的主导权，很可能使用户无法舒适地阅读。 </p>
</div>
</div>
<div id="footer">
<h5>仅供演示WWW.AA25.CN</h5>
</div>
</body>
</html>
CSS样式 中国站长站头部导航
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>中国站长站 - 站长资讯 | 我们致力于为中文网站提供动力！</title>
<meta name="Keywords" content="站长,网站,资讯,站长网,站长资讯,站长工具" />
<meta name="Description" content="为站长提供及时全面的站长资讯" />
<link href="http://www.chinaz.com//images/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
function isMatch(str1,str2)
{
var index = str1.indexOf(str2);
if(index==-1) return false;
return true;
}
function ResumeError() {
return true;
}
window.onerror = ResumeError;
function $(id) {
return document.getElementById(id);
}
// 相对尺寸
function GetOffsetTop (el, p) {
var _t = el.offsetTop;
var _p = el.offsetParent;
while (_p) {
if (_p == p) break;
_t += _p.offsetTop;
_p = _p.offsetParent;
}
return _t;
};
function GetOffsetLeft (el, p) {
var _l = el.offsetLeft;
var _p = el.offsetParent;
while (_p) {
if (_p == p) break;
_l += _p.offsetLeft;
_p = _p.offsetParent;
}
return _l;
};
function showMenu (baseID, divID) {
baseID = $(baseID);
divID = $(divID);
//var l = GetOffsetLeft(baseID);
//var t = GetOffsetTop(baseID);
//divID.style.left = l + 'px';
// divID.style.top = t + baseID.offsetHeight + 'px';
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
showMenu.cur = divID;
if (! divID.isCreate) {
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function () {
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = 'block';
};
function hide () {
showMenu.timer = setTimeout(function () {divID.style.display = 'none';}, 1000);
}
divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur () {
showMenu.cur && (showMenu.cur.style.display = 'none');
}
}
function doClick_down(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=4;i++){
id ="down"+i;
j = document.getElementById(id);
e = document.getElementById("d_con"+i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
function doClick_jy(o){
o.className="current";
var j;
var id;
var e;
for(var i=1;i<=8;i++){
id ="jy"+i;
j = document.getElementById(id);
e = document.getElementById("jy_con"+i);
if(id != o.id){
j.className="";
e.style.display = "none";
}else{
e.style.display = "block";
}
}
}
function doZoom(size){
document.getElementById('textbody').style.fontSize=size+'px'
}
/// 修改及新增
function doClick_menu (o) {
o.className = 'menu_gg';
var j, id, e;
for (var i = 1; i <= 11; i++) {
id = 'menu' + i;
j = document.getElementById(id);
e = document.getElementById('menu_con' + i);
if (id != o.id) {
j.className = '';
e.style.display = 'none';
}
else {
e.style.display = 'block';
}
}
var url = '';
switch (o.innerHTML) {
case '资讯':
url = '/plus/search.php?searchtype=titlekeyword&keyword=';
break;
case '源码':
url = 'http://down.chinaz.com/query.asp?q=';
break;
case '软件':
url = 'http://www.chinaz.cn/query.asp?q=';
break;
case '论坛':
url = 'http://bbs.chinaz.com/Search.html?mode=1&searchText=';
break;
case '博客':
url = 'http://my.chinaz.com/list.asp?selecttype=topic&keyword=';
break;
case '交易':
url = 'http://1m.chinaz.com/Search.asp?keyword=';
break;
case 'GOOGLE':
url = '/uploadfile/200812/2/C4141448514.gif%3BLH%3A60%3BLW%3A165%3BBGC%3Awhite%3BT%3A%23000000%3BLC%3A%230000cc%3BVLC%3A%23551A8B%3BALC%3A%23ff3300%3BGALT%3A%23008000%3BGFNT%3A%237777CC%3BGIMP%3A%23FF0000%3BDIV%3A%23000099%3BLBGC%3Awhite%3BAH%3Aleft%3B&domains=chinaz.com&sitesearch=chinaz.com&q=';
break;
case 'ALEXA':
url = 'http://alexa.chinaz.com/index.asp?domain=';
break;
case 'IP归属':
url = 'http://tool.chinaz.com/Ip/Index.asp?ip=';
break;
case 'Whois':
url = 'http://tool.chinaz.com/whois/';
break;
case '素材':
url = 'http://sc.chinaz.com/Search.aspx?page=1&SearchWord=';
break;
}
doClick_submit.url = url;
}
doClick_submit.url = '/plus/search.php?searchtype=titlekeyword&keyword=';
function doClick_submit () {
var keyword = document.getElementsByName('keyword')[0].value;
window.open(doClick_submit.url + keyword);
}
window.onload = function (){
var keyword = document.getElementsByName('keyword')[0];
keyword.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode == 13) {
doClick_submit();
}
};
}
</script>
</head>
<body>
<div class="container">
<div class="nav">
<div class="navinner">
<ul class="navlist">
<li><a href="/">首页</a></li>
<li><a href="/News/Index.html" id="nav_1" onmouseover="showMenu('nav_1','subnav1')">新闻资讯</a>
<div class="subnav disable" id="subnav1">
<p class="pointer">.</p>
<p><span>
<a href="/News/It/Index.html">业界动态</a> |
<a href="/News/Invest/Index.html">收购融资</a> |
<a href="/News/Portals/Index.html">门户动态</a> |
<a href="/News/Search/Index.html">搜索引擎</a> |
<a href="/News/Game/Index.html">网络游戏</a> |
<a href="/News/Biz/Index.html">电子商务</a> |
<a href="/News/Media/Index.html">广告传媒</a> |
<a href="/News/Soft/Index.html">厂商开发</a>
</span></p>
</div>
</li>
<li><a href="/Webmaster/Index.html" id="nav_2" onmouseover="showMenu('nav_2','subnav2')">站长在线</a>
<div class="subnav disable" id="subnav2">
<p class="pointer">.</p>
<p><span>
<a href="/Webmaster/RecSite/Index.html">好站推荐</a> |
<a href="/Webmaster/Gather/Index.html">站长聚会</a> |
<a href="/Webmaster/Visit/Index.html">站长访谈</a> |
<a href="/Webmaster/Club/Index.html">站长茶馆</a> |
<a href="/Webmaster/Topsite/Index.html">网站排行</a>
</span></p>
</div>
</li>
<li><a href="/Webbiz/Index.html" id="nav_3" onmouseover="showMenu('nav_3','subnav3')">网站运营</a>
<div class="subnav disable" id="subnav3">
<p class="pointer">.</p>
<p><span>
<a href="/Webbiz/Exp/Index.html">建站经验</a> |
<a href="/Webbiz/BizPlan/Index.html">策划盈利</a> |
<a href="/Webbiz/Seo/Index.html">搜索优化</a> |
<a href="/Webbiz/Promot/Index.html">网站推广</a> |
<a href="/Webbiz/Free/Index.html">免费资源</a>
</span></p>
</div>
</li>
<li><a href="/Design/Index.html" id="nav_4" onmouseover="showMenu('nav_4','subnav4')">设计在线</a>
<div class="subnav disable" id="subnav4">
<p class="pointer">.</p>
<p><span>
<a href="/Design/Coolsite/Index.html">酷站推荐</a> |
<a href="/Design/Pages/Index.html">网页设计</a> |
<a href="/Design/Rules/Index.html">WEB标准</a> |
<a href="/Design/Video/Index.html">视频处理</a> |
<a href="/Design/Activity/Index.html">设计活动</a>
</span></p>
</div>
</li>
<li><a href="/Program/Index.html" id="nav_5" onmouseover="showMenu('nav_5','subnav5')">网络编程</a>
<div class="subnav disable" id="subnav5">
<p class="pointer">.</p>
<p><span>
<a href="/Program/Asp/Index.html">Asp编程</a> |
<a href="/Program/Php/Index.html">Php编程</a> |
<a href="/Program/.Net/Index.html">.Net编程</a> |
<a href="/Program/Xml/Index.html">Xml编程</a> |
<a href="/Program/Access/Index.html">Access</a> |
<a href="/Program/Mssql/Index.html">Mssql</a> |
<a href="/Program/Mysql/Index.html">Mysql</a>
</span></p>
</div>
</li>
<li><a href="/Union/Index.html" id="nav_6" onmouseover="showMenu('nav_6','subnav6')">联盟资讯</a>
<div class="subnav disable" id="subnav6">
<p class="pointer">.</p>
<p><span>
<a href="/Union/News/Index.html">联盟新闻</a> |
<a href="/Union/Intro/Index.html">联盟介绍</a> |
<a href="/Union/Comment/Index.html">联盟点评</a> |
<a href="/Union/Skill/Index.html">网赚技巧</a>
</span></p>
</div>
</li>
<li><a href="/Server/Index.html" id="nav_7" onmouseover="showMenu('nav_7','subnav7')">服务器</a>
<div class="subnav disable" id="subnav7">
<p class="pointer">.</p>
<p><span>
<a href="/Server/Web/Index.html">Web服务器</a> |
<a href="/Server/Ftp/Index.html">Ftp服务器</a> |
<a href="/Server/Mail/Index.html">Mail服务器</a> |
<a href="/Server/Dns/Index.html">Dns服务器</a> |
<a href="/Server/Win/Index.html">Win服务器</a> |
<a href="/Server/Linux/Index.html">Linux服务器</a> |
<a href="/Server/Safe/Index.html">安全防护</a>
</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
0
顶
顶
0
踩
踩
分享到：
发表评论
文章已被作者锁定，不允许评论。
相关推荐
本资源集合包含了“上百个CSS实例”，旨在帮助初学者快速掌握CSS的基础知识和应用技巧。 1. **CSS选择器**：CSS的选择器是定位HTML元素的关键，包括标签选择器、类选择器、ID选择器、属性选择器等。例如，`p` 选择...
总结，这个压缩包提供的CSS效果集合展示了Vue.js与CSS的结合在构建富交互性Web应用时的强大能力。通过学习和借鉴这些代码片段，开发者不仅可以提升CSS技能，还能了解到如何在Vue.js项目中有效地管理和应用样式。
2. CSS布局：设置页面的宽度、高度、相对定位等属性。 3. 添加3D变换：通过`transform`属性设置翻页角度。 4. 编写过渡和动画：设定翻页动作的开始和结束状态，以及变化过程。 5. 触发翻页：根据需求，添加事件监听...
**CSS3 动画概述** CSS3（Cascading Style Sheets Level 3）是样式表语言的最新版本，为网页设计带来了许多强大的新特性，其中动画...这个名为"CSS3 animator"的资源集合，无疑是一个学习和探索CSS3动画的宝贵资料。
### CSS语言大集合：掌握网页布局的艺术 #### CSS——网页设计的灵魂 CSS，即层叠样式表（Cascading Style Sheets），是Web开发中的关键技术之一，用于定义网页的表现形式，如颜色、字体、布局等。它让网页设计...
"超实用css代码集合"是针对初学者和开发者的一个资源包，它包含了大量常用且实用的CSS代码片段，帮助你快速实现各种页面样式效果。下面，我们将深入探讨这些CSS知识点。 首先，基础选择器是CSS的核心，包括类选择器...
`property` 和 `value` 分别代表具体的CSS属性和相应的值。 例如： ```css a:link { color: blue } ``` 这段代码表示所有未被访问过的链接 (`a` 元素) 的颜色为蓝色。 #### 三、常用伪类列表及用法详解 ##### 1...
这个“超赞CSS3特效集合-28个”压缩包文件显然是一个精心收集的资源库，包含了28个不同的CSS3特效示例，旨在帮助开发者学习和应用这些先进的技术。下面，我们将深入探讨CSS3的一些关键知识点，以及这些特效可能涉及...
**CSS框架电子书集合**是针对前端开发者，特别是初学者的一份宝贵资源，它包含了5个关于CSS（层叠样式表）的中文参考手册。这些手册不仅提供了详细的CSS语法介绍，还涵盖了各种使用技巧，旨在帮助用户快速掌握并熟练...
本教程集合将涵盖以上所有知识点，通过实例和练习，帮助你深入理解并掌握CSS的使用。无论你是初学者还是有一定经验的开发者，都能从中受益。通过系统学习，你可以熟练地应用CSS来创建美观、功能丰富的网页，提升你的...
6. `childNodes`：返回元素的所有子节点的集合。 7. `textContent`：获取或设置元素的纯文本内容，不包括HTML标签。 在实际开发中，理解并熟练运用CSS属性和DOM属性对于创建交互性强、视觉效果好的网页至关重要。...
2. **属性和值**：CSS定义了一系列属性，如`color`、`font-size`、`background-color`，每个属性都有对应的值，用来改变元素的样式。 3. **盒模型**：CSS盒模型包括内容(content)、内边距(padding)、边框(border)和...
本资源“很漂亮的css布局 CSS大集合”提供了多种美观的CSS布局示例，对初学者而言是极具价值的学习材料。以下将详细解释CSS布局的一些关键知识点，以及如何利用这些布局实现界面设计的美化。 1. **盒模型**：理解...
1. **CSS基础**：理解CSS的基本语法，包括选择器、属性和值，这是使用按钮集合的前提。比如，你可以通过类选择器（.btn-class）将CSS样式应用到HTML元素上。 2. **CSS预处理器**：CSS按钮集合可能使用了Sass、Less...
本文将深入探讨“漂亮的CSS3按钮样式集合”这一主题，介绍如何利用CSS3特性创建出美观且功能强大的按钮，以及如何通过源码免费下载来学习和应用这些样式。 首先，CSS3的按钮样式主要依赖于以下几项关键技术： 1. *...
这个压缩包“更全的css属性分享”显然是一个包含大量CSS相关资料的资源集合，可能包括教程、代码示例、笔记等，旨在帮助初学者更好地理解和应用CSS。 CSS属性是CSS的核心组成部分，它们定义了元素如何在页面上呈现...
1. **教程文档**：详述`DIV`和`CSS`的基础知识，如何创建`DIV`，如何通过CSS选择器定位`DIV`，以及如何设置颜色、字体、布局等样式属性。 2. **实例代码**：提供各种`DIV`布局的示例，如两栏布局、三栏布局、响应式...
这个名为"你不需要JavaScript"的项目（You-Dont-Need-JavaScript-master）就是这样一个集合，它展示了如何仅使用CSS来创建一些看似需要JavaScript才能实现的效果。 1. **CSS动画与过渡**：CSS3引入了动画和过渡特性...
总结来说，"div+css导航菜单集合"是一个结合了HTML布局、CSS样式和JavaScript交互的设计实践，通过这些技术可以创建出功能强大且视觉效果良好的网站导航菜单。在压缩包中的"导航"文件可能包含了实现这些功能的HTML、...
这个“CSS文档资料教程集合”显然是一份全面的学习资源，旨在帮助初学者和进阶者深入理解并掌握CSS的核心概念和高级技巧。 首先，我们要了解CSS的基本原理。CSS使用选择器来选取HTML或XML文档中的元素，并应用样式...