网页制作 第41页

hasLayOut与css属性的关系介绍
当设定某一元素的css属性,能够触发该元素的layOut布局,不管该元素是否具备layOut属性,一旦触发该元素的layOut属性,将元素的hasLayout设成了true。
CSS背景图坐标定位详解及负数的使用技巧
背景图像定位中我们要明确的几点:1、两个值前面一个是横向的定位,我们称为x轴方向定位。后面一个值是纵向的定位,我们称为y轴方向定位。如果只有一个值,那默认的就
CSS实现HTML背景图片拉伸铺满示例
上代码:CSS代码复制代码代码如下:#img{z-index:-1;filter:alpha(opacity=85);/*设置透明度,针对IE8以及更早的版本。IE9,Firefox,Chrome,Opera和Safari使用属性op
CSS中cursor属性的鼠标样式明细
auto:标准光标default:标准箭头hand:手形光标wait:等待光标text:I形光标vertical-text:水平I形光标no-drop:不可拖动光
简明CSS定位属性position
POSITION该属性用来决定元素在页面上的位置。用法:position:static(默认)|fixed|relative|absolutestatic遵守正常的文档流,不设置top,bottom,left,right值。fixe
关于CSS中 星号*的使用介绍
*号就是说是指定为IE6和更低版本来使用。非IE的浏览器就不认得。原理是:HTML元素被认为是网页上的第一个元素,即根元素,但是IE7以下的所有版本有一个匿名的根元素
css实现鼠标滑过改变文字(中文变英文)
复制代码代码如下:<htmlxmlns="http:
CSS实现段落首行缩进两个字符不再使用空格
段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。复制
Google浏览器CSS居中兼容问题完美解决方法
div做的界面时,又出现CSShack(CSS兼容浏览器问题)在IE内核浏览器或者firefox浏览器中都能居中,没有居中的可以用其特殊标签来设定居中,如下划线_IE6优先识别,!imp
CSS定义鼠标经过时鼠标图形的十五种样式整理
CSS鼠标样式语法如下:text是移动到文本上的那种效果wait是等待的那种效果default是默认效果e-resize是向右的箭头ne-resize是向右上的箭头n-resize是向上的箭头nw
利用CSS3的特性改变文本选中时的颜色
今天打开TechCrunch的中文网站,选中文字时选区颜色变成了绿色,跟网站整体的绿色风格非常协调。于是对实现细节感兴趣,一探究竟。实现很简单,利用CSS3的特性。复制
CSS常见属性缩写与全写对比
【font】简写:font:italicsmall-capsbold12px/1.5emarial,verdana;等效于:font-style:italic;font-variant:small-caps;font-weight:bold;font-size:12px;li
FLASH遮挡DIV浮动层解决方案兼容IE FF Chrome
做项目的时候经常会遇到DIV浮动层被FLASH遮挡的,下面给出解决方案。IE下:复制代码代码如下:FireFox和Chrome下:复制代码代码如下:<embedsrc="http://player.56
IE6下Png透明最佳解决方案DD_belatedPNG
这个问题曾经困扰我许久许久……曾经一度的采用滤镜的方法搞定这个问题,但是这种方法有个弊端。就是当有多个png图片的时候,这就造成了css的压力,得写
让多个div在同一行显示的样式及html代码
以下为css样式:复制代码代码如下:div{margin-bottom:10px;clear:both;word-break:break-all;word-wrap:break-word;}复制代码代码如下:<!--wid
妙用z-index让一个div显示在最前面
position定位如果有重叠的时候,z-index愈大,就显示在最上面此时我们就可以设置div的css样式z-index:99999,那么该div就显示在最前面
IE下模拟css3中的box-shadow(阴影)效果代码
在ie下模拟css3中的box-shadow(阴影)可以使用ie的Shadow(阴影)滤镜基本语法:filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’,Dire
Css基本概念及其引入方式介绍
1.css的引入方式:(1)链接引入:复制代码代码如下:(2)文档内设置css:复制代码代码如下:<!--.STYLE1{color:#0066CC}--
全局CSS的设置(基础样式重置)
复制代码代码如下:引用JSP,引用默认CSS;受注入力div.num{text-align:right;padding-right:5px;}.er
CSS3媒体查询(Media Queries)介绍
媒体类型all所有设备screen电脑显示器handheld便携设备tv电视类型设备print打印用纸打印预览视图关键字andnot(排除某种设备)only(限定某种设备)媒体特性媒体特性
Firefox专属hack的写法介绍
之前只有ie6、ie6、firefox时,只要写!important就能够零丁给firefox做hack了,可是此刻多了ie八、opera、chrome等这些个所说的规范浏览器后,firefox能熟悉的工具它
IE9的css hack使用示例
以前写过《IE8的csshack》,ie9一出csshack也该更新,以前一直没关注,今天在内部参考群mxclion分享了IE9的csshack,拿出来也分享一下:复制代码代码如下:select{back
div实现阴影边框效果(适应各主流浏览器)
复制代码代码如下:CSs阴影框,Div阴影*{margin:0;padding:0;border:0;}body{padding:4em;fon
CSS中文字怎么斜体?CSS中让文字变成斜体的方法
CSS中文字怎么斜体呢?这是我们日常生活中可以遇到的问题,因为我在前些日子也遇到了,然后就总结了一下。希望能对大家有所帮助。Font-style:在CSS中用Font-style属
CSS两种水平垂直居中示例介绍
第一种:将固定大小的div框相对窗口水平垂直居中,改变浏览器窗口大小时,依然保持水平垂直居中;复制代码代码如下:水平垂直居中<style
IE10 CSS Hack介绍及IE11的CSS Hack提前了解
有IE就有hack,看看IE9的csshack,IE8的csshack;上次同事说一个页面IE10下有问题,IE9下测试了一下,也有同样的问题。悲剧了赶紧找IE10的hack。google上翻到的IE10CS
CSS去除列表默认边距的简单方法
简单方法:ul左侧边距设定及div中每行实现虚线复制代码代码如下:body,div,ol,ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input{margin:0;padding:
font-weight 属性设置文本的粗细介绍
说明该属性用于设置显示元素的文本中所用的字体加粗。数字值400相当于关键字normal,700等价于bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而
css中em px 区别你真的了解吗
之前听人说过,网站制作中字体单位应该用em而不用px,原因简单来说就是支持IE6下的字体缩放,在页面中按ctrl+滚轮,字体以px为单位的网站没有反应。px是绝对单位,不支
使用CSS布局定位属性轻松实现优美站点布局
CSS定位属性:◆bottom、left、right和top◆position◆clip◆float◆clear◆overflow◆z-index该类属性设置元素在父级元素中的位置。在设置这类元素时,如果设置长
CSS中使用text-transform实现首字母大写
CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多,有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写。这时候我
Div+Css画圆示例代码
复制代码代码如下:Jxchen.box{border
UL里的LI元素左浮动层一行显示时使其居中的方法
在制作页面是,li浮动是很常用的,一般情况也不用其居中,但有时,其特殊原因需要居中,这是就有点犯难了,这里有了一个很好的解决方法,主要是用了相对定位的原理。在u
body背景图片拉伸另类实现
body背景图没有拉伸效果,所以只能使用其他方法了如下方法,IE中测试可行:复制代码代码如下:body{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src
clear:both 的作用介绍
如:复制代码代码如下:TESTDIV<divstyle="clea
用ul、li标签创建css横向导航菜单示例
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里,这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控
在ie7下css居中样式text-align:center;偏左问题解决方法
复制代码代码如下:body{text-align:center;}用ie7打开是居左的。万能float闭合(非常重要!)关于clearfloat的原理可参见将以下代码加入Glob
如何解决IE6/IE7不识别display:inline-block属性
ie6,ie7的haslayout属性是个让人头疼的问题。在做导航条的时候,一般会用到ulli结构,大多数时候我们是把li设置为浮动,让其并排显示在同一行。还有一种方法就是设置
CSS复合选择器使用介绍
1.子选择器复制代码代码如下:#pic>img{//使用>号,让选择器只选择直接的子类,width:200px;height:200px;}<imgsrc="1.jpg"alt="p
控制DIV中文字绝对居中的简单方法
搞了这么久,以前不知道怎么弄,老是用表格,今天终于搞清楚了。。。水平居中:Content垂直居中:Content两者结合,就可以绝对居中了:复
如何终止DIV的float属性简单实现
终止DIV的float属性,在css里面定义一个样式复制代码代码如下:.clear_float{clear:both;}页面使用时加上一行后面的div将不再float。
chrome居中但ie不居中的解决方法
CSS如何使DIV层水平居中今天用CSS碰到个很棘手的问题,DIV本身没有定义自己居中的属性,网上很多的方法都是介绍用上级的text-align:center然后嵌套一层DIV来解决问
CSS定义超链接四个状态的正确顺序L-V-H-A
css定义超链接是要有先后顺序的。否则,在某些浏览器里面有可能会出现某个样式不起作用的bug。不能正确显示想要的效果。CSS属性的排列顺序:L-V-H-A。L-V-H-A是lin
让IE6/IE7/IE8支持CSS3属性的8种方法介绍
我们都知道,IE浏览器暂不支持CSS3的一些属性。国外的工程师们,不安于此现状,他们总是尽量使用一些手段使IE浏览器也能支持CSS3属性,我觉得这些都是很有意义,很有价
让IE6支持important的注意事项
IE6真的不认识不支持!important吗?答案是:No!现在举几个例子说明这个问题,以下面的XHTML代码为例:复制代码代码如下:这里是第一行文字那这里就是第二行文字咯这里
css的三种定位方式使用探讨
css3种类型定位方式,进行控制页面布局:普通定位,浮动定位,绝对定位。默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float具体
CSS3用@font-face实现自定义英文字体
现在CSS3已经很流行了。传说中的CSS3基本上什么都可以,那么CSS3中可不可以自定义英文字体呢?答案是非常可以。用@font-face即可实现自定义英文字体,下面咱们一起去
图片下面出现空白像素BUG的常用解决方法归纳
在进行页面的DIV+CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的,对于该问题的解决方法也是“见机行
CSS中display:block的作用介绍
是块元素,那在布局时候,在div的元素里面写display:block有用吗?回答:对所有的块元素都没有意义,块元素的dispaly属性默认值为block,没必要再显式定义—&mdas
Css样式--字体样式和链接样式详解
1.指定字体:font-family(1)实用通用字体系列:复制代码代码如下:body{font-family:sans-serif;}(2)制定字体系列:复制代码代码如下:h1{font-family:Georgia,<spans
CSS样式定义的优先级顺序介绍
层叠优先级是:浏览器缺省@import"b.css";import的优先级要高于第一种,但是
Css样式--文本样式详解
1.文本缩进:text-indent复制代码代码如下:p{text-indent:5em;}1.实用负值:设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的
Css样式--背景样式详解
背景:1.背景属性都不能继承2.背景色:其默认值是transparent。transparent有“透明”之意h1{background-color:#00ff00}3.背景图像:背景重复背景定位复制
Hack 只针对IE的写法
实现一个大表单页,表单元素比如select/input:text等需要%来定义宽度。之前是px来定义宽度,精确到像素,所以对的很齐,但是用%来定义之后,在IE下select跟input:text
通过CSS让TD自动换行
HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。但使用时要注意的是,td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度,则nowrap属
css3中background新增的4个新的相关属性用法介绍
关于background属性用法,相信许多重构人员都很熟悉了,在css3中,background属性依然保持以前的用法,不过可以允许在该属性中添加多个背景图像组,背景图像之间通过逗
纯CSS3实现带动画效果导航菜单无需js
随着互联网的发展,网页能表现的东西越来越多。由最开始单纯的文字和链接构成的网页,到后来的表格布局,再到div+css模式,现在发展到了html+css3。网页能表达的东西
css中ul li的背景小图标属性设置的两种情况
这里我们分两种情况列出:①当标题前的图标是很长的一绺而不是单独的一个点或者类似图标时,在定义背景图background要定义在里。因为很长,所以放在的外边里②当标题
css sprite原理优缺点及使用示例介绍
CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图
谈谈CSS的边距合并之我的理解
今天通过和一些师弟的交流,发现他们对外边距合并不是很理解。其实浅析CSS的外边距合并的话,是很容易明白是怎么一回事儿的。但是如果想要深入了解margin这个神奇的
css 文本两端对齐应用实例
在做表单时我们经常遇到让上下两个字段对齐的情况,比如姓名,手机号码,出生地。这样我们就要用到text-align,text-justify样式了。text-align直接设为justify就行了
cellpadding=0 cellspacing=0的css替代写法
复制代码代码如下:cellpadding="0"cellspacing="0"的css替代border-collapse:collapse;
使用CSS3在触屏上为按钮实现激活效果
1.:hover伪类在触屏上表现不完美,在Android的WebView中,WebKit会处理touch事件和mouse事件,当手指停留在按钮上,hover状态的确被触发,但是当手指保持接触屏幕并离
任意图片实现垂直居中的三种方法(兼容性还不错)
在网站开发过程中,可能会有希望图片垂直居中的情况,而且,需要垂直居中的图片的高度也不确定,这就会给页面的布局带来一定的挑战。我总结了一下,曾经使用过的几种方
css实现li中文本超出行宽自动隐藏
复制代码代码如下:.aa{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
CSS设置DIV背景色渐变显示兼容IE/火狐/谷歌
复制代码代码如下:.linear{width:100%;height:600px;FILTER:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#
通过定位来实现不定宽度居中显示
在制作中内容居中通常方法是给容器width固定宽度,然后text-align:center;margin:0auto;或者将块装换成内联元素display:inline,然后text-align:center就能实现居中
IE6: border的transparent透明解决方案
代码如下:复制代码代码如下:border:solid1pxtransparent;_border-color:tomato;_filter:chroma(color=tomato);说明:Chroma属性可以设置一个对象中指定的颜色为透
CSS样式的基础学习总结
一.CSS基本介绍级联样式表(CascadingStyleSheet)简称“CSS”,通常又称为“风格样式表(StyleSheet)”,它是用来进行网页风格设计的。比如,如果
div+css制作圆角矩形的原理示例解读
复制代码代码如下:<HTMLXMLns="http:
css美化表格让其隔行变色显示
在html中常常需要从数据库中获取数据然后显示到浏览器上,显示的方式一般是用表格。单一的表格很容易使人感到枯燥,使用变色效果可以使得表格看起来更加舒适。实现
!important用法使用介绍
*对于Ie系列浏览器都能够识别,firefox浏览器则不能识别;!important只有Ie7.0和firefox可以识别,但是Ie6.0不能成功应用.(1)区别ie与firefox的hack为:border:2pxso
div居中显示的css样式代码
复制代码代码如下:html*{margin:0;padding:0;}body{font-family:Geneva,Arial,Helvetica,sans-serif;font-size:12px;color:#000000;
关于css控制图片大小不变形的实现思路
我是这样做的:分三层最外层,div实现一个加框或内边距中间层,一般是图片链接层定义其样式。控制宽高然后多出的部分隐藏。最内层,图片,一般控制宽度或高度即可。大
CSS中基代码base.css一览
复制代码代码如下:/*****cssset*****/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0
css中使input输入框与img(图片)在同一行居中对齐
将input和img放同一行,img标签总是比input高出一个头,难看。后来在网站搜到最多的就是给img添加一个align="absmiddle"属性,这个方法似乎的确可行,但是不符合HTML
CSS的position属性在DIV层中的应用
原来只明白position:relative是相对定位,position:absolute是绝对定位;经常看到图片轮播的下方有个半透明背景的文字描述。我现在要做这样一个效果,因为不是轮播,
多步骤进度条的实现原理及代码
很多分步骤的流程都会有一个多步骤进度条,很直观的显示用户每一步的操作状态,像淘宝的购物流程其实现方法其实很简单,只需要把每一步分隔处的箭头切下来,然后灵活
通过css加载远程字体示例代码
复制代码代码如下:@font-face{font-family:'C39HrP72DlTt';src:url('C39HrP72DlTt.eot');src:local('C39HrP72DlTt'),url('C39HrP72DlT
css中默认中文字体font-family列表
Windows的一些:黑体:SimHei宋体:SimSun新宋体:NSimSun仿宋:FangSong楷体:KaiTi仿宋_GB2312:FangSong_GB2312楷体_GB2312:KaiTi_GB2312微软雅黑体:MicrosoftYaHei装
CSS3图片旋转特效(360/60/-360度)
由于没法展示效果只是截了个图下面是实现代码:复制代码代码如下:p#socialiconsimg{/*1stsetoficons.Rotatethem360degonmouseoverandout*/-moz-transition:all0.8
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
大家在制作的时候有时候会碰到英文文本超过固定宽度,不会自己换行的问题。这种问题以前解决的时候大多都用overflow:hidden或者JavaScript来控制,让其看起来接近完
如何使用CSS sprites减少HTTP请求
sprites是鬼怪,小妖精,调皮鬼的意思,初听这个高端洋气的名字我被震慑住了,一步步掀开其面纱后发觉很简单的东西,作用却很大神马是CSS小妖精CSSsprites是指把网页中
CSS背景色镂空技术实际应用及进阶分享
一、背景色镂空?什么玩意?其实在10年的时候,3年前我就介绍过背景色镂空技术,文章名为:“使用CSS实现Photoshop选区效果及应用”。实现的就是类似下面的
CSS怎么将背景图左移/上移/右移10px
背影图片的左上角相对当前元素左上角的坐标。右为X轴正半轴,下为Y轴正半轴当前元素左上角坐标为0,0默认图片的左上角正对当前元素的左上角如果图片想向左移10px;复
CSS写的简单表格示例
复制代码代码如下:个人信息登记caption{heig
css div实现的遮罩层完美兼容IE6-IE9 FireFox
Html代码:复制代码代码如下:<divstyle="float:left;paddi
CSS3之边框多颜色Border-color属性使用示例
CSS3之边框多颜色Border-color是专为边框的多颜色而准备的属性。在CSS2中也有边框颜色这个属性,但是边框颜色属性在CSS3中又有什么惊人之举呢?下面就为大家介绍一
通过margin:0px auto来实现一列固定宽度居中
复制代码代码如下:XHTMLCODE:一列固定宽度居中CSSCODE:复制代码代码如下:#layout{background-color:#C7E091;border:2pxsolid#B0BCA6;width:400px;he
CSS样式设置元素的透明度以50%为例
下面的代码兼容各种浏览器,用于定义对象的透明度,本范例设置透明度为50%复制代码代码如下:.transparent_class{/*http://www.sharejs.com/codes/*/filter:alpha(o
通过CSS样式设置网页的最小宽度以将宽度固定为600px为例
通过CSS样式设置网页的最小宽度,下面的样式将网页的最小宽度固定为600pxhtml代码,将所有的内容都放到id=container的容器内复制代码代码如下:CSS样式代码,指定最小
CSS定义被动态选中的文本的颜色示例代码
这段CSS代码可以用来定义被动态选中的文本内容的颜色复制代码代码如下:::-moz-selection{background-color:#FFA;color:#000;}/*WorksinSafari*/::selection{back
CSS为指定的input文本框添加背景
其实代码很简单,只需要指定input的background-image样式即可,下面是一段范例代码复制代码代码如下:input#sometextbox{background-image:url('back-image.gif');b
CSS控制漂亮的网页打印效果示例代码
复制代码代码如下:@mediaall{.page-break{display:none;}}@mediaprint{.page-break{display:block;page-break-before:always;}}
png图片在ie8浏览器下有黑色边框的解决方法
复制代码代码如下:background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif是一个透明的图片文件*/filter:progid:D
CSS中overflow:scroll怎么设置只上下滚动而不左右滚动
CSS中"overflow:scroll"默认是左右,上下都滚动如何设置成:当长度超出DIV长度的时候,只有上下滚动,左右无论超出多长都不滚动,也不会出现下面的滚动杆?如果左右没有
CSS实现超级链接需要通过双击后跳转
CSS代码复制代码代码如下:.test3span{position:relative;}.test3spana{position:relative;z-index:2;}.test3spana:hover,.test3spana:active{z-index
CSS控制当鼠标滑过时更换图片的效果
复制代码代码如下:<htmlxmlns="http:
图片与文字同排垂直居中的CSS样式
单独文字垂直居中我们只需要设置CSS样式line-height属性即可。文字与图片同排,在设置div高度同时再对此css样式的图片“img”样式设置vertical-align:m