acongshijia的专栏

网站常见问题及解决方法（div/css）1.在ul里嵌入form表单，在IE6，IE7，显示会不在同一高度上。 2.IE7下异常出现水平滚动条；overflow-x:hidden; 可以解决。 3.在不知道模块高度的情况下不必设定高度，设定一个最小高度即可，让其自动随内容变化变化。4.使整个网站变黑白代码：body{filter:Gray;} img{f

W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”transition主要包含四个属性值：执行变换的属性：transition-property,变换延续的时间：transition-dur

三角形翻转的效果，大家想必见过，这里就把相关代码贴下，大家可以应用哦，当然翻转效果暂时不支持IE 6 7 8，1、纯CSS做个三角.rightdirection{ width:0;height:0; line-height:0; border-width:20px; border-style:solid; border-color:transparent transp

用表格做网页排版的时候，一般都能正常使用。偏偏有时会碰到一段连续的英文词或者一堆感叹号(!!!)把网页就撑开的现象：（总结了一下，只要在CSS中定义了如下句子，可保网页不会再被撑开了。table{table-layout: fixed;}td{word-break: break-all; word-wrap:break-word;}注释一下：1.第一条table{table-l

.u-icon-arr { position: absolute; top: 50%; right: 15px; width: 12px; height: 12px; border-style: solid; bor

var deviceWidth = document.documentElement.clientWidth; if(deviceWidth > 640) { deviceWidth = 640; } document.documentElement.style.fontSize = deviceWidth / 6.4 + '

1、解决方案是在调试阶段或者频繁更新的页面加入以下头信息 2、更新文件的时候，在引用css，js等文件的语句上加上一个版本号，就能有效防止浏览器一直使用缓存中的css，js 3、防止页面被缓存的方法，在URL后面添加随机参数，这样每次访问的都是不同的连接window.location='xxx.html?_r='+Math.random();

(function(win){ var TabBarPlug=function(options){ this.barTitle='DEMOBAR'; } TabBarPlug.prototype={ //获取浏览过的地址 getSessionUrl: function(){ return JSON.parse(sessionStorage.getItem('historyU...

html, body { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(to bottom, teal, aqua);}.battery { width: 6em; height...

html, body { height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(antiquewhite, navajowhite);}.sea { width: 300px; heig...

在进行页面的DIV+CSS排版时，遇到IE6（当然有时Firefox下也会偶遇）浏览器中的图片元素img下出现多余空白的问题绝对是常见的，对于该问题的解决方法也是“见机行事”，根据原因的不同要用不同的解决方法，这里把解决直接把解决image图片布局下边的多余空白的BUG的常用方法归纳，供大家参考。方法整理来源于万福的网络。　　1、将图片转换为块级对象可去掉下边空白 　　即，设置

鼠标移到导航上面 当前的LI变色 处于当前的位置，广泛应用于当前导航。鼠标移到导航上面 当前的LI变色 处于当前的位置ul,li{list-style:none;}#nav li{display:inline-block;margin:0 5px;background:#ccc;padding:0 10px; line-height:24px;font-size:12px;}#n

自适应导航DIV/CSS 不设置宽度样式代码如下：    #nav{width:950px; background:url(navbg.png) left top repeat-x; height:34px;}       #nav ul{background:url(navbg.png) right top no-repeat; height:34px; line

搜索引擎优化(seo)有很多工作要做，其中对代码的优化是一个很关键的步骤。为了更加符合SEO的规范，下面是目前流行的CSS+DIV的命名规则：页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:sc

dl { position:absolute; width:389px; height:154px; border:10px solid #eee; }dd { margin:0; width:389px; height:154px; overflow:hidden; }img { border:1px solid black }dt { position:abso

功能很实用，代码非常的简单效果1.效果2.样式代码如下： body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,br,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0; padding:0

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》，css缩写的主要规则如下：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;注意:在同一个CSS配置节中，不要交错使用全写和缩写的颜色配置，在系统资源极低时，会导致浏览器渲染失败。盒尺寸通

代码如下HTML: 我是一只小小鸟、小小鸟！ CSS:.box{width:500px;}.top{border-bottom:3px solid; border-top-color:#cc0000; border-bottom-color:#cc0000; border-left:3px dotted transparent;border-right:

希望实现标题在左对齐，日期在右对齐，当直接给日期的span加上float:right时，IE8和FF都OK，但IE6/7则会换行，下面给出一个简单有效的解决办法。 <!--#mylist { width:400px; list-style-type:none; margin:0; padding:0; }#mylist li span { flo

经过各种清除浮动的比较，以及日常的应用，发现最好最完美的一种方法就是这个：代码如下，css:.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}.clearfix{*zoom:1;}//只针对IE6/7HTML:

自适应布局在实际应用中越来越普遍了，今天分享几个自适应布局的demo，主要是浮动圣杯布局（也叫双飞翼布局，主要是利用浮动和margin负边距实现的），没有介绍绝对定位布局，都是我想，你能明白我下面的几个例子，绝对定位布局也是非常的简单了。PS：圣杯布局有个好处，符合前端开发中渐进增强的理念，因为浏览器解析是从DOM的上至下，圣杯布局能够把页面中重要的内容section放到DOM前面先解析，而次

html,body,.checkbox,.checkbox .inner,.checkbox .inner .toggle { height: 100%; display: flex; align-items: center; justify-content: center;}.checkbox { width: 10em; heigh...