随笔分类 -  css篇

脚部—版权条离底部有移动的距离
摘要：html代码：<!--版权部分--><div class="footer">copyright©2010&nbsp;&nbsp;cmyCake蛋糕店 </div>一般情况下如下所设都会成功的，但是今天却失败了，因为当我把浏览器缩小的时候，版权条也跟著一起移动，但是这个移动有的规律，当我缩到中间的背景图宽度时它才移动，所以解决方案是，设置一个最小宽度，为背景图片的宽度。css代码：.footer{width:100%;min-width:960px;//IE6不支持此属性width: auto !important 阅读全文
posted @ 2013-05-31 21:20 MoenyChen 阅读(166) 评论(0) 推荐(0)
遮罩层不铺满整个页面
摘要：设置了遮罩层之后，但是它不铺满整个页面，原因是没有相对的对象，解决方案：在body里面加上position: relative;就可以了<body> <div style="height: 2000px; width: 1003px; border: 1px solid red;"> </div></body><div id="ShadowLayer" style="position: absolute; height: 100%; width: 100%; top: 0px; left: 阅读全文
posted @ 2013-05-31 21:15 MoenyChen 阅读(472) 评论(0) 推荐(0)
IE6、IE7下不支持overflow-y:hidden;
摘要：今天做页面的时候，给body设置overflow-y:hidden;后，IE8很正常，但是IE7却不行了，隐藏不了竖向滚动条呀～！ 解决方案：html{#overflow:visible;_overflow:visible; } 阅读全文
posted @ 2013-05-31 21:08 MoenyChen 阅读(276) 评论(0) 推荐(0)
font-family:微软雅黑
摘要：今天搞了一个下午， 都不知道样式表里哪里出问题，一个页面引用同一份样式表，在IE6下头部的样式就有，脚部的样式就没有，这不是坑我吗？ 后来把样式表的样式逐个删除，原来罪魁祸首是font-family:“微软雅黑";这里的文字加了双引号呀～！这小小的双引号弄了我一个下午呀...... 阅读全文
posted @ 2013-05-23 18:00 MoenyChen 阅读(724) 评论(0) 推荐(0)
IE8下按钮与右边的距离比IE7和IE6的多了一倍
摘要：在一个div里放一个浮动向右的div，在浮动向右的div里放一个按钮并背景图，这时在IE8下看，按钮与右边的距离多了一倍。（这里一眼看上去好像觉得受到了display：blokc的影响，错了！难道是图片的高度被撑开问题，都错！！） 解决方案：在按钮的样式里加padding:0;<div class="contain"> <div class="btnFrame"> <input type="button" class="btn" /> <input type="b 阅读全文
posted @ 2013-03-17 22:16 MoenyChen 阅读(173) 评论(0) 推荐(0)
在button（div）里设置背景图后，在IE6下背景图的高度被撑开了
摘要：在一个button里，设置一张背景图，在IE6下看，背景图多了一些空白高度。这个与“在div里面设背景图不一样”的情况不同，在这里，不能在背景图的class里面加“_font-size:0;”，这里需要加“display: block;” <div class="buttonDiv"> <input type="button" class="buttonClass" /> </div>css样式： .buttonDiv { width: 9px; height: 9px; border: 1px s 阅读全文
posted @ 2013-03-14 22:59 MoenyChen 阅读(376) 评论(0) 推荐(0)
li中包含span，在IE6、IE7下会有3pxbug
摘要：如果给每个li里面加个span标签的话，在IE6，IE7下看，li与li之间的距离就会多了3px。 解决方法：在li中加vertical-align:middle;<div class="contain"> <div class="main"> <ul> <li><span></span></li> <li><span></span></li> <li><span></span></ 阅读全文
posted @ 2013-03-14 21:49 MoenyChen 阅读(328) 评论(0) 推荐(0)
给a标签加样式的写法
摘要：顺便略带使用伪类的顺序：love—hate（link—>visited—>hover—>active） <div class="contain"> <ul> <li><a href="#">我是测试一</a></li> <li><a href="#">我是测试二</a></li> <li><a href="#">我是测试三</a></li 阅读全文
posted @ 2013-03-06 22:14 MoenyChen 阅读(1977) 评论(1) 推荐(0)
文字加下划线
摘要：如果要给字体加下划线的话，直接用text-decoration:underline，就可以了(如图一)，但是如果是这样的话文字与下划线就会紧得很紧，效果看起来不怎么好看，但是又没有一些属性让文字与下划线的距离隔开一点，暂时知道的方法也就用border-bottom:1px solid black的方法来模仿下划线（如图二），使用这个的话最好加个高度吧! <div class="contain"> <ul> <li><a href="#">我是测试一</a></li> <li&g 阅读全文
posted @ 2013-03-06 21:55 MoenyChen 阅读(491) 评论(0) 推荐(0)
css div高度自适应
摘要：height:auto !important;height:200px; /*假定最低高度是200px*/min-height:200px; 这个在IE6下不起作用的，在IE6下需要把height:200px; /*假定最低高度是200px*/去掉就可以了......(做的时候是这样，不过还不太清楚这个自适应，先记下来吧~！) 阅读全文
posted @ 2013-02-24 23:31 MoenyChen 阅读(156) 评论(0) 推荐(0)
在IE7下设置z-index没有反应
摘要：设置了两个div，两个div都设置了position:fixted，这时按钮会被第二个div覆盖掉，一开始的解决方法是在按钮里面加上z-index的属性，这时在IE8正常，但是在IE6、7就不正常，后来在网上查了一下，原来是要在其父元素上面加z-index这个属性才有效果的。<div class="toolBar"> <div class="closeButton"> <input type="button" value="关闭" class="close" /&g 阅读全文
posted @ 2013-02-24 23:29 MoenyChen 阅读(260) 评论(0) 推荐(0)
IE6下设置float和margin的问题
摘要：如果在IE6下设置了浮动和margin的话，那么在IE6下距离就会加倍，代码如下： <div class="showHeadIcon"></div>.showHeadIcon /*文字前面的小图标*/{ width: 16px; height: 12px; float: left; margin-left: 14px; display: inline;/*解决方法一：直接加这句*/ /*_margin-left:7px;解决方法二：独立给IE6加样式*/ margin-top: 11px; background: url(../images/tool 阅读全文
posted @ 2013-02-22 09:27 MoenyChen 阅读(198) 评论(0) 推荐(0)
设置每个li的margin距离（巧设计）
摘要：当我们在一个div里面包含头、中（ul和li）、尾i的话，如果设置每一个li的margin属性的话，那么虽然每个li都有距离了，但是整体的间距是不和谐的，这里需要设置ul的margin属性，代码如下：<div class="contain"> <div class="head"></div> <div class="main"> <ul> <li>1</li> <li>2</li> <li>3</li> 阅读全文
posted @ 2013-02-22 09:18 MoenyChen 阅读(2323) 评论(0) 推荐(0)
做css页面时，注意的地方
摘要：（1）按钮是否都加了cursor: pointer属性；（2）页面在各浏览器中是否已测试；（3）如果某一个样式是需要jq替换的话，那么这个样式就不能用继承，只能单独写出来 阅读全文
posted @ 2013-02-22 08:25 MoenyChen 阅读(145) 评论(0) 推荐(0)
相对定位（relative）和绝对定位（absolute）
摘要：以前一直搞不清楚这两个究竟是怎么样的一回事，总觉得很难理解的，但是最近接触多了，也有点了解了。 相对定位（relative）：不会让出自己占用的位置 绝对定位（absolute）：会让出自己的占用位置 <div class="contain"> <div class="main"></div> </div>css样式：.contain{width:200px;height:200px;position:relative;}.main{width:100px;height:100px;position:abs 阅读全文
posted @ 2013-02-21 21:42 MoenyChen 阅读(311) 评论(0) 推荐(0)
IE8下margin-top问题
摘要：在IE8下如果父div没有设置border，而在子div里面设置了border的话，如果这时在子div里设置margin-top的话，是不起作用的，代码如下：<div class="contain"> <div style="subMain"></div></div>css样式：.contain{width:200px; height:200px;margin-top:100px; background-color:gray;overflow:hidden;//解决方法一：在父div加这句就可以了/*bor 阅读全文
posted @ 2013-02-21 21:26 MoenyChen 阅读(321) 评论(0) 推荐(0)
专题页
摘要：在做专题页的时候，需要把背景图在各种分辨率下都居中，就是说在低分辨率下，好像自动把背景图的两边去掉，留下中间的，在高分辨率下，把两边也保留。 这时需要把背景图放在body里面，而且需要设置背景图居中就可以了，如下所示： background: url("../images/yxsjBg.jpg") no-repeat center 0; 阅读全文
posted @ 2013-02-21 18:51 MoenyChen 阅读(165) 评论(0) 推荐(0)
三列自动布局
摘要：很多时候我们都需要做一个带有圆角的图，这时会布局为左（圆角）中（平铺）右（圆角），而且中间是要根据内容自动撑开的（布局如下所示）<div class="contain"><div class="circleFrame"> <div class="circleLeft"></div><div class="circleRight"></div><div class="circleMid"></div>& 阅读全文
posted @ 2013-02-21 17:54 MoenyChen 阅读(154) 评论(0) 推荐(0)
盒子模式
摘要：感觉很多时候都会用到这个噶~！不过我每次都是上网查，查了，忘了，再继续查..所以这次要记下来才行，哈哈~！ 例子：使用的浏览器是1024*768 $(window).height();//获取浏览器窗口的可视高度（就是打开一个页面，页面的可见高度，如546） $(document).height();//获取浏览器窗口文档的高度（就是打开一个页面，这个页面的body有多高，获取的值就是多少，如1013） $(document.body).height();//获取浏览器窗口文档body的高度（就是打开一个页面，这个页面有多高，获取的值就是多少，如1013） 阅读全文
posted @ 2013-02-18 20:25 MoenyChen 阅读(256) 评论(0) 推荐(0)