随笔分类 - DIV+CSS
摘要：calc()看起来像个js的函数，但它实际上是css3的一个属性，它能自动计划宽度，高度等。平时在制作页面的时候，总会碰到有的元素是100%的宽度。众所周知，如果元素宽度为100%时，其自身不带其他盒模型属性设置还好，要是有别的，那将导致盒子撑破。比如说，有一个边框，或者说有margin和paddi...
阅读全文
摘要：头部标签详解1.编码必须为utf-8编码；2.可视区域viewport，移动端特有的属性inital-scale表示的初始的缩放比例，当即是当页面第一次load的时候缩放比例.一般设置为1.0倍。minimum-scale=1.0表示的允许用户缩放的最小比例。maximum-scale=1.0表示的...
阅读全文
摘要：firefox及标准浏览器下可以用css属性outline：1outline:none;/*0也可以*/IE下如下实现（据说过多使用效率低）：123a {blr:expression(this.onFocus=this.blur());}此外还可以使用hidefocus属性。webkit内核浏览器（Safari/Chrome）中点击链接后不会有虚线框，这应该是默认样式的问题。如果想让其和IE/Firefox一样点击后留下虚线框可加入以下：123a:visited {outline:1pxdottedgray;}
阅读全文
摘要：placeholder是为了设置初始值，并且这个初始值的颜色为灰色，当input的内容变动时，这个值就消失，它的职责就是给人一种亲和力的指示，十分有爱。autofocus，顾名思义：自动聚焦，当进入当前页面时，这个input会自动获取焦点，而你可以在打开页面后直接输入东西进行搜索。当autofocus出现两次以上的时候，浏览器会选择最后一个带有autofocus属性的input聚焦。x-webkit-speech，这个大概不必多解释了，webkit核的浏览器（如Chrome）特有的语音识别工具，给input装上也是再好不过的了，话说Google也给自己的搜索框装上这个工具
阅读全文
摘要：css中设置了高度和行高，i6-ie8都正常垂直居中了，但ie9却居顶部显示，后来发现是因为设置的font-family的原因，如果设置成“font-family:Microsoft YaHei Tahoma;”或者“font-family:微软雅黑;”都会存在这问题，解决办法：把该字体的中文或者英文转化为其对应的Unicode码就可以全部兼容。常见字体的Unicode码中文名英文名UnicodeUnicode 2Mac OS华文细黑STHeiti Light [STXihei]\534E\6587\7EC6\9ED1华文细&a
阅读全文
摘要：最终的loading效果如图：说明：共两个层，每个层里有4个花瓣，共组成8个花瓣；动画过程为每个花瓣的透明度依次从1变为0的过程。HTML代码： CSS代码：
阅读全文
摘要：标签点击时会出现虚线框，如何去掉这虚线框呢？在IE下，需要在标签 a 的结构中加入 hidefocus="true" 属性。即：腾讯网而在FF等浏览器中则相对比较容易，直接给标签 a 定义样式 outline:none; 就可以了，即：a { outline:none;}
阅读全文
摘要：其实早都做过用css来实现小三角的箭头符号了，不过一直都没静下心来仔细研究，今天正好多看了些，都说好记性不如烂笔头，把所了解到的赶紧记录下来。 大致有两种方法：边框法和字符法。边框法就是利用盒子的边框变化组合形成的各种三角；字符法就是采用菱形的字符◆，然后决定定位把多余的部分溢出掉，该种方法只...
阅读全文
摘要：第一次来认认真真的研究了下svg图片，之前只是在网上见过，但都是一晃而过也没当回事，最近网站改版看到同事有用到svg格式的图片，想想自己干了几年的重构也没用过，这些细节的知识是应该好好研究研究了。暂时还没研究得完全透切，先记下目前为止所看到的吧不然又给忘了。 svg可缩放矢量图形（Scalable Vector Graphics），顾名思义就是任意改变其大小也不会变形，是基于可扩展标记语言（XML），他严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，可以用记事本打开，应该更多的使用场景是手机端，因为手机分辩率差异化大。 大家常听说的...
阅读全文
摘要：在做页面的过程中遇到了一个兼容问题，ie8下的png32图片在用到filter的alpha属性时图片周围会出现黑圈，刚开始以为是图片导出有问题，后来才知道这是ie8的一个bug。 后来分析了下，png32的图片再加上filter:alpha(opacity=70)这个属性就是问了实现图片达到70%的透明效果，解决这个的办法就是在做图片的时候直接在ps里把该图片设置成70的透明度即可，css里就无需用到filter:alpha(opacity=70)，这样除了ie6的其他浏览器都没问题；再针对ie6做一张专门的图片，ps里透明度设置成100，再在css里加上这个属性即可_filter:al...
阅读全文
摘要：IconFont的作用就是用字体的格式来取代图片、特殊字体的展示，用得比较多的就是一些纯色的图标，具体主要由当前css3属性里的自定义字体(@font-face)来实现。1、先来说下它的优缺点：优点：体积比图片小，可以变化大小和颜色，而图片则是不可以的；缺点：由于是字体模式，所以只支持纯色，多颜色不支持。2、该如何使用 2.1、字体的格式，不同浏览器支持的字体格式是不一样的，具体如下：webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体；Chrome：除webkit支.
阅读全文
摘要：/* 最小寬度 */.min_width{min-width:300px;/* sets max-width for IE */_width:expression(document.body.clientWidth < 300 ? "300px" : "auto");}/* 最大寬度 */.max_width{max-width:600px;/* sets max-width for IE ...
阅读全文
摘要：今天在蓝色上无意中看到pointer-events属性，很好奇，以前还从未使用过这个属性，原来它的作用是：当一个元素覆盖在另一个元素上，而我们又想点击被覆盖的那个元素，这时这个属性就派上用场了。 pointer-events的默认属性为auto，如我们要想实现上面的效果则应把它的属性设为none；不过到目前为止，仅Firefox 3.6+、Safari 4 和Google Chrome支持该属性...
阅读全文
摘要：第一种：用背景图片利用css-sprites技术把4个小圆角拼合到一张小图里 图片：css：代码Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/--.box{border:1pxsolid#069;position:relative;}.tl,.tr,.b...
阅读全文
摘要：从去年8月到现在一直忙着公司的网站改版(www.wangpiao.com)，近几天新版网站终于成功上线。我从参与的工作就是网站的前端，整个网站的页面都是经过了本小姐的双手，嘿嘿臭美了，记得那段时间我们技术部门的同志们天天加班，周末也没有休息，都非常辛苦，我中途还累病了两次，不过看着工作结果能得到大家的认可，心里挺美的。 废话少说，还是写一下我这次的工作体会吧，留下脚印，以后自己还可回来再看看，这...
阅读全文
摘要：在合法有效的HTML代码，编辑器会造成HTML冗余臃肿问题：如FrontPage、Dreamweaver，可以帮助我们简便快速地创作或编辑HTML页面，但在生成“干净的”HTML代码方面则是个弱项，尤其在其对一个网页进行修改的时候，往往会产生很多不必要的冗余代码。当页面的HTML文件在存在大量的冗余代码时，文件便会变得臃肿，这不但会降低网页的打开速度，损害到网页的效率，同时...
阅读全文
浙公网安备 33010602011771号