<![CDATA[海峡IT网 - Css技巧]]> http://www.haixiait.com/ zh-cn PBlog2 v2.4 海峡IT网 http://www.haixiait.com/images/logos.gif http://www.haixiait.com/ 海峡IT网 http://www.haixiait.com/article.asp?id=380 <![CDATA[div底对齐CSS代码]]> airzen@126.com(airzen) Thu,25 Feb 2010 06:41:15 +0800 http://www.haixiait.com/default.asp?id=380   <style type="text/css">  
    .aa{height:400px;width:350px;background:#eee;position:relative;}   
    .aa div{width:100px;}   
    .bb{background:red;height:300px;position: absolute;bottom:15px;left:50px;}   
    .cc{background:green;height:200px;position: absolute;bottom:0;left:200px;}   
</style>  
<div class="aa">  
    <div class="bb">bb</div>  
    <div class="cc">cc</div>  
</div>
 

]]> http://www.haixiait.com/article.asp?id=121 <![CDATA[不使用iframe,div+css滚动条效果]]> airzen@126.com(airzen) Thu,27 Dec 2007 10:20:21 +0800 http://www.haixiait.com/default.asp?id=121 <div style="width:value;height:value;overflow-x:hidden;overflow-y:scroll">

内容区当设定的显示范围,容纳不了显示的内容的时候,就会出现滚动条,可根据自己的需要适当的改进width,height,overflow-x,overflow-y的属性,即可达到iframe的效果airzen整理


</div>

 

 

 

]]> http://www.haixiait.com/article.asp?id=75 <![CDATA[用样式控制文本框为只读]]> airzen@126.com(airzen) Tue,20 Nov 2007 13:58:41 +0800 http://www.haixiait.com/default.asp?id=75 用样式控制文本框为只读。刚在一个群里看的。
readonly:expression(this.readOnly=true)

贴在这里与大家共享.

]]> http://www.haixiait.com/article.asp?id=30 <![CDATA[超链接下划线的小把戏]]> airzen@126.com(admin) Tue,06 Nov 2007 10:48:07 +0800 http://www.haixiait.com/default.asp?id=30 如果某种你看到图片中的下划线链接请不要惊讶。因为它其实很简单，你也可以做到。
来这里看看实际效果 http://5key.net/demo/hyperlink-underline


首先，我们来说说这个彩色的下划线是怎么弄的。也许你已经猜到了，一张渐变的背景图片。没错！就是下面这张图片。

再看看下面的css，整个链接的变化效果我想你应该已经明白了吧。
如果不是太清楚。先来了解一下滑动门的概念

body {
  font-size:14px;
  font-family: Helvetica, sans-serif;
  padding:10px;
  margin:0px;
}
h1{margin:0; padding:0; font-size:16px; }
p{padding:20px 0 0 0;}
a{
  *padding-bottom:1px;
  text-decoration:none;
  }
a:link{
  color:#06F;
  background: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:visited{
  color:#06f;
  background-image: url(1.gif);
  background-repeat: repeat-x;
  background-position: 0 16px;
}
a:hover{
  color:#039;
  background:url(1.gif) repeat-x 0 bottom;
}
]]> http://www.haixiait.com/article.asp?id=29 <![CDATA[性感的CSS Menus]]> airzen@126.com(admin) Tue,06 Nov 2007 10:17:48 +0800 http://www.haixiait.com/default.asp?id=29
Css Menu Example
这里有几个专门收集CSS 导航菜单的站点，其中有很多优秀的作品。也许能给你带来一定的启发。你会发现原来CSS Menu还可以这样做。

1. http://www.alvit.de/css-showcase/css-galleries-tabs-navigation-showcase.php
这里收录了近百个优秀站点的CSS导航菜单

uploads/200709/08_220615_1.gif


2. http://www.drweb.de/weblog/weblog/?p=531
收录了大量的使用CSS tab Menu的站点

uploads/200709/08_220932_2.gif


3. http://www.smashingmagazine.com/2007/03/14/css-based-navigation-menus-modern-solutions
收录了50多个漂亮易用的CSS Menu

uploads/200709/08_221212_3.gif


