欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

div+css

shiping1 的头像

图像在div 内垂直居中

1)一种方法
<!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">
.psdthumb { height: 1%; overflow: hidden; display:table; border-spacing:10px; }
普通分类: 
shiping1 的头像

图像加载完毕前 显示 等待的图像

<!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>
<style>
img{
width:980px;
height:350px;
background:loading.gif;
}
</style>
<body>

普通分类: 
shiping1 的头像

纯CSS图片预加载

有很多种方法来实现图片的预加载,通常大部分使用Javascript让事情滚动。不要再受Javascript预载的束缚了吧,用CSS你就可以毫不麻烦的预载你的图片。

 

为什么使用预载

你为什么会考虑使用预载呢?你是否曾有个网站,在那个网站你要滚动你的导航然后有个延迟直到图片被加载完……嘿嘿。预载将在这方面帮助你。它将在页面加载的时候加载那些图片并将其存储在浏览器的缓存里面。这样当用户滚动导航的时候,很漂亮而且流畅,没有延迟。

CSS代码

这个概念就是写一个CSS样式设置一批背景图片,然后将其隐藏,这样你就看不到那些图片了。那些背景图片就是你想预载的图片。

这是一个例子:

普通分类: 
shiping1 的头像

embed noembed 例子

普通分类: 
shiping1 的头像

ie6 背景

为什么这里 src不对

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancy_close.png', sizingMethod='scale'); }

为什么这里 src是对

.fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/templets/shipingzhong/style/fancybox/fancy_close.png', sizingMethod='scale'); }

普通分类: 
shiping1 的头像

object embed 例子 及播放 其它的如flv 等的例子 有大用

本机电脑上 D:\xampp\htdocs\ZZZZ\javascript\flash2 文件夹有很多的例子

最好同源 swf文件jpg文件flv(mp4)文件同一网站下

普通分类: 
shiping1 的头像

object参数大全

object参数大全

(默认0为否,-1或1为是)
<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95" id="MediaPlayer1" width="286" height="225">
<param name="AudioStream" value="-1">
<param name="AutoSize" value="-1">
<!--是否自动调整播放大小-->
<param name="AutoStart" value="-1">
<!--是否自动播放-->
<param name="AnimationAtStart" value="-1">
<param name="AllowScan" value="-1">
<param name="AllowChangeDisplaySize" value="-1">
<param name="AutoRewind" value="0">

普通分类: 
shiping1 的头像

shadow 阴影 边框阴影 有大用 一条线的阴影效果 有大用


.shadow {
    -moz-box-shadow: 3px 3px 4px #d0d0d0;
    -webkit-box-shadow: 3px 3px 4px #d0d0d0;
    box-shadow: 3px 3px 4px #d0d0d0;
    -ms-filter\0: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#d0d0d0')";
}
*html  .shadow{
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#d0d0d0');
}
*+html  .shadow{
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#d0d0d0');
}

普通分类: 
shiping1 的头像

所有浏览器(包括ie6)都通用顶部固定的 水平居中的代码 有大用

.zhuangyeshezhi-top{
position:fixed;  /*如果不是固定的可以是absolute绝对定位*/
top:0px;
left: 50%;
margin: 0 auto 0 -495px;/*这里495的为本身宽度的一半即990的一半*/
z-index:100;
background:url(../images/nav.gif) no-repeat left top;
height:38px;
width:990px;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));    
}

 

 

普通分类: 
shiping1 的头像

html 显示 swf文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="Administrator">
    <meta name="generator" content="SWiSH Max3 (2009.11.30) www.swishzone.com">
    <meta name="description" content="">

普通分类: 
shiping1 的头像

css 背景固定

css背景固定 background-attachment:fixed;

普通分类: 
shiping1 的头像

ps 切图

一,基本概念
1,切图,是一种网页制作技术,他是将美工效果图转换为页面效果图的重要技术。Fireworks也提供了切图技术,Flash则直接提供了网页格式输出技术(不需要切图)。
2,切片,是切图的直接结果,切图实际上就将图切分为一系列的切片
二,切图操作过程
1,切图工具图标的识别
普通分类: 
shiping1 的头像

css 清除浮动

1)清除浮动
父元素{
    height: 1%;
    overflow: hidden;
}
子元素{
float:left;
}

2)清除浮动
最后一个子元素后<div style="clear:both"></div>

第二种方法这个好像是比较好 但是有时ie6好像有点问题,所以......两者结合起来使用吧

 

css清除浮动大全,共8种方法

清除浮动 是每一个 web前台设计师 必须掌握的机能。

 

为什么浮动这么难?

因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。

而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。

 

解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。

 

普通分类: 
shiping1 的头像

ie6下img的onclick事件好像不起作用

ie6下img的onclick事件好像不起作用

下面的这个方法 是可以应付 ie6下img的onclick事件好像不起作用

 

