打印

[讨论] css高级应用技巧(实例篇)

本主题由 System 于 2008-7-1 05:00 解除限时高亮

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

1^# 大中小发表于 2008-5-18 21:27

例子会不断添加..网友不要跟贴,,如果要跟贴就贴上一些具体的网页布局应用实例~!!!
用css实现数据图表(思路:利用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>
</head>
<style type="text/css">
*{ margin:0px; padding:0px;}
ul,li{ list-style:none;}
#outbox{ width:300px; height:300px; border:#ccc 1px solid; background-color:#fff; margin:30px auto; position:relative;}
#outbox h1{ font-size:14px; margin:20px;}
.list1 li{ float:left; line-height:40px; width:30px; color:#fff; text-align:center; position:absolute; bottom:0px;}
.list1 li.b1{ background-color:#333; left:30px;}
.list1 li.b2{ background-color:#888; left:100px;}
.list1 li.b3{ background-color:#444; left:170px;}
.list1 li.b4{ background-color:#555; left:220px;}
</style>
<body>
<div id="outbox">
   <h1>这是一个图表</h1>
   <ul class="list1">
     <li style="height:150px;" class="b1">30</li>
	 <li style="height:100px;" class="b2">60</li>
	 <li style="height:70px;" class="b3">90</li>
	 <li style="height:30px;" class="b4">120</li>
   </ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

革命尚未成功

TOP

做西部数码代理.Cn1元国际45元

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

2^# 大中小发表于 2008-5-18 22:01

不用js菜单实现切换

<!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>不用js菜单实现切换</title>
</head>
<style type="text/css">
*{ margin:0px; padding:0px;}
ul,li{ list-style:none;}
#menu{ width:200px; height:500px; overflow:hidden; background-color:#CC6666;}
#menu h1{ font-size:14px; color:red; margin:0px;}
#menu li{ width:178px; border:#333 1px solid; border-bottom:none; background-color:green; display:block;}
#menu li a{ display:block; padding:10px; text-decoration:none;}
/*上面那句不加padding,ie,firefox显示不一致...*/
/*不加下面这句,ie6下没有效果,无法触发span显示*/
#menu li a:hover{ background-color:#fff;}
#menu li a span{ display:none; padding-top:10px;}
#menu li a:hover span{ display:block; cursor:hand; text-decoration:none;}
/*cursor:hand;修复ie6 hover 伪类bug*/
#menu li.end{ border-bottom:#333 1px solid;}
</style>
<body>
  <ul id="menu">
    <li>
	   <a href="#">	
	    <h1>这是菜单1啊</h1>
	   <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。11111111111111</span>
	   </a></li>
	   <li>
	   <a href="#">	
	    <h1>这是菜单2啊</h1>
	   <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。22222</span>
	   </a></li>
	     <li>
	   <a href="#">	
	    <h1>这是菜单3啊</h1>
	   <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。33333</span>
	   </a></li>
	     <li class="end">
	   <a href="#">	
	    <h1>这是菜单4啊</h1>
	   <span>奥运官网讯 为表达全国各族人民对四川汶川大地震遇难同胞的深切哀悼，国务院今天发布公告，决定2008年5月19日至21日为全国哀悼日。在此期间，北京奥运火炬将暂停传递。444444</span>
	   </a></li>
	
  </ul>
</body>
</html>

提示：您可以先修改部分代码再运行

革命尚未成功

TOP

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

3^# 大中小发表于 2008-5-18 22:23

常用css hack使用方法

复制内容到剪贴板

代码:

@import url("website.css")

注意这句,只对ie5版本以上和现代浏览器才有郊,ie4,不会认识的..

============================================================

@import url("oncss.css") screen;

ie系列全不识别. ..因为ie对指定设备类型的选项都不支持..firefox ok可以识别;

===========================================================

注释hack

<style type="text/css">

*{ margin:0px; padding:0px;}

#content { background-color:red;}

#content /**/{ background-color:green;}

</style>

ie6,ie7,firefox都读成green;

ie5以下,读成red;

===========================================================

属性选择符hack

<style type="text/css">

*{ margin:0px; padding:0px;}

span.test1{ color:red;}

span[class=test1]{ color:blue;}

</style>

ie6,ie7,读第一句...firefox读第二句..........这是一个css非常优秀的选择符,但是ie系列不支持.firefox下工作正常,测试如下

提示：您可以先修改部分代码再运行

复制内容到剪贴板

代码:

利用此方法可以区别ie系列,跟firefox系列,代码如下

#test{color:red;}

[xmlns] #test{color:blue;}

ie读第一句

firefox读第二句

要注意的是html标签要有xmlns作为顶级选择符

革命尚未成功

TOP

请大家尊重和保护奥运知识产权。

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

4^# 大中小发表于 2008-5-19 22:56

web 2.0风格的分页代码

<!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>css+div 分页代码</title>
</head>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>CSS网页布局实例：hover悬停放大的翻页效果 - www.52CSS.com</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
*{ margin:0px;padding:0px;}
body,td,th{font-size:12px;font-family:"宋体"}
.c{ height:1%;}
.c:after{content:"."; display:block; visibility:hidden; clear:both; height:0;}
ul,li{ margin:0px; padding:0px; list-style:none;}
#nav {
 list-style: none;
 display:inline;
 /*显示为内联元素..不让它撑满整个页面*/
}
#nav li{ float:left; margin:0 5px; width:20px; height:20px;display:inline;}
/*这里的li宽度跟a为display一样的大..这里要写,主要是防止a absolute后,从文档中脱离后原本的容器空间没有了,所以要定义一下*/
/*li为块级元素,display:inline;修复ie6 bug*/
#nav li a{ display:block; border:#999 1px solid; text-align:center; text-decoration:none; line-height:20px; width:20px; height:20px;} 
/*a 为display为block后..要写宽度跟高度.修复ie6 下显示不正常bug*/
#nav li a:hover{ position:relative; width:30px; height:30px; position:absolute;margin:-5px 0 0 -5px;line-height:30px; font-weight:bold;
border: 1px dotted #666666; background-color:#eee;color: #c00;
z-index:10;
cursor:hand;
 font-size:24px;
}
/*这里用margin的负数.不用top:-5px;left:-5px;也不用relative;因为所占据的空间不会消失;大家可以测试下*/
/*margin为负数.相对于自己原有的位置..而不是父容器..left,bottom相对于父容器进行定位*/
</style>
</head>
<body>
<div style="width:400px; margin:100px auto;">
<ul id="nav" class="c">
    <li><a href="http://www.blueidea.com/"><<</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li><a href="#">6</a></li>
    <li><a href="#">7</a></li>
    <li><a href="#">8</a></li>
    <li><a href="http://www.blueidea.com/">>></a></li>
</ul>
</div>
</body>
</html>
<body>
</body>
</html>

提示：您可以先修改部分代码再运行

解释的很清楚了..有问题欢迎修正..有好的实用源码实例贴出来大家一起学习学习...

[ 本帖最后由 tianyazjq110 于 2008-5-19 22:57 编辑 ]

革命尚未成功

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

5^# 大中小发表于 2008-5-19 23:13

web2.0 常用技巧

复制内容到剪贴板

代码:

　1、xml文件尽量以utf-8编码，gb2312有些字是存储不了的，如?,就算能存也需要转换，比较麻烦，utf-8也符合国际规范。

　　2、CSS中:hover这个伪类，如果放在:visited前面则会失效。 

　　3、<a>标签如果没有href属性，所有对它的css的伪类如:hover均失效。

 

　　4、js文件中用document.wirte("<script language=’javascript’ src=’" + file + "’></" + "script>"形式的引用，其file相对路径均为引用该js的html的路径。 

　　如：a.htm 引用x\b.js,b.js引用x\c.js,则file应该为x\c.js而不是相对b.js的直接路径c.js，而css中的@import,url()引用不存在这个问题 

　　5、在页面中，有时talbe的宽设置为100%右边也会留下一个滚动条的空白，请设置<body style="overflow:auto"> 

　　6、对于常用的图片不要用img标签，使用<span><a>并用css指定其背景和宽高，对于做动态的（移上去变背景），使用<a>最好，不需要额外编写代码，只要利用伪类:hover就好了，使用css好处是一次改变全部改变，这点可以很好的利用在换皮肤的应用中。

　　7、@font-face {font-family:comic;src:url(http://valid_url/some_font_file.eot);}

　　定义一种在本地没有的字体名称，调用<span style="font-family:comic;font-size:18pt>aa</span> 

　　8、几个CSS

　　div { overflow: hidden;text-overflow:ellipsis; } 

　　td { vertical-align : middle; } 

　　[u]要强制溢出发生并且应用 ellipsis 值，作者必须设置对象的 white-space 属性值为 nowrap 。[/u]　　假如没有换行机会(例如，对象容器的宽度是狭窄的，而内有很长的没有合理断行的文本)，没有应用 nowrap 也有可能溢出。

　　为了使 ellipsis 值被应用，此属性必须被设置到具有不可视区域的对象。最好的选择是设置 overflow 属性为 hidden。 

　　9、firefox的document.createElement不支持内容里有HTML标签,也不支持innerText，但是支持innerHTML,可以用innerHTML指定其内容。

　　10、.net控件里DropDownList在firefox下的宽度不着色，需要直接定义style=’width:10px;’ 

　　11、firefox中css的cursor不支持hand,使用pointer代替。

　　12、iframe里的滚动条需要在iframe标签里设置style=’overflow:hidden’,不能仅仅在body里设置，在firefox会有问题。

　　13、在onpropertychange事件时，注意使用event.propertyName对属性改变事件过滤，在设置本事件时，其实已经改变了onpropertychange这个属性，所以会自动的执行一次。

　　14、js5.6里的对XSL的支持版本较低，如document函数就不支持。

 

　　15、slice函数比直接循环获取数组片断慢。

　　16、nextSibling获得下一个对象时，需要注意，两个节点间不要有空格，否则很容易获取不到正确得对象。

　　17、CreateTextFile在有中文时必须指定第三个参数为true,否则不能写入中文，表现为Write写时报错

　　18、保存中文文本时使用ADODB.stream,不使用fso,因为FSO不支持utf-8格式。

[ 本帖最后由 tianyazjq110 于 2008-5-19 23:14 编辑 ]

革命尚未成功

TOP

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

6^# 大中小发表于 2008-6-3 10:24

未知高度,宽度的图片的水平垂直居中

提示：您可以先修改部分代码再运行

不用背景写法
ps:*只有ie系列可以识别.firefox 不认
firefox只认 [xmlns] #test专用的hack

革命尚未成功

TOP

zidanezhicong

我爱阿仙奴

高级会员

帖子: 444
体力: 889
威望: 0
当前: 广东深圳
离线: 1 天

专长 前端制作

7^# 大中小发表于 2008-6-3 11:13

属性选择符hack
<style type="text/css">
*{ margin:0px; padding:0px;}
span.test1{ color:red;}
span[class=test1]{ color:blue;}
</style>
ie6,ie7,读第一句...firefox读第二句..........这是一个css非常优秀的选择符,但是ie系列不支持.firefox下工作正常,
===========================================
span[class=test1]{ color:blue;}
ie7是支持的

我爱阿仙奴！

TOP

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

8^# 大中小发表于 2008-6-4 17:32

纯圆角矩形色块的两种制作方法(图片法)

<!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>
<style type="text/css">

.bl{ height:15px;background: url(http://www.webkey.cn/upload/remotupload/200711219549502.gif) no-repeat top right;}
/*制作方法2开始*/
.main_box2{ padding:0 15px; background-color:#f90}
.hubox2_tl{ margin:0 -15px;height:15px;background: url(http://www.webkey.cn/upload/remotupload/200711219549812.gif) no-repeat top right;}
.hubox2_tl div{ width:15px; height:15px; background:url(http://www.webkey.cn/upload/remotupload/200711219549477.gif) no-repeat top left;}
.hubox2_bl{ margin:0 -15px; height:15px;background:url(http://www.webkey.cn/upload/remotupload/200711219549502.gif) no-repeat bottom right;}
.hubox2_bl div{ width:15px; height:15px; background:URL(http://www.webkey.cn/upload/remotupload/200711219549310.gif) no-repeat left bottom;}
</style></head>
<body>
          <div id="contain">
		    <h3>纯色块圆角制作方法1</h3>
		     <div class="hu_box">
			 
			     <div class="tl"><img src="http://www.webkey.cn/upload/remotupload/200711219549477.gif" /></div>
				  <p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数或者一个验证邮件地址的正则表达式，又或者一个简单的文件上传类，甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。
                  </p>
			 	  
			      <div class="bl"><img src="http://www.webkey.cn/upload/remotupload/200711219549310.gif" /></div>
			 </div>
		       <h3>纯色块圆角制作方法2</h3>
			  
			      <div class="main_box2">
				      <div class="hubox2_tl"><div></div></div>
					  <p>在编程的过程中，我们通常都会积累很多简单、有效并且可重用的小段代码，一个简单的字符串处理函数或者一个验证邮件地址的正则表达式，又或者一个简单的文件上传类，甚至一个效果不错的CSS导航样式。这些小技巧为我们节省了不少时间，但是时间一长，代码数量越来越多，寻找起来也耗费了不少时间。
					  </p>
					  <div class="hubox2_bl"><div></div></div>
			      </div>
            			   
		  </div>
</body>
</html>

提示：您可以先修改部分代码再运行

革命尚未成功

TOP

MarVell

高级会员

帖子: 738
体力: 726
威望: 0
当前: 河南洛阳

专长 前端制作

9^# 大中小发表于 2008-6-4 18:42

关于#2的代码结构实在不敢恭维...

对于#4,如果再加上邻近选择符号的话,效果会更好一点.

不在放荡中变坏,就在沉默中变态...

TOP

tianyazjq110 [楼主]

中级会员

帖子: 140
体力: 300
威望: 1
离线: 1 天

10^# 大中小发表于 2008-6-5 16:57

简单模仿alert弹出框效果

<!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>test</title>
<style type="text/css">

</style>
<script language="javascript">
    function showImg(obj1,obj2){
	  var obj_1=document.getElementById(obj1);
      var obj_2=document.getElementById(obj2);
	  obj_1.style.display="block";
	  obj_2.style.display="block";
   }
    function shutImg(obj1,obj2){
	 var obj_1=document.getElementById(obj1);
      var obj_2=document.getElementById(obj2);
	  obj_1.style.display="none";
	  obj_2.style.display="none";
   }
</script>
</head>
<body>
<p><a href="#" onclick="showImg('light','fade');return false;">
<img src="http://bbs.blueidea.com/attachment.php?aid=90408&noupdate=yes" width="150" height="113" border="0" /></a></p>
<div class="blackbg" id="fade"></div>
<div class="showImg" id="light">
    <img src="http://bbs.blueidea.com/attachment.php?aid=90407" />
    <div><a href="#" onclick="shutImg('light','fade');return false;">点击关闭</a></div>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

[ 本帖最后由 tianyazjq110 于 2008-6-5 17:00 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

革命尚未成功

TOP

WXYCooL

初级会员

帖子: 73
体力: 131
威望: 0
当前: 江苏南京
离线: 3 天

专长 前端制作,JS,PHP

11^# 大中小发表于 2008-6-25 13:08

收藏了，谢谢～

WXYCooL.CN

TOP

googleguo

初级会员

帖子: 39
体力: 78
威望: 0
当前: 河南郑州
离线: 41 天

专长 前端制作,ASP,MSSQL

12^# 大中小发表于 2008-6-25 17:24

不错，收藏了，嘎嘎

www.520oo.cn

TOP

qinxu234

新手上路

帖子: 10
体力: 26
威望: 0
当前: 江西南昌
离线: 31 天

13^# 大中小发表于 2008-6-26 05:11

感觉很好`` ` 顶上去`` 下次继续学习！！

TOP

hellocookies

初级会员

帖子: 52
体力: 74
威望: 0
离线: 1 天

14^# 大中小发表于 2008-6-26 13:49

你好，请教个问题

相同的字体相同的size在IE和FireFox下显示不同

font-family:georgia;font-size:28px;line-height:34px;

字体的属性是上面几种，但在Firefox和IE6下显示字体边有锯齿，在IE7下却没有

还有，比如一行短文字上下有空白，

是用line-height还是用margin或是用padding来定义它的这块区域？

用文字利于搜索引擎，但在不同浏览器下有下差别（文字的边有锯齿）

用图片能实现所有浏览器统一，

用Line-height不太好控制~

TOP

yoom

新手上路

帖子: 93
体力: 24
威望: 0
当前: 四川成都
离线: 1 天

15^# 大中小发表于 2008-6-26 14:43

ie6和ff对文字抗锯齿效果不好。ie7就好些了。最好的就是safari，文字看起来就没有任何锯齿。
还是文字要好些，只要锯齿不严重到令人无法阅读的地步。
”图片能实现所有浏览器统一“，除非是客户必须要求，为了美观。
图片不大可能来传达文字方面信息，传递的倒是一种视觉。个人观点。

XHTML+CSS

TOP

yoom

新手上路

帖子: 93
体力: 24
威望: 0
当前: 四川成都
离线: 1 天

16^# 大中小发表于 2008-6-26 14:47

回答：14楼，下面用法比较模糊，大概这个意思
<div style="padding:10px;" title="如果不要段落塞的满满的">
<p style="margin:10px;">段落1，p用margin比较好</p>
<p style="margin:10px;">段落2，p用margin比较好</p>
</div>

[ 本帖最后由 yoom 于 2008-6-26 14:51 编辑 ]

XHTML+CSS

TOP