Css Menu Tutorials
这里列举了大量优秀的CSS Menu教程。而且都比较简单易学，通过学习，你也能做出漂亮的CSS Menu

1. http://www.cssplay.co.uk/menus/index.html
著名的cssplay，为广大读者奉献了很多优秀的css范例。
uploads/200709/08_221727_4.gif


2. http://www.seoconsultants.com/css/menus/tutorial/
水平、垂直的二级CSS menu教程

uploads/200709/08_221848_5.gif


3. http://superfluousbanter.org/archives/2004/05/navigation-matrix-reloaded/
完美！一张图片完成的CSS Menu效果。demo看这里：http://www.nundroo.com/nav_matrix/welcome2.html

uploads/200709/08_222436_6.gif


4. http://codylindley.com/CSS/325/css-step-menu
CSS menu step by step

uploads/200709/08_222606_7.gif


OK，这么多的东西也许无法一时消化，如果你急需一个CSS Menu。下面的一些站点中提供了大量的CSS menu下载。

1. http://www.13styles.com/
13个Css Menu下载
uploads/200709/08_222901_8.gif


2. http://www.webmaster-toolkit.com/css-menu-generator.shtml
创建左边导航菜单，只需 修改即可

uploads/200709/08_223149_9.gif


3. http://www.roscripts.com/8_web_menus_you_just_can&#39;t_miss-116.html
8个不可错过的CSS Menu下载

uploads/200709/08_223325_10.gif


4. http://e-lusion.com/design/menu/
9种垂直CSS Menu下载

uploads/200709/08_223437_11.gif
]]> http://www.haixiait.com/article.asp?id=12 <![CDATA[文字溢出自动判断裁切显示。 ]]> airzen@126.com(admin) Fri,17 Feb 2006 11:54:03 +0800 http://www.haixiait.com/default.asp?id=12 以前我们在做新闻列表的时候，都会对字符进行长度判断，考虑到中英文字符长度问题，还用专用函数进行判断输出，耗费一定的程序处理资源，现有以下CSS样式，你可以直接输出。本人使用比较爽，所以贴出来同各位WEB 开发者共享！

<TABLE style="table-layout:fixed;border-collapse:collapse;font-size:12px;" border="1" width="200" bordercolor=#666666>
  <TR>
    <TD nowrap style="overflow:hidden;text-overflow:ellipsis;">请务必尊重知识产权，杜绝侵权行为。鼓励原创，谴责未经允许的转贴。</TD>
  </TR>
</TABLE>

TD中显示的东西您可以无限长，他的长度是由TABLE容器 的width 进行控制，还有 TD的 nowrap属性一定不要漏

 

airzen整理由06年2月17日
http://blog.csdn.net/airzen

]]> http://www.haixiait.com/article.asp?id=11 <![CDATA[CSS样式控制图片裁切显示 ]]> airzen@126.com(admin) Fri,17 Feb 2006 11:48:49 +0800 http://www.haixiait.com/default.asp?id=11 我们在论坛新闻系统的时候，其中的有些图片会比较大破坏了整体布局的美观，现通过CSS定义方式使图片进行裁切显示，即，当图片的容器不足以显示整个图片时，会以左上角为开始显示，不足显示的将会隐藏。相关各位同仁也有此想法。现有以下CSS样式，所以贴出来同各位WEB 开发者共享！

当然有人用img 的onload 事件对其宽高进行js控制，不过经招有时会因网页加载过快，或过慢而来不及执行，现向大家推荐代码如下，自行研究。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
.divClass{height:100%;width:100%;overflow:hidden;Margin-bottom:5px}
</style>
<title>COPY数据到ID群集中by ID | 图片CSS定义裁切显示| 文字的宽度自适应缩放</title>
</head>

<body >
<div id="airzen" class="divClass"><img src="http://www.haixiait.com/attachments/month_0711/g2007115114655.jpg"></div>
</body>

 

 说明：以上样式你可以自己定义，但要保留overflow:hidden;祝各位工作愉快！

airzen整理由06年2月17日
http://blog.csdn.net/airzen
http://www.haixiaIT.com

]]>