随笔分类 -  CSS

摘要：大家都知道响应式布局的要素有几点：1.用百分比来定位，好处是不需要用js就可以根据浏览器的缩放拉伸和缩小元素。2.用em来作为度量单位。由于是相对单位，比像素更灵活一点。虽然在我目前还没发现经过viewport转换后em和px用起来有什么区别 t.t3.在HTML中为media query准备好4.对移动设备使用media query，常用的有：/*pad*/@media screen and (min-width: 769px){}/*horizontal iphone5 568x320*/@media screen and (max-width: 768px) and (min-width 阅读全文

摘要：一般情况下，只有标签中的图片，可以根据宽高设定来改变大小。比如1024x768的图，我们设width="640",height="480"，他就会显示640x480。往往为了避免不必要的数据传输，反而不提倡读取非实际大小的图片。但我也没有想到，这世界上有些情况，恰恰需要用一个固定尺寸去读取实际上大很多很多的图片。为的是，增加屏幕显示的DPI。做Smart phone网站时，不用说Retina，一般高画质的屏幕都需要读取高清晰度的图片，否则就朦朦胧胧。与彩色照片不同，一些颜色单一但是字体特殊的按钮，标题等，反而对图片质量要求很高。在PS中如果拥有矢量编辑能 阅读全文

摘要：最简单的没有CSS3的就用PNG，CSS为绝对定位，负像素左移。.siteTag {position: absolute;left: -16px;top: 109px;z-index: 10;width: 65px;height: 46px;padding:0;margin:0 10px 0 0;vertical-align:middle;border:0 none;background: transparent url(../img/siteTag.png) scroll no-repeat 0 0;}父级DOM.content {position: relative;width: 940p 阅读全文

摘要：View Code <p class="type"><a href="#" class="current">不限</a><b>|</b><a href="#">赛车类</a><b>|</b><a href="#">摩托类</a><b>|</b><a href="#">音乐类</a><b> 阅读全文

摘要：有一个用来做滚动展示的JS API: scroll_v1.20.jsView Code var sina = { $: function(objName) { if (document.getElementById) { return eval('document.getElementById("' + objName + '")') } else { return eval('document.all.' + objName) } }, isIE: navigator.appVersion... 阅读全文