分类: Css技巧预览模式: 普通 | 列表

div底对齐CSS代码

  <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>
 

查看更多...

分类:Css技巧 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 9453

不使用iframe,div+css滚动条效果

<div style="width:value;height:value;overflow-x:hidden;overflow-y:scroll">

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


</div>

 

查看更多...

Tags: div css 滚动条效果

分类:Css技巧 | 固定链接 | 评论: 1 | 引用: 0 | 查看次数: 7877

用样式控制文本框为只读

用样式控制文本框为只读。刚在一个群里看的。
readonly:expression(this.readOnly=true)

贴在这里与大家共享.

分类:Css技巧 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3494

超链接下划线的小把戏

如果某种你看到图片中的下划线链接请不要惊讶。因为它其实很简单,你也可以做到。
来这里看看实际效果 http://5key.net/demo/hyperlink-underline

查看更多...

Tags: css 超链接样式

分类:Css技巧 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3298

性感的CSS Menus

当你需要一个简单易用的导航菜单得时候。CSS Menu是个不错的选择。相对于Flash/Javascript,他们小巧轻便,而且方便使用。当然,他们也能做出很多很漂亮的效果。

Css Menu Example
这里有几个专门收集CSS 导航菜单的站点,其中有很多优秀的作品。也许能给你带来一定的启发。你会发现原来CSS Menu还可以这样做。

查看更多...

Tags: css CSS Tab css菜单 Menus

分类:Css技巧 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3202

文字溢出自动判断裁切显示。

以前我们在做新闻列表的时候,都会对字符进行长度判断,考虑到中英文字符长度问题,还用专用函数进行判断输出,耗费一定的程序处理资源,现有以下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属性一定不要漏

 

查看更多...

Tags: css 文字裁切显示

分类:Css技巧 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3682

CSS样式控制图片裁切显示

我们在论坛新闻系统的时候,其中的有些图片会比较大破坏了整体布局的美观,现通过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>

查看更多...

Tags: css 图片裁切显示

分类:Css技巧 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 4003