HTML5的 input:file上传类型控制
1. input:file属性 属性值有以下几个比较常用： accept：表示可以选择的文件MIME类型，多个MIME类型用英文逗号分开，常用的MIME类型见下表。 multiple：是否可以选择多...
2018-08-19
css代码缩写,占用更少的带宽
在写css代码的时候,有时候会忘记css代码的缩写,故整理成文章,方便查阅 盒模型代码简写 盒模型时外边距(margin)、内边距(paddin...
2018-08-19
各浏览器CSS HACK
针对Chrome和Safari等Webkit核心浏览器的CSS hack代码@media screen and (-webkit-min-device-pixel-ratio:0) { /* Webkit内核兼容CSS */ } 示例：@media screen and...
2018-08-19
CSS样式中大于号的使用及CSS中处理继承方法
继承在一定程度上让程序在编写的过程中更加方便，但是有时候也会给我们的程序带来一定的困扰，所以认真的学习继承的原理，以及处理的方法很重要。下面是Css中处理继承的一个方法...
2018-08-19
css/js 图片自适应、自动满屏和拉伸问题解决
网站要自适应，其中一个工作就是必然要对图片的宽度进行处理。一般来说，网站图片插入的时候，编辑器会自动增加width和height的值，也就是图片的宽度高度，虽然可以去掉，也可以定义，但...
2018-08-19
css教程之div文字图片混合型下图片居中
最近有童鞋问我，在一个div里面，其中有文字和图片，现在想要的效果是文字左对齐，图片居中对齐。然后说对图片定义text-align:center;无效。我说这里用text-align:center;肯定没有...
2018-08-19
CSS3 Media Queries实现响应式网页设计
记得很早之前，那时候还没有接触css3，已经通过media=”print”来定义打印样式了，那个时候也不是很了解，只是单纯了写着好玩，其实没多大用处。 随着目前移动设备的普及，单纯...
2018-08-19
CSS控制文字文本超过宽度或高度自动隐藏
做css的时候发现需要对文字隐藏，所以这里记录下，下次好使用。.text1 { word-break: keep-all;/*不换行*/ white-space: nowrap;/*不换行*/ overflow: hidden;...
2018-08-19
纯CSS制作的TAB选项卡
这里主要使用表单的单选按钮来实现这个TAB显示和隐藏，首页tab里的内容默认隐藏，如果单选按钮为选中状态（checked）就显示内容。具体请看下面代码。<ul class="tabs"> <li> <i...
2018-08-19
说说css中pt、px、em、rem都扮演了什么角色
前段时间，终于仔仔细细的把pt、px、em、rem了解了一遍，简单整理了一下做个记录。pt、px、em、rem都是什么pt单位名称为点（Point），绝对长度单位。现在网页中出现得很少甚至不出现，...
2018-08-19
如何改变Checkbox的尺寸大小
比较复杂的方法input[type=checkbox]{ /* Double-sized Checkboxes */ -ms-transform: scale(2); /* IE */ -moz-transform: scale(2); /* FF */ -webkit-transform...
2018-08-19
取消chrome浏览器下input和textarea的默认样式
最近一个细节引起了我的注意，chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框，而且textarea还可以任意拖动放大，这是不能容忍的，影响美观不说，有时候拖动tex...
2018-08-19
CSS让图片垂直居中的几种技巧
先来分享下来自老外的 The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on...
2018-08-14
如何使区块保持比例自动缩放
1. 对于img元素而言，使用auto height：img{ min-width: 100%; height: auto; } 2.不过对于DIV块元素，这样做没用，块大小总是按照内容或内含元素来匹配。 解决方案是使...
2018-08-14
纯css制作带三角的边框
下面的效果完全是用css 来实现的，那么是怎么实现的呢，我们知道 html 中有一些特殊的字符，通过特殊字符，利用 css 中的margin或者position方法完全可以实现以上效果，感兴趣的...
2018-08-14
纯CSS打造可折叠树状菜单
1：Html代码<li><label for="subsubfolder1">下级</label><input id="subsubfolder1" type="checkbox" /><ol><li class="file"><a>下级</a></li><li><label for="sub...
2018-08-14
CSS3 pointer-events下层元素被点击
是否曾经有过这样的经历：把一个元素置于另一个元素之上，而希望下面的那个元素成为可点击的？现在，利用css的pointer-events属性即可做到。CSS pointer-eventsPointer-events原本...
2018-08-14
搜索框提示文字点击消失的效果
当输入框默认显示“提示的文字”当鼠标点击的时候自动变成空白，如果不输入任何文字再点击其他地方则再次显示“提示的文字”，如果输入了文字再点击其他地方则无反映，代码如...
2018-08-14
CSS如何正确显示人民币符号￥
我们做网页时要正确显示人民币符号可以用如下办法：CSS：在中文输入法下用shift+4输出的￥在微软雅黑（Microsoft YaHei），华文细黑（STXihei），（MingLiu）这几个字体下能正确显示 font-family:...
2018-08-14
IE6 IE7 IE8图片等比例缩小问题
IE7、IE8设置max-width后，把高度设为auto,当图片宽度超过设置的最大宽度后，会自动缩小到设置的max-width值，但是高度并没有我们预想的按比例缩小。而在firefox中却可以完美的按...
2018-08-14
是否该使用IE浏览器特有的expression
很多用户为了解决IE浏览器的一些CSS HACK，总是习惯性的使用 expression()，其实用expression会非常耗资源，以前referer后台有这样用，后来发现网页莫名奇妙的狂占内存，后来发现是ex...
2018-08-14
CSS3实现隔行变色
隔行变换样式是一项基本的网页表现形式，如何通过CSS3实现呢?今天我们就拿隔行显示不同背景色为例做演示：代码如下：<head><meta http-equiv="Content-Type" content="text/html;...
2018-08-14
CSS 中文字体的英文名称 (simhei, simsun) 宋体 微软雅黑
Mac OS的一些：华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong俪黑 Pro：LiHei Pro Medium俪宋 Pro：LiSong Pro Light标楷体：B...
2018-08-14
去除鼠标点击输入框所产生的边框
在表单中输入文字时，在有些浏览器中会产生边框，比如在360浏览器中，点击搜索框，就会出现边框。 这种边框的出现是因为CSS中的focus伪类造成的，去除边框只需要在CSS加入:inp...
2018-08-14
调整input里面的输入光标大小
条件 input输入框用一个背景图模拟，设置height和line-height一样的高度，使里面的输入文字能够垂直居中。 问题 IE浏览器和火狐浏览器：不管该行有没有文字，光标高度...
2018-08-14
article和section的区别
article 文章是一个独立的，单独的一段离散的内容。例如一篇博客的帖子，或者一个email中的单个email。 一篇博客中的帖子，可以由rss或者其他方法聚合，而不需要更多的上...
2018-08-14
CSS最小宽度和最小高度的用法
min-height 限制最小高度min-width 限制最小宽度IE6不支持min-height和min-width,但是一旦内容超过容器，容器会被自动撑大，所以给IE6专门设置一个宽度就是他的最小宽度。_widt...
2018-08-14
瀑布流布局的两种方式：传统多列浮动和绝对定位布局
传统多列浮动 各列固定宽度，并且左浮动； 一列中的数据块为一组，列中的每个数据块依次排列即可； 更多数据加载时，需要分别插入到不同的列上； 优点 布局简单，应该...
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
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
解决IE6下高度不正常
IE6下默认的字体尺寸大致在 12 – 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
