![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS
文章平均质量分 88
软件-攻城狮
Project Manager
展开
-
CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了。今天总算搞懂了,一定要记下来。在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:background-position: 0px 0px; 3)百分比:background-position: 0% 0%;上面这三句语句,都将图片定位在背景的左上原创 2013-11-02 12:46:49 · 771 阅读 · 0 评论 -
CSS实现半透明效果实现及兼容性
网页半透明效果经常在一些很酷网站中用到,虽然说现在还没有被纳入W3C标准中,但对于CSSer们还是很热捧的。从网上收集并整理了一下以后备用。1. 旧的Opacity设置以下代码是Firefox和Safari旧版本所需的透明度设置:复制内容到剪贴板代码:#ceng { -khtml-opacity:0.5;-moz-opacity: 0.5; }-khtml-op原创 2013-11-28 00:13:57 · 836 阅读 · 0 评论 -
div css背景颜色半透明 文字不透明兼容ie、火狐等浏览器
IE:外层filter,内层position:relative或absolute。FF:外层不使用opacity,而用background:rgba()。[html] view plaincopy> html> head> title> New Document title> meta name="Generator" co原创 2013-11-28 00:15:12 · 750 阅读 · 0 评论 -
CSS实现Div层背景半透明而内容不透明效果
title>透明title>head>style>#container { color: #154BA0; background: #ff0000; filter: Alpha(Opacity=10, Style=0); opacity: 0.10; position: absolute; height: 200px;原创 2013-11-28 00:16:10 · 1835 阅读 · 0 评论 -
div css float浮动用法(left right)
在学习牛腩老师的视频中,很深刻的体会了浮动带来的效果的震撼,现在是对B/S这块的知识是越来越喜欢,越来越愿意学习,特别是现在看网页的时候看到那些代码感觉很是熟悉,特别亲切,只是下面自己又通过网站的学习和大家通过分享。 div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动学习Css样式的float浮动属性,用于设置标签对象(如:标原创 2013-11-28 00:16:46 · 4115 阅读 · 0 评论 -
js实现主页漂浮图片
实现:在显示可见窗口反复飘动鼠标移动上去自动停止放在head标签里面[html] view plaincopyscript type="text/javascript"> function addEvent(obj,evtType,func,cap){ cap=cap||false; if(obj.addEventListener){原创 2013-11-28 00:18:14 · 657 阅读 · 0 评论 -
两边漂浮图片的一段JS
function initEcAd() {document.all.AdLayer1.style.posTop = -200;document.all.AdLayer1.style.visibility = 'visible'document.all.AdLayer2.style.posTop = -200;document.all.AdLayer2.style.visibilit原创 2013-11-28 00:18:44 · 590 阅读 · 0 评论 -
CSS text-align 属性
CSS text-align 属性CSS 参考手册定义和用法text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对其,从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔,可以支持值 justify;不同用户代理可能会得到不同的结果。默认值:如果 direction 属性是 ltr,则默原创 2013-11-28 00:20:00 · 855 阅读 · 0 评论 -
js拖拽(一)
关于js拖拽早已是老生常谈,网上一搜一大坨,但是有很多并不是很完善,或者兼容性不够,或者功能不全,并且这样的东西还是自己写的好用。我打算在(一)中主要对js拖拽功能的注意点进行罗列,力求简单;在(二)中利用(一)的拖拽去实现类似google个性化首页的拖拽模块功能。 首先贴上完整code(IE/FF/Chrome) 代码DOCTYPE html PUBLIC "-//原创 2013-11-28 00:21:47 · 620 阅读 · 0 评论 -
js拖放效果
js拖放效果,包含程序原理 深度分析,可进行锁定和复位。拖放效果,也叫拖拽,学名Drag-and-drop ,是最常见的js特效之一。如果忽略很多细节,实现起来很简单,但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西。虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地原创 2013-11-28 00:23:05 · 909 阅读 · 0 评论 -
JQuery之拖拽插件
一直以来,都对JS获取元素的位置感到非常的困惑:一会client、一会offset、一会scroll。再加上各大浏览器之间的不兼容,唉,搞得哥晕晕乎乎的。而很多页面效果都要用到这些位置。不得已,得练练,得记记。下面就来说说这个基于 JQuery的简易拖拽插件吧。 按惯例,先说说拖拽的原理,以及搞这么一个东东的步骤:那什么是拖拽呢? 看名字就知道了:就是把一个东东拖来拽去的。原创 2013-11-28 00:24:54 · 1042 阅读 · 0 评论 -
CSS border-width 属性
10.1. CSS border-width 属性10.1.1. CSS border-top-width 属性10.1.2. CSS border-right-width 属性10.1.3. CSS border-bottom-width 属性10.1.4. CSS border-left-width 属性CSS border-width 属性示例 -- 可以尝试编辑CSS转载 2013-11-29 23:38:53 · 1322 阅读 · 0 评论 -
css 背景透明,文字不透明,alpha滤镜,opacity,position:relative;
都知道,在alpha滤镜下,背景透明了,里面的文字也会跟随透明,我们可以设置内容的position为relative可以解决这个问题但是在position为absolute这么做却没有效果,怎么解决呢,看代码: > html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type"原创 2013-11-28 00:13:14 · 655 阅读 · 0 评论 -
li列表中显示文字强制不换行,大于li宽度自动隐藏文字
li{display:block;font-size:14px;height:16px;line-height:16px;width:330px;white-space:nowrap; //强制不换行overflow:hidden; //自动隐藏文字 text-overflow: ellipsis; //文字隐藏后添加省略号-o-text-overflow:el原创 2013-11-28 00:12:26 · 900 阅读 · 0 评论 -
JS实现拖拽
[html] view plaincopyprint?////html的代码说明: ////定义了一个table,用于测试js拖拽功能 html> head> script type="text/javascript" > script> head> body> table width="100px" height="100px" bgcolor="blu原创 2013-11-28 00:19:18 · 581 阅读 · 0 评论 -
Background-position的用法
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> title>title> style type原创 2013-11-02 12:58:06 · 885 阅读 · 0 评论 -
利用CSS定位背景图片
div{ background:#FFF url(image) no-repeat fixed x y;} 点评:我们在研究其他的网站的样式的时候经常会发现一种情况,就是在很多background属性里都调用同一张图片,来满足网页各个部分的使用。打开这种图片看一下,会发现这张图片上包含了很多小图片; 又如: 这些小图片就是整图分割后的各个部分,把各个部分原创 2013-11-02 12:56:27 · 870 阅读 · 0 评论 -
css 中的background:transparent到底是什么意思有什么作用
点评:css 中的 transparent到底是什么意思? 一直觉得很奇怪,到底有什么用的啊?,本文将详细说明,需要的朋友可以参考下有时我在看css时,看到有的css属性定义为background:transparent。意思就是背景透明。实际上background默认的颜色就是透明的属性。所以写和不写都是一样的有段时间没写文章了,一直在学校,虽然带着电脑,但是不能上网啊!最近在用ja原创 2013-11-02 14:27:21 · 1635 阅读 · 0 评论 -
background-position 用法详细介绍
语法:background-position : length || length background-position : position || position 取值:length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅 长度单位 position : top | center | bottom | left | center | righ原创 2013-11-02 12:40:30 · 590 阅读 · 0 评论 -
div自动换行word-break:break-all和word-wrap:break-word的区别
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于:1,word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下原创 2013-11-26 23:40:05 · 711 阅读 · 0 评论 -
IE6下div宽度最大,最小,高度最大,最小的兼容
* 最小寬度 */.min_width{min-width:300px; /* sets max-width for IE */ _width:expression(document.body.clientWidth }/* 最大寬度 */.max_width{ max-width:600px; /* sets max-width for IE原创 2013-11-26 23:38:45 · 557 阅读 · 0 评论 -
CSS表达式
避免CSS表达式CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );如上所示,expressio原创 2013-11-26 23:38:10 · 3354 阅读 · 0 评论 -
一个css中z-index的用法
一个css中z-index的用法CSS教程:彻底掌握Z-index属性大多数的CSS属性都很容易使用。常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现。而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作。Z-index属性便属于上面所说的后面的那一组。Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上的混乱和(开发者心理上)的挫败原创 2013-11-26 23:43:50 · 543 阅读 · 0 评论 -
z-index 属性
CSS 中的z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index层级树的概念.这个星期我们团队转载 2013-11-26 23:47:37 · 1015 阅读 · 0 评论 -
js简单实现div遮罩层
下面写了个列子简单实现Div遮罩层,如下值得收藏[html] view plaincopy> html xmlns="http://www.w3.org/1999/xhtml" > head> title>DIV CSS遮罩层title> script language="javascript" type="text/javascrip原创 2013-11-28 00:14:30 · 931 阅读 · 0 评论 -
网站漂浮广告代码收藏
可以关闭,链接的网站图片漂浮代码function closeBox() { document.getElementById("img").style.display = "none"; }关闭 http://www.baidu.com" target="_blank"> var x = 50,y = 60 var xin = true, yi原创 2013-11-28 00:17:23 · 813 阅读 · 0 评论 -
CSS 框模型概述
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和外边距 的方式。CSS 框模型概述元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。提示:背景应用于由内容和内边距、边框组成的区域。内边距、边框和外边距都是可选的,默认转载 2013-11-29 23:58:56 · 510 阅读 · 0 评论