<a href="#" class="chachaa" onclick="closeshow();return false;"><img src='{dede:global.cfg_templets_skin/}/images/fzzy/chacha.png' alt="爱丁堡艺术服装学院" class="chacha" /></a>

 

 

下面这个也可以

<a href="javascript:void(0);" class="chachaa" onclick="closeshow();return false;"><img src='{dede:global.cfg_templets_skin/}/images/fzzy/chacha.png' alt="爱丁堡艺术服装学院" class="chacha" /></a>

 

 

 

普通分类: 
shiping1 的头像

ie6 png透明 有自已的方法

下面是自已的方法
<!--[if IE 6]>
<SCRIPT type=text/javascript src="{dede:global.cfg_templets_skin/}/js/DD_belatedPNG.js" ></SCRIPT>
<script type="text/javascript" >
    DD_belatedPNG.fix('img,.zhuyeming,');
</script>
<![endif]-->


http://www.wangchao.net.cn/bbsdetail_1884060.html
http://www.unovo.cn/u-development/XHtml/2009/ie6-fix-png.html

普通分类: 
shiping1 的头像

IE兼容性bug汇总

IE兼容性bug汇总

项目最新版本的开发进入后期阶段,今天鼓起勇气打开IE Test,如我所料啊!页面在IE6下面目全非了,呜呜~~

现在开始修复IE的Bug(大部分是IE6,IE7 8也有一些),顺便记录下来。

     1、png图片在IE6下出现透明或背景变灰的bug;

普通分类: 
shiping1 的头像

ie6bug 好像 子元素是float 父元素就不能是relative

ie6bug 好像 子元素是float 父元素就不能是relative

普通分类: 
shiping1 的头像

IE6终极备忘:修复IE6下 25+ Bugs

[译]IE6终极备忘:修复IE6下 25+ Bugs

去年就想将IE的bug系统地整理下,但一直都很忙没有完成,看到这篇E文后,我毫不犹豫的放下了手中的工作将之翻译出来。
由于是第一次译文,所以错误在所难免,欢迎大家批评指正。

普通分类: 
shiping1 的头像

jquery 根据 id,class,标签 取得对象

jQuery(document).ready(function(){

       jQuery('.xyhjrelaimg').click(function()
           {
            alert(111);
               //jQuery(this).siblings('div').css('display','');
               //jQuery(this).css('display','none');
               //alert('mouse over event');
           });
    });

 

 

 jQuery根据ID、CLASS、等获取对象

Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,

普通分类: 
shiping1 的头像

CSS自动换行,强迫不换行 强制不换行

自动换行

普通分类: 
shiping1 的头像

vertical-align

CSS vertical-align 属性

定义和用法

vertical-align 属性设置元素的垂直对齐方式。

说明

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

普通分类: 
shiping1 的头像

前端学习

!!!记住一定要清除浮动.txt

background:url(../images/logobg.jpg) rrepeat-x left top;

 

我们有时发现ie6的margin不起作用
我们就把ie6的这个元素设置成float:left

 

当高度不变时 line-height:越小越朝上,等于高度时在中间 ,越大 越朝下 ,

 

div 在 object上面

 1)<object里增加  <param value="transparent" name="wmode">

2)embed标签可以在标签中加入  wmode="transparent"  
好像是两个加起来才有用

 

普通分类: 
shiping1 的头像

幻灯片例子

普通分类: 
shiping1 的头像

CSS white-space 属性 不换行 同一行

CSS white-space 属性

普通分类: 
shiping1 的头像

怎么解决IE6下 li 的 float:left 自动换行?

<!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=utf-8" />
<title>无标题文档</title>
<style>
* {margin:0; padding:0; font-size:12px;}
ul {list-style:none;}
#nav {width:180px; height:200px; border:1px solid red;}

普通分类: 
shiping1 的头像

css background rgba 在 ie

普通分类: 
shiping1 的头像

解决IE6浏览器下position:fixed固定定位问题

解决IE6浏览器下position:fixed固定定位问题
发布于:2011-10-05 18:07 | 点击:113 | 评论:0
使元素固定在浏览器的顶部:#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}使元素固定在浏览器的底部:#top{
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
}这两段代码只能实现在最底部跟最顶部,你可以使用 _margin-top:10px; 或者 _margin-bottom:10px; 修改其中的数值控制元素的位置。

普通分类: 
shiping1 的头像

css background

RGBA像RGB一样设置颜色,而这个”A”——RGBA中的最后一个值——允许我们设置该元素的透明度。就像opacity声明一样,一个opacity值为1的元素是完全不透明的,而一个opacity为0的元素是完全透明的。

普通分类: 
shiping1 的头像

img 图像丢失

img  图像丢失 onerror

<img src="{{$row.userhead}}"
        onerror="this.onerror=null;this.src='http://u.szr.com/images/face/none.gif'"
        width="20" height="20" alt="{{$row.username}}的照片" />

普通分类: 
shiping1 的头像

CSS outline 属性

普通分类: 

页面

Subscribe to RSS - div+css