随笔分类 -  布局相关

关于游戏提名信息项目的总结
摘要：因为是游戏网站，所以对图片的要求比较高，这里除了总结一下图片的处理方法，另外讲一下ie6的兼容。1、因为png24在ie6下面的兼容问题。方法一：(适用于非纯背景的单个图片，使用不多)用滤镜，但是滤镜在ietest里面是不支持的，我装的64位的操作系统，绿色版ie6也不支持。不能重装系统，就装了虚拟机，xp系统下的，ie6支持滤镜，使用无白边和锯齿。实例如下：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader ( enabled=bEnabled , sizingMethod=sSize , src=sURL )代码解释：属性 阅读全文
posted @ 2013-12-04 11:56 sheena的世界 阅读(267) 评论(0) 推荐(0)
inline-block去掉空白距离方法
摘要：自己写的测试案例刚开始发现居然没有空白的距离，后来请教才发现原来是因为没有换行的原因。注意只有inline-block换行了才会出现空白距离的问题。而且任何元素和标签只要在html里面进行了换行，显示在浏览器的会后就都会有间距。原型是：ul.test1{width:700px;text-align:center;list-style: none outside none;background:#eee;padding:0 10px;}ul.test1 li{display:inline-block;*display:inline;zoom:1;background:#f60;padding:5 阅读全文
posted @ 2012-12-26 17:55 sheena的世界 阅读(6488) 评论(0) 推荐(0)
border：0；和border：none；的区别
摘要：无边框用border:none还是border:0一直都是一个热议的问题，两者除了在渲染性能上面的差别以为，在标准浏览器中页面表现是没有任何差别的。下面一起认识一下它们本质的区别：一、border:noneborder-style的简写在chrome审查元素看到以下结果element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: ini 阅读全文
posted @ 2012-06-25 11:00 sheena的世界 阅读(7485) 评论(0) 推荐(0)
如何在Drupal中避免重复列末尾的Margin
摘要：一个宽度为400px的列表项里面，要求最后一个列里面没有右边距，效果预览为：我们一般喜欢给最后一个li写一个单独的样式，注明no-mr：margin-right：0；但是如果是在大量动态随机的显示时，我们会发现需要用到js去控制了，计算出最后一个是4的倍数，再动态添加no-mr这个样式。有没有简单的css，可是实现，不用程序控制就能实现最后一个的margin-right：0呢；答案是肯定的。这里我们来说一下纯css方法和js方法。第一种：css实现给外层加一个div，并给它加overflow：hidden；通过这个外层的div来使它隐藏掉最后一个的右边距，记住是隐藏，而不是去掉。如果你亲手做一 阅读全文
posted @ 2012-06-20 16:04 sheena的世界 阅读(525) 评论(0) 推荐(0)
实现单行超出部分，省略号表示 兼容各浏览器
摘要：这里介绍两种方法，都是css实现的，其他的js，jq代码，可以去网上搜索很多。第一种：margin负值定位法<div class="text_overflow" ><div class="text_con" >这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。</div><div class="text_dotted" >…</div>.text_overflow{width:300px; height:25px; overflow:hidden;line-heig 阅读全文
posted @ 2012-06-12 17:01 sheena的世界 阅读(5419) 评论(1) 推荐(0)
css 实现层半透明，且块内文字不透明（兼容ie6等各种浏览器）
摘要：兼容各浏览器且效果一致，有两种方法：一、使用opacity+Alpha Filter其实见到这个的时候，我们的第一想法当然是 background + opacity，在不支持 opacity 的 IE 再使用 filter 的 alpha 滤镜来实现。但是如果仅仅只是如此，这个最外层，最内层和文字，都被设置了 opacity（alpha 也是使用 opacity ）导致文字模糊 。当然，我们可以给各层设置 opacity 变回来，但这是很麻烦的事，所以我这里将文字放在外层的p标签内，再给一个相对定位，（也可给绝对定位）让其显示在半透明的div里面。代码如下：<!DOCTYPE html 阅读全文
posted @ 2012-06-01 14:25 sheena的世界 阅读(6915) 评论(0) 推荐(0)
ie6注释造成文字“重影”分析
摘要：这是ie6的一个经典bug。下面看问题分析： 1 2 3 4 5 无标题文档 6 7 8 9 10 左11 12 中13 14 右：这就是多出来的那只猪15 16 17 预览的效果是这样的：-----------------------------------------------------------------------------------------------------------------------我们会发现多出了“那只猪”三个字，这是为什么呢？1、经过多个浏览器测试，发现只有ie6有这种情况。说明：这是ie6的bug，其他浏览器正常。2、去掉左中右当中... 阅读全文
posted @ 2012-05-29 22:19 sheena的世界 阅读(988) 评论(0) 推荐(0)
css 中需注意的问题小结
摘要：1、尽量不要定高度，除非是特别需要，想要撑开，可以用line-height。2、开发时，一定要注意溢出隐藏的书写，防止内容增多时候，将页面变形。3、文字一定要闭合在一个单独的容器里，不要出现：<h2>巡回演出<span>了解更多</span></h2>这样的情况。4、如果出现了某一部分代码，你确实设定了间距，预览却没有间距，鼠标放上去或过一会会自己撑开，这样的情况一般是因为浮动的原因，清除浮动即可。5、在ie6和ie7下面出现标签的一部分背景无法显示，首先检查图片的路径是否正确，其次看背景的书写是否正确，ie6和ie7不识别background: 阅读全文
posted @ 2012-05-28 21:40 sheena的世界 阅读(152) 评论(0) 推荐(0)
未知尺寸图片在已知尺寸容器下的水平垂直居中
摘要：在一个固定大小的180*130的容器里面让图片显示，并做到垂直水平都居中，且图片大小随机。下面是代码：<div class="group_pic_list_block"><div class="img"><a href="#"><img src="example1.png" /></a></div><p>sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客sheena-小素博客</p> 阅读全文
posted @ 2012-05-28 21:39 sheena的世界 阅读(312) 评论(0) 推荐(0)
如何让ie6和ie7兼容display：inline-block；
摘要：块元素想要用display：inline-block；使其与行内元素在同行显示，这个效果除了ie6和ie7，其他的浏览器都是可以实现的，这里总结一下如何解决ie6和ie7不兼容的问题。<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style type="text/css">p{dis 阅读全文
posted @ 2012-05-28 21:37 sheena的世界 阅读(345) 评论(0) 推荐(0)
a标签在ie6和ie7下面换行显示问题解析
摘要：此问题为ie6和ie7的一个bug，在ie其他的版本或者ff，maxthon、chrome下都为正常的。只要是非浮动元素在浮动元素之前，并且是同行的时候，这个问题就会出现，ie6、ie7效果一致，可以看到不在同一行现实，像是被挤下来了一样。代码是这样的<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title></head><style 阅读全文
posted @ 2012-05-28 21:35 sheena的世界 阅读(1648) 评论(0) 推荐(0)
FF，chrome，ie主流浏览器兼容写法总结
摘要：现在主流浏览器就是火狐，谷歌，还有ie，这里总结一下我测试过的能很好的兼容各个浏览器的写法：我们知道样式书写要从高版本的写到低版本，我一般是先写FF，谷歌这些浏览器的样式，再写兼容ie9-ie6的样式。现在ie10也出来，不过目前我还没有使用，市场份额也很小，应该和ie9差不多，这里暂时就不考虑了。background：red；background：green\9；前者火狐，谷歌等识别，后者ie各版本浏览器识别background：red；background：yellow\0；*background：blue；前者火狐，谷歌等识别，中间ie8和ie9识别，后者ie7和ie6识别*backgr 阅读全文
posted @ 2012-05-28 21:31 sheena的世界 阅读(497) 评论(0) 推荐(0)