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

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

2018-08-14

CSS+jquery+JS轻松实现瀑布流布局

CSS部分核心代码<style type="text/css">.case-list {position:relative;}.case-list li {position:absolute;}.case-list li img {width:200px;}</style> HTML部分...

2018-08-14

IE6/Chrome谷歌浏览器背景图片居中1像素偏移

场景:一张1400像素的背景图片,把这张背景图片作为居中显示,其中body的宽度为950并居中显示。在正常情况下,背景图片和body部分的内容是对齐的。经测试:IE7/8/9/10,opera,火狐...

2018-08-14

CSS知识:探讨清除浮动的原理

当有盒子进行浮动后,文字会环绕着浮动的盒子如果不希望文字环绕浮动的盒子,我们只要在文字所在盒子里加上clear即可。务必注意!对clear属性的设置要放到文字所在的盒子里,例如一...

2018-08-14

CSS基础之:常用CSS命名规则

布局CSS命名规则页头:header侧栏:sideBar页面主体:main内容:content页脚:footer外套 wrap容器:container版权页标记:colophon导航CSS命名规则导航:nav子导航:subNav主导航:ma...

2018-08-14

line-height带单位与不带单位有什么区别

line-height带单位line-height:26px; 表示行高为26个像素line-heigth:26%;表示行高为当前字体大小的26%line-height:26em; 表示行高为当前字体大小的26倍带单位的行高都有继...

2018-08-14

CSS限制图片大小的方法

是不是在设计网页时经常遗漏图片大小问题?SJY就犯过这样的错,自以为网页设计的很完美了,上线后在某一篇文章中用到了大型图片,整个页面就此全乱了。在标准浏览器中,图片大小...

2018-08-14

CSS去除图片超链接虚线边框

标准浏览器去除图片超链接虚线边框 一般在全局定义a标签时加入outline:none;属性,如?a{outline:none; } IE浏览器去除图片超链接虚线边框 在html中加入 hidefoc...

2018-08-14

如何让IE浏览器支持CSS3属性

向让IE浏览器支持CSS3属性,首先得下载微软提供的让IE支持部分CSS3属性的脚本文件?ie-css3.htc 下载地址:https://pan.baidu.com/s/1o7HItvG 在CSS中引入ie-css3.htc...

2018-08-14

CSS覆盖失效的原因和解决办法

我们在使用CSS给网站添加样式时,经常会用到覆盖,原则上,后添加的样式会覆盖前面的样式,但有时却会失效,这是为什么呢?今天让我们来探讨下,CSS覆盖失效的原因和解决办法。 如...

2018-08-14

解决IE6样式失效问题

