网页制作第40页更新:2025/9/29 常春岛资源网

网页制作第40页

input输入框中有图片怎么使用css布局实现

现在很多的页面为了美观、形象，一般都会在用户名，密码等输入框中加一个图片，以便更形象的说明这个输入框的用意。美工的一个小图片，却给前端带来了很多麻烦，如何定

CSS选择器种类、优先级与匹配原理详解

作为一个Web开发者，掌握必要的前台技术也是很重要的，特别是在遇到一些实际问题的时候。这里给大家列举一个例子：给一个p标签增加一个类（class），可是执行后该class

并排的两个对象如何水平对齐兼容ie6

对于前边一个复选框，后边一句文字这样的排布，经常见，但问题总是很多，如何让它们两个并排对齐，有时候就是几个像素的问题，但各个浏览器就是不一样，特别是ie6.今天忽

让图片img标签在div里上下左右居中的方法

复制代码代码如下:<htmlxmlns="http:

解决Firefox/Opera 不支持onselectstart事件实现不允许用户sel

在开发中，很多区域是不允许用户select的，在IE/Safari/Chrome中我们可以使用onselectstart事件来阻止用户选定元素内文本，但在火狐中，这段区域还是可以选择的，如下

纯CSS实现背景半透明文字不透明效果兼容IE6

