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

这里的技术是共享的

You are here

div+css

shiping1 的头像

marquee 用法

<marquee direction="left" scrollamount="10" scrolldelay="200" loop="-1" onmouseover="this.stop();" onmouseout="this.start();">吴中服装学校。 </marquee>

普通分类: 
shiping1 的头像

锚点 有大用


锚点  <a name="001" id="001" > </a>   好像这种方法是最好的 兼容ie6 ie7 ie8 ff chrome
最好用 <a name="zxkc" id="zxkc" >&nbsp;</a>  里面有内容 可能效果会更好

普通分类: 
shiping1 的头像

ie6bug 父元素 filter 子元素 filter 会出现问题

ie6bug 父元素 filter 子元素 filter 会出现问题

把父元素或者 子元素的 filter 赋值为空看看  或  filter:!important;      

普通分类: 
shiping1 的头像

IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题 select 覆盖有大用

jquery演示网址 http://sandbox.runjs.cn/show/dooztchz
jquery.bgiframe.js  的下载 https://github.com/brandonaaron/bgiframe

下面的内容有大用

普通分类: 
shiping1 的头像

IE下 z-index 的各种坑

2012-03-05 21:40 by 聂微东, 16216 阅读, 37 评论, 

普通分类: 
shiping1 的头像

【IE6 BUG 整理】Select的遮盖问题

普通分类: 
shiping1 的头像

IE6中select挡住DIV的BUG IE6中select挡住DIV的BUG 挡住 遮盖

普通分类: 
shiping1 的头像

IE6 Select元素无法被div等元素覆盖的bug解决办法 iframe 里面 有内容 东西

 

普通分类: 
shiping1 的头像

ie6 ie7 好像 高度 行高 起作用必须是 display:block

ie6 ie7 好像 高度 行高 起作用必须是 display:block

普通分类: 
shiping1 的头像

CSS visibility 属性

CSS visibility 属性

普通分类: 
shiping1 的头像

ie7 bug

有的时候 position:absolute 下面 还有 position:absolute的层时

如果 ie7的话 里面的 position:absolute的层 就不会显示,也就是不会在最上面,

我们给它个背景就可以了 background:#fff;
 filter:  alpha(opacity=1);//ie

  opacity: 0.01;//firefox

同时 让它的透明度为 一点点

普通分类: 
shiping1 的头像

ie6 png 透明的各种方法

普通分类: 
shiping1 的头像

HTML <th> 标签 HTML <thead> 标签

HTML <th> 标签

普通分类: 
shiping1 的头像

css中指定tr边框 正常情况下tr边框好像不起作用

你可能发现在css中指定的tr边框不起作用,而如果指定td的边框又会有间断的现象出现。这种情况下可以参照下面的代码:

 

普通分类: 
shiping1 的头像

text-indent 首行缩进 的用法

允许使用负值。如果使用负值,那么首行会被缩进到左边。

 

text-indent:2em 就是首行缩进2个字

text-indent:10px 就是首行缩进10个像素

 

text-indent:-9999px; 隐藏文字,

普通分类: 
shiping1 的头像

CSS letter-spacing 属性 字间距

CSS letter-spacing 属性

定义和用法

letter-spacing 属性增加或减少字符间的空白(字符间距)。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

注释:允许使用负值,这会让字母之间挤得更紧。

普通分类: 
shiping1 的头像

css 斜体

CSS font-style 属性

定义和用法

font-style 属性定义字体的风格。

说明

该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲,用户代理可以根据正常字体计算一个斜体字体。

普通分类: 
shiping1 的头像

图像在div 内垂直居中 绝对ok 纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

一个问题一直困扰着不少前端制作人员(也称前端开发工程师,o(∩_∩)o)。如题,如何实现一张未知宽高的图片在一个Div里面水平垂直 居中呢?相信部分前端Sir首先想的是Table布局,是的,实现起来不是很麻烦,但肯定也有和浩子一样有代码洁癖的人。在这里,浩子忽略Table的实 现方法,有兴趣的也可以去研究一下。下面介绍下用Html和CSS来实现如题效果。

先看看Demo效果:纯CSS实现图片水平垂直居中于DIV(图片未知宽高)

PS:你可以用Firebug或者任意浏览器的开发人员工具修改图片尺寸,测试测试效果。(任何关于本文的问题请留言

再看看代码,主要2部分:

普通分类: 
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 等的例子 video swf 有大用

本机电脑上 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,切图工具图标的识别
普通分类: 

页面

Subscribe to RSS - div+css