为什么IE6中样式会失效?HTML页面编码与CSS编码不同(DEMO中HTML为gbk,CSS为utf-8)CSS文件中未指定@charset头声明,导致IE默认使用页面编码来解码CSS文件(DEMO中IE浏览器使用gbk来解...

2018-08-14

CSS优先级

行内样式>嵌入式>外部样式(链接式,导入式)ID>类别>标签 #zgj>.fbox>b同级时,后面的规则会覆盖前面的规则同级嵌套的越多,优先级越高;p b>b, .fbox p b>.fbox b在跟比本身高级的选...

2018-08-14

opacity的使用说明

由浮点数字和单位标识符组成的长度值。不可为负值。声明用来设置一个元素的透明度,opacity取值为1的元素是完全不透明的,反之,取值为0是完全透明的,看不见的。1到0之间的任...

2018-08-14

CSS的margin-top和父元素合并怎么办?

子元素的margin-top如果是10px,父元素的是5px,那么合并之后的效果就是10px。感觉好像父元素的margin-top=10px不起作用了。如果你想避免发生父子间的margin合并现象。就必须要...

2018-08-14

CSS让pre中的代码自动换行

<pre>元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 <pre> 标签的一个常见应用就是用来表示计算机的源...

2018-08-14

CSS外边距为什么会失效?

位于浮动元素下方的非浮动元素的上外边距会失效CSS外边距失效解决方法给浮动元素指定底部外边距。把下方的非浮动元素变成浮动元素...

2018-08-14

解决IE6下高度不正常

IE6下默认的字体尺寸大致在 12 &ndash; 14px 之间,如果你定义的块级元素高度小于这个默认值,IE6会自动把盒子撑大,他认为这个层的高度不应该小于字体的行高。所以即使你用 heig...

2018-08-14

解决IE6不支持position:fixed;的问题

在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化。 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed...

2018-08-14

解决IE6下overflow:hidden失效

在IE6下,当父元素的子元素的样式拥有position:relative属性时,父元素的overflow:hidden属性就会失效。 实例 CSS代码.box{height:50px;overflow:hidden;border:1px...

2018-08-14

float浮动元素高度自适应问题

做网页的时候时常需要用到父元素的高度随子元素的增大而增大。但当子元素进行浮动后,父元素就无法包含子元素了,给父元素增加一个边框可以看到效果。有2种方法可以解决这个问...

2018-08-14

IE6/IE7不支持first-child的解决办法

IE6、IE7不支持 first-child 属性,不过可以用其他办法替代。#sidebar li:first-child{border-top-style:none;}#sidebar li{border-top-width:1px;border-top-style:soli...

2018-08-14

IE6中position:absolute问题

position:absolute;是根据最近的带有position属性的父元素来定位,但是IE6中却发现错位了。 原因是IE6的haslayout属性,只需要激发这个属性就解决问题了,父元素CSS属性可...

2018-08-14

纯CSS如何实现圆形边框

border-radius可以实现圆角框,只要足够圆,变成正圆也没有问题。 HTML代码<a class="entry-date" href="#"></a> CSS代码.entry-date {display: block;width: 64px;h...

2018-08-14

CSS教程之:IE条件注释

条件注释是一种专用的(因此是非标准的)对常规HTML注释的Microsoft扩展。顾名思义,条件注释能够根据条件(比如浏览器版本)显示代码块。尽管是非标准的,条件注释在其他所有浏览器看...

2018-08-14

CSS教程之:display:inline-block

display:inline-block的定义 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。 浏览器兼容性 Opera、Safari...

2018-08-13

让IE6支持PNG透明图片

在网页中插入的PNG透明图片 方法一: 制作一张透明小图片nothing.gif 对需要处理的PNG图片运用以下样式.pngfix {azimuth: expression(this.pngSet?this.pngSet=...

2018-08-13

清除button按钮在IE6/IE7下的黑边

表单中的提交按钮button,在清理了其默认样式后,在IE6和IE7下仍然存在黑边,显得有点丑陋,不过总归是有办法的。比如,你的登录表单中有一个登录按钮,当登录按钮得到焦点,并且消...

2018-08-13

CSS教程之:让IE6支持:hover伪类

因为IE 7+支持:hover,因此使用条件注释,只针对IE 6-调用该JS文件。<!--[if lte IE 6]> <script type="text/javascript" language="Javascript" src="hover.js"></scri...

2018-08-13

各种字体显示效果

Verdana是为屏幕阅读设计的热门字体之一,设计简单直接,字母和字形不容易混淆。例如大写I和小写L有不同的形状,而在Arial字体中这两个字形很容易混淆。Arial 可能造成混淆 Ill 3...

2018-08-13

CSS教程之:text-overflow:ellipsis

语法text-overflow : clip | ellipsis 参数 clip : 不显示省略标记(…),而是简单的裁切(一般不会用它) ellipsis :  当对象内文本溢出时显示省略标记(…) 用法...

2018-08-13

IE6、IE7、Firefox浏览器兼容的方法

IE8和火狐(以下简称FF)基本一致,来看下IE6,IE7,FF的识别方式 因为IE系列浏览器可读「\9」,而IE6和IE7可读「*」(米字号),另外IE6可辨识「_」(底线),因此可以依照顺序写下来,就...

2018-08-13

UTF-8与UTF-8无BOM的差异导致的异常

UTF-8 无BOM格式 UTF-8 BOM又叫UTF-8 签名,其实UTF-8 的BOM对UFT-8没有作用,是为了支援UTF-16,UTF-32才加上的BOM,BOM签名的意思就是告诉编辑器当前文件采用何种编码...

2018-08-13

CSS中box-shadow的使用方法

box-shadow是CSS3的属性,使用box-shadow终于可以使用纯代码实现阴影效果。 box-shadow有六个可设值 img{box-shadow:阴影类型 X轴位移 Y轴位移 阴影模糊值 阴影边...

2018-08-13

IE6的3像素bug

IE6的3像素bug产生原因当浮动元素与非浮动元素相邻时,它们之间会有3像素的空隙,这就是著名的IE6的3像素Bug。IE6的3像素bug解决方法针对IE6给浮动元素增加-3像素的外边距,代码...

2018-08-13

IE6浮动列表li最右侧竖直排列

在IE6中,把li左浮动后,在最右侧经常会出现竖直排列的情况,而在火狐浏览器中文字放不下了会自动换行。 CSS代码*{list-style:none;padding:0;margin:0;font-size:14px;}...

2018-08-13

实现IE6、IE7、Firefox浏览器兼容的方法

IE8和火狐(以下简称FF)基本一致,来看下IE6,IE7,FF的识别方式 _是针对IE6的CSS HACK,其他浏览器均不能识别_body{_background:purple;} IE6,IE7能识别*,FF和IE8不能识别...

2018-08-13

解决ie6下的双倍外边距问题

IE6下为什么会出现双倍外边距呢?这些都是IE特有的属性haslayout造成的,想知道原理的读者可以看下haslayout相关文章。IE6双倍外边距出现的条件当浮动元素的浮动方向和浮动边界...

2018-08-13

Parse error: syntax error, unexpected '}' in xxxx.php on line xxx错误解决方法

原因:错误里指定的行号语法错误,没有指定的结束标签,比如下面的错误就是缺少了"}"号解决方法:安错误里指定的行号找到,并检测是否缺少结束标签,加上即可。Parse error 提示一般是...

2018-08-13

查看PHP执行耗时

查看PHP执行耗时:<?php $Stime=0; $Etime=0; $Ttime=0; $Stime=microtime(true);//获取程序开始执行的时间 //echo $Stime."<br/>"; for ($i=1;$i<=10000000;$i++){} //...

2018-08-12

PHP Fatal error:Call to undefined function curl_init() in …错误解决方法

出现了PHP Fatal error: Call to undefined function curl_init() in D:\apache2\htdocs\SimpleStore.php on line 73 的这种错误是PHP没有支持CURL导致的。按以下步骤,别闲...

2018-08-12

PHP 7.1 的 A non-numeric value encountered 错误和解决方法

升级到 PHP 7.1 之后,经常收到 A non-numeric value encountered 的 warning 信息。比如下面这段代码:$a = &#39;123a&#39;; $b = &#39;b456&#39;; echo $a+$b;PHP 7.1 新 E_...

2018-08-11

html5知识点:DOM编程

DOM是Document Object Model的缩写,中文名称是文档对象模型。DOM是处理HTML页面的标准编程接口,DOM可被JavaScript用来读取、改变HTML的内容和结构。前端三大件指HTML、CSS、J...

2018-08-11

html5知识点:多终端浏览器兼容

什么是多终端?多终端就是包括了我们的电脑,手机,手持式移动设备比如ipad等。因为各类设备的显示屏幕大小不一,分辨率不一,最佳可视效果的横竖设置也不一样,所以多终端浏览器兼容主...

2018-08-11

HTML5中表单验证的8种方法

前一篇,我们介绍了HTML5中新的表单特性和函数, 今天就继续来谈谈HTML5的表单验证。在深人探讨表单验证之前,让我们先思考一下表单验证的真实含义。就其核心而言,表单验证是一套...

2018-08-11

HTML5部份标签及标签意义解释

HTML5:万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等...

2018-08-11

form表单提交后不刷新不跳转的实现方法

由于制作用户的注册界面,发现每当form表单提交后,都会刷新一下,导致填写的数据丢失,为了解决这一问题专门,百度了一下。还真找到了一种form表单提交后,不刷新的方法,先转过来,以...

2018-08-11

网页前端js判断移动端还是PC端跳转代码

项目上客户有PC端网页,也有专门开发的手机端网址,同一个入口网址可以减少客户的学习成本,也是一种很好的手段,根据客户使用的客户端来自动跳转就可以了,每个浏览器在发送请求的头...

点击按钮60秒倒计时js代码

直接上代码:<input type="button" id="btn" value="免费获取验证码" onclick="settime(this)" /> <script type="text/javascript"> var countdown=60; function settime(va...

【jQuery Demo】图片切换效果整理

图片的切换效果有很多,比较常见的有水平滚动、垂直滚动、淡入淡出等。我们接下来一一实现这些效果。1.水平滚动1) 我们先来实现HTML页面,代码很简单:<div id="container"> <u...

图片转换base64数据上传,并且实现预览的简便方法

对于很多新手来说,实现上传图片并且预览功能,都会感到不知所可,然后开始在网站搜索各种各样的图片上传预览插件,但是有的时候我们只是想简单的实现判断格式,以及预览的功能,使用插...

返回顶部
顶部