复制代码代码如下:IE背景半透明.alpha{width:100px;height

CSS3 透明色 RGBA使用介绍

RGB对于大家来说一点不陌生，他就是红色R+绿色G+蓝色B，那现在我们所说的RGBA又是什么呢？说得简单一点就是在RGB的基础上加进了一个通道Alpha。从而形成了我们今天需

IE中div被视频遮住(用embed来内嵌视频)的解决方法

使用embed来内嵌视频，因为视频是windowsmediaplayer，上面想用div浮动一些内容，之前尝试了一些方法，比如1.通过设定不同组件的z-index值2.通过设定wmode值结果都没

HTML+CSS+JavaScript通过嵌套ul li实现简单的二级菜单

复制代码代码如下:HTML网页如下：(通过嵌套的)(兼容IE6-9,谷歌火狐等主流浏览器)复制代码代码如下:

给table的tr添加border-top时没有效果的解决方法

解决办法如下：复制代码代码如下:table{border-collapse:collapse;}

固定Table第一行或某几行不随滚动条滚动而滚动

样式：复制代码代码如下:.fixedHead{position:relative;top:expression(this.offsetParent.scrollTop-2);}使用：复制代码代码如下:<t

CSS3正方体旋转示例代码

效果图：css代码：复制代码代码如下:@keyframesspin{from{transform:rotateY(0);}to{transform:rotateY(-360deg);}}@keyframesspin-vertical{from{transform

css按坐标取背景图示例代码

背景图：效果：代码：复制代码代码如下:.spanicon{width:32px;height:32px;background:url(http://img.blog.csdn.net/20130808153035296)no

CSS控制图片、表格、背景颜色渐变示例

CSSFilter是IE特有的技术，其他浏览器均不支持，所以为了最大的兼容性及标准化，应尽量避免为IE单独使用Filter，如需要其某些特效，应同时考虑其他浏览器，图片渐变复制

CSS实现兼容性的渐变背景(gradient)效果兼容众多浏览器

一、有点俗态的开场白要是两年前，实现“兼容性的渐变效果”这个说法估计不会被提出来的，那个时候，说起渐变背景，想到的多半是IE的渐变滤镜，其他浏览器尚

给表格设置不重叠的边框(单线边框)的2种方法

大多数朋友都会遇到给表格table设置边框的情况，但效果总是达不到预期，比如某几根线会因重复设置而加粗，破坏了整体效果。下面我给大家介绍两种设置单线边框的css样

低权重原则——避免滥用子选择器

CSS的选择符是有权重的，当不同选择符的样式设置有冲突时，会采用权重高的选择符设置的样式。如果CSS选择符权重相同，那么样式会遵循就近原则，哪个选择符最后定义，就

CSS Border属性solid(实线)使用介绍

制作过网页的人都有为画线而烦恼的经历，先来认识一下“Border”（画边框），它是CSS的一个属性，用它可以给能确定范围的HTML标记（如TD、DIV等等）画边框，它

纯CSS实现箭头、气泡让提示功能具有三角形图标

演示地址：CSSTrianglesDemo本文两种实现方式:使用或不使用before和:after伪元素(伪类,pseudo-elements)最近重新设计了我的网站，准备添加tooltips提示信息效果.实

CSS 文本渲染属性text-rendering的介绍和使用示例

摘要：CSS关于文本渲染的属性text-rendering告诉渲染引擎工作时如何优化显示文本。浏览器会在渲染速度、易读性（清晰度）和几何精度方面做一个权衡。我们知道，SVG-可

常见浏览器兼容性问题与解决方案css篇

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查

纯CSS3制作的简洁蓝白风格的登录模板(非IE效果更好)

效果图：复制代码代码如下:源码如下纯CSS3制作的登录模板简洁蓝白(非IE效果更好)<METAcontent

CSS background属性(背景属性)详解

可以在background属性中设置所有的背景属性。可以设置如下属性：•background-color颜色•background-position位置•background-size大小•backg

圆形头像图标运用border属性轻松实现

几乎所有应用的头像和图标除了方的还是方的，但从PATH开始，其出色的UI和交互让众多APP在前端设计上开始独下匠心。PATH中的用户头像图标也开始了使用最美的图形&md

如何让图片相对于上层DIV始终保持水平、垂直都居中

复制代码代码如下:<htmlxmlns="http:

CSS 鼠标样式和手指样式整理

巧合要用到鼠标样式效果，就顺便整理了下十五种CSS鼠标样式，小例子供大家使用啊。CSS鼠标样式语法如下：任意标签中插入style="cursor:*"例子：文本或其它页面元素<a

部分透明的蒙版效果实现思路(兼容ie6)

先看下要实现的效果图片png24位的图片如下与普通的蒙版效果不一样，需要有一个空白的地方显示页面上原有的动态内容；实现思路如下：1:要支持图的半透明效果，需要采用

有关首行首字下沉的实现原理及代码

下面是两个个小技巧，一个是很多报刊中的首字下沉，其实很简单，原理就是在样式中添加后缀即可。还有一个是对第一行文字进行单独样式。给这段标签添加后缀即可。这两

解决IE6,IE7不能隐藏(overflow:hidden)绝对定位溢出的内容

令人蛋疼的IE，IE6/IE7下父元素有相对/绝对定位时，子元素在IE6和IE7下overflow:hidden;失效。情况一：（在parent上增加position:relative）复制代码代码如下:.parent

发现两个有趣的CSS3动画效果

一、CSS3画机器猫哆啦A梦效果图：可用于浏览器对CSS3支持情况的测试但最近有人对这个测试表示怀疑，指该测试使用了偏向性代码，测试的CSS代码偏向于支持Chrome，Safa

LESSCSS让CSS使用起来更加灵活成就CSS动态化

提到LESSCSS，可能大家不都不太了解。LESSCSS是属于css中的一种动态语言。他可以让CSS使用起来更加灵活，使用方式形如JavaScript中的一些变量，函数等。LESSCSS可以

在div底部显示背景图片实现代码

下面代码实现div层背景图片在底部显示：复制代码代码如下:div{background:url(/images/bg.jpg)no-repeatfixed;background-position-y:bottom;}代码详解：复制代码代

min-width最小宽度的作用介绍

在网页中，如果一个元素没有设置最小宽度(min-width)，这时当浏览器缩小到一定程度时，元素中的布局可能会发生变化。如果想要保持布局不变，可以给该元素（如div)设置

CSS 样式覆盖原理示例介绍

对同一个标签设置多个相同属性，但是值不一样，那么该标签的属性会根据那个设定的为标准呢？对于同一个标签元素设置属性，满足这样一个规则：元素单独设置的样式>clas

header导航菜单固定当页面往下拉时固定导航

最近开发的一个网站头部分为上下两块，上面是快捷入口部分，下面是导航菜单部分。现在的需求是当页面往下拉时，快捷入口部分被遮住，而导航菜单固定，而且处于window最

在ul中使li水平布局的两种方法

第一种：使用float:left。http://jsfiddle.net/tounaobun/DE596/第二种：使用display:inline。http://jsfiddle.net/tounaobun/DE596/1/

用CSS截断字符串的两种实用方法

方法一：复制代码代码如下:任意长度的字符串说明：优点是内容可以为任何HTML元素，包括超链接和图片等，在

用滤镜实现背景图片的拉伸效果代码

复制代码代码如下:body{FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,src='0921.jpg',sizingMethod='scale')}

两个div左边的固定宽度右边的自动填充的css

复制代码代码如下:<divid="right"

表格的头部固定效果通过css及jquery分别实现

1.第一种方式利用css的样式来实现表格的头部固定复制代码代码如下:<metahttp-equiv="Content-Type"content="text/html;charset=GB2

css a标签的visied伪类失效原因介绍

复制代码代码如下:.pic1:visited{background:url(images/v_puddytat.gif)no-repeat;}用火狐还是ie都无法显示访问后的图片状态。据说:visited存在泄露隐私的顾虑，

css和jquery设置文字的显示和隐藏

1.先设置为none：复制代码代码如下:(该名称已经有人使用!)2.需要触发的时候设置为空（‘’）：复制代码代码如下:$("#loginN

display:inline-block的使用示例

在实习中做专题时，遇到的一个问题：建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置float：left；不就行了但是这个有一个问题，你必须把外面的d

css3实现背景图片拉伸效果像桌面壁纸一样

使用css3属性：background-sizebackground-size：cover即可实现像桌面壁纸一样拉伸以下是w3c上面的解释：语法复制代码代码如下:background-size:length|percentage|

input 按钮背景在IE6 IE7中不显示的解决方法

首先现在使用IE6IE7等低级浏览器的人已经被时代抛弃，但是顾客就是上帝，时代抛弃他们，我们不能抛弃，但是求求你们快换个高级点儿的吧~废话少说复制代码代码如下:cs

CSS3实现的闪烁跳跃进度条示例(附源码)

这个示例的原理是通过大量的css3属性来实现的，如：animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n)，来进行

IE6下div层被select控件遮住的问题解决方法

这个应该在网上有很多解决的办法，只不过很多问题解决了之后就忘了，之后遇到了再去找有时就找不到了，就当给自己做个笔记了方法很简单在层里套个iframe能看见我了吗

css3学习心得分享

css3实现了很多以前需要用图片实现的效果（渐变边框，盒阴影，真正的圆角，字阴影，多图片背景，字体透明度等)还统一了部分标准样式（text-overflow,word-wrap,opcity），

ie6,7下空DIV无任何内容时占据空间问题解决

当在div标签内无任何内容时：如果给div元素设置了宽度时，比如width:100%，此时div在IE中（IE6，IE7）将占据空间，而在其他浏览器中不占据空间。复制代码代码如下:最简单

IE6 innerHTML写入的iframe src不显示BUG的解决方法

IE下得标签BUG有很多，这次是用innerHTML写入的iframe不显示，在网上查了很久，终于找出了元凶，标签的href属性导致了BUG无法显示，这个属性去掉就好了，以后遇到在IE下

滚动视差效果background-attachment实战记录

滚动视差效果的实现原理是在同一个页面上将页面元素分为多层，例如可以分为背景、内容、贴图层，在滚动页面的时候让三者滚动的速度不一，从而在人的视觉上能够形成一

table表格的一些常用属性介绍

word-break:keep-all；字体不断开table-layout:fixed;列宽由表格宽度和列宽度设定，默认由表格的内容决定列宽。white-space:nowrap：HTML中td元素的nowrap属性表示禁

css 控制鼠标显示样式示例

复制代码代码如下:文本然后*换成下面的一种就行：hand手型crosshair十字型text移动到文本上的那种效果wait等待的那种效果default默认效果help问号e-size向右的箭头

在input中右边加上一个图标的css样式

复制代码代码如下:.phone-input{padding-right:20px;background:url("resource/***.gif")no-repeatscrollri

.clear 万能清除浮动(clearfix:after)

一般情况下：复制代码代码如下:htmlbodydiv.clear,htmlbodyspan.clear{background:none;border:0;clear:both;display:block;float:none;

css清除浮动clearfix:after的用法详解（附完整代码）

网上常用的完整代码：CSSCode复制内容到剪贴板.clearfix:before,.clearfix:after{content:"";display:table;}.clearfix:after{clear:both;ov

chrome表单自动填充导致input文本框背景变成偏黄色问题解决

chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：

CSS对浏览器的兼容性性处理(IE7,6与Fireofx)

从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于浏览器的兼容性问题,请尽量用符合W3C标准格式写代码。而且DOCTYPE影响CSS处理,作为W3C的标准,一定

div使用margin:0px auto不居中的原因分析及解决

一般在将div居中显示时，使用css：复制代码代码如下:divX{margin:0auto;}此css在firefox下是好的，但是在ie下不起作用，网上看到原因如下：复制代码代码如下:margin:0

CSS 控制因Html页面高度导致抖动的问题解决方法

在CSS中添加如下代码：复制代码代码如下:html,body{overflow-y:scroll;}html,body{overflow:scroll;min-height:101%;}html{overflow:-moz-scrollbars-vertical;}已

CSS控制背景图像平铺实现边框阴影效果

一款用CSS控制背景图像平铺，从而实现区域边框阴影的效果，虽然用到了图片，但可贵之处是本代码不管你需要阴影的区域是多大，它都能自动适应，因些还是很值得收藏一下

CSS3制作ajax loader icon实现思路及代码

本文用到的两个CSS3属性：transform、animation一、HTML复制代码代码如下:</di

瀑布流布局的两种实现方式：传统多列浮动和绝对定位布局

传统多列浮动各列固定宽度，并且左浮动；一列中的数据块为一组，列中的每个数据块依次排列即可；更多数据加载时，需要分别插入到不同的列上；优点:（1）布局简单，应该说没

css在不同浏览器中的唯一标识以height属性为例

复制代码代码如下:height:73px;/*正常浏览器*//*chrome*/-moz-height:73px;/*firefox*/_height:73px;/*IE6*/*height:73px;/*IE7*/height:73px\9;

background和background-Color的区别介绍

在设置输入框变成一条线的样式时遇到一个小问题。无论怎么设置background-color:#aaa;输入框的背景都没有变而设置background:#aaa;背景就改变了。后来发现原因ba

IE9 CSS因Mime类型不匹配而被忽略问题相关解答

写页面的时候在chrome，fireforks等页面上显示正常，但是换成IE9之后就完全没有样式了。IE真是个奇葩的怪胎。它的报错信息是’CSS因Mime类型不匹配而被忽略&l

Win7下Chrome字体渲染颜色太淡颜色不够黑的解决方法

很多人鄙视我用Windows，可是很多工作还得在这个系统下做。我已经在Win7中使用了MacTpye来进行字体渲染，可还是觉得Chrome的黑色字体颜色很不正。于是又找到了一种

火狐下easyui1.3.*弹出window框无法定位到中间问题解决

今天在学习easyui，在火狐下出现了一个问题，弹出window窗口时不在中间，而在IE和Google下却显示正常，如下图：从图可以看出出现的问题是因为火狐的body不是全屏，而ie

CSS table 单行布局示例代码

复制代码代码如下:<styletype="text/

固定宽高且DIV绝对居中实现思路及示例

看了一些代码，然后自己试验了一番，分享如下示例：实现点：如果元素的宽高固定,那么,css指定样式为top:50%;left:50%;而margin-top和margin-left指定为负数，绝对值为

IE8 滤镜效果filter:alpha(opacity=20);IE下失效出现黑色

坐一个滤镜效果，CSS样式如下：复制代码代码如下:.mask{width:100%;height:100%;background-color:#000;position:fixed;top:0px;left:0px;opacity:0.2;/*IE8*/filt

清除行内元素之间HTML空白的几种解决方案

至今我还记得年轻是在IE6上开发的那些苦逼日子,特别希望IE浏览器采用inline-block的显示方式.行内块(inline-block)是非常有用的,特别是想要不用'block'和'float'

CSS media queries

最近在做一些页面打印时的特殊处理接触到了mediaqueries，想系统学习一下，在MOZILLADEVELOPERNETWORK看到一篇文章讲的很不错，结合自己的使用总结一下。CSS2/media

CSS——float属性及Clear:both备忘笔记

通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性，作用就是改变块元素对象的默

element.style覆盖样式因优先级顺序导致的解决方法

最近向服务器上上传页面，原本服务器有页面的，已经用JS把它们覆盖掉了，不过在上传过页面后又发现有些样式被原来的样式依然覆盖着。审查元素后发现，有的元素的样式

HTML DIV+CSS制作通栏实例

HTMLDIV+CSS制作通栏复制代码代码如下:<meta

div嵌套 img 空白解决方法

如果上下两个图片都用div包含的，但是有空白出现解决方法：给img标签添加属性，display:block;这样，问题就解决了

IE6/7下多种方法移除button、input 默认边框和去掉焦点线

一、去掉边框：看看基本的HTML：复制代码代码如下:<inputty

css3进行截取替代js的substring

在css3出现之前，一般采用substring来进行截取，现在不用js，纯css3也能进行截取了：复制代码代码如下:text-overflow：clip|ellipsis1.clip:要在一定的高度内，配合ove

css中换行的几种常用方式整理

1.white-space:normal;这个只针对中文有效2.word-break:break-all;强制换行，针对中文，数字，英文等都有效；3.word-wrap:break-word;英文单词碰到换行的时候，整个单

CSS之Position全面认识

CSS的很多其他属性大多容易理解，比如字体，文本，背景等。有些CSS书籍也会对这些简单的属性进行大张旗鼓的介绍，而偏偏忽略了对一些难缠的属性讲解，有避重就轻的嫌疑

css中position:relative和overflow:hidden之间的问题

今天在做网页的时候发现一个问题，在父标签中使用了overflow:hidden;时，如果子标签中有元素的position设置成relative的时候，在IE6和IE7中父元素的overflow对其将不

CSS清除浮动使父级元素展开的三个方法

一个没有设置高度的容器div内如果存在浮动元素（即使用了属性float:left或者float:right)，那么该父级元素会无法展开。举个例子，有一个div容器，div容器里有两个小容

css 高度自适应的问题示例探讨

对象height:100%并不能直接产生效果，是因为跟其父对象有关。复制代码代码如下:#center{height:100%;}上面的css样式是无效的，不会产生任何效果。需要改写：复制代码

css实现的圆角效果带有注释

圆角注释复制代码代码如下:/***这个圆角的思路在于，用缩小化的视觉感受体现的,其实每一个弯角是用两个像素的"-"与一个像素的"."与两个像素的"|"实现的.*b1与b1b相

css按钮自适应实现原理及代码

原理：利用a标签和i标签各自一个背景组合成为按钮，达到自适应。复制代码代码如下:.btna{text-decoration:none;}.

如何用float配合position:relative实现居中

今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数，程序那边根据循环实现放几个切换的按钮，但是按钮相对于整体的要居中，刚开始想着用display:inl

css的margin缩写方式有效提高书写效率

复制代码代码如下:margin:20px;（上、下、左、右各20px。）<

css body背景图全屏不论分辨率大小

cssbody背景图全屏,不论分辨率大小。在body里嵌套一个img元素，控制这个img的z-index为-1即可。复制代码代码如下:<imgid="bg"src="../images/bg.jpg"width="100%"

CSS左右两列自适应高布局示例代码

复制代码代码如下:<htmlxmlns="http:

CSS简单实现重叠线效果

复制代码代码如下:*{padding:0;margin:0;}/*demo偷懒充值样式

CSS inline-block属性概述及其使用示例

Inline-block是元素display属性的一个值。这个名字的由来是因为，可以简单的解释为inline+block；display设置这个值的元素，兼具行内元素（inlineelements）跟块级元素

css让页脚始终在底部不论页面内容多少

让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。方案一：复制代码代码如下:body,html{margin:0;

CSS如何实现表头冻结效果

复制代码代码如下:<htmlxmlns="http://www.w3.org

css中文字加图片的布局实现

html:复制代码代码如下:aaaaabbbbbbbbbbbbbcccccss:复制代码代码如下:

CSS控制让每行显示4个图片的样式

这个样式就可以让每行显示4个外面的.liStyle{width:700px;float:left;}里面的.liStyleli{list-style:none;width:170px;float:left;}

关于多行文字水平垂直居中的一点心得分享

前些天在W3CPlus看到了一篇文章，提到用CSS制作水平垂直居中，在测试其中的第六点时发现了一些小问题：添加了一个无意义的新标签复制代码代码如下:当设定内容宽度的

CSS制作水平垂直居中对齐多种方式各有千秋

作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式

CSS画出各种三角形如等边三角形

下面的代码将演示三角形如何产生HTML复制代码代码如下:LESS复制代码代码如下:.triangles{border:50pxsolidtransparent;border-top-color:#0075a9;bo

CSS 图像透明度opacity兼容性介绍

以前的兼容复制代码代码如下:.transparent_class{<spanclass="attribute"style="color:rgb(181,13

首页 35 36 37 38 39 40 41 42 43 44 末页共101页

www.syssdc.com 常春岛资源网

139,976互联网资源

144,792高清电影

21,817无损音乐

631,128技术资源

网页制作第40页

更新日志

友情链接

网页制作 第40页

更新日志

友情链接

网页制作第40页