CSS - 随笔分类 - boyanh

摘要：1 阅读全文

posted @ 2017-11-23 16:08 boyanh 阅读(410) 评论(0) 推荐(0)

摘要：HTML <div class="idd">  <span class="img"></span></div> css .idd{ width:100px; height:100px; border:1px solid red; display 阅读全文

posted @ 2017-09-05 17:00 boyanh 阅读(204) 评论(0) 推荐(0)

CSS实现背景图片固定

摘要：body { background-image:url('bg.jpg'); background-repeat: no-repeat; background-attachment: fixed; //这个属性必须与 background-image 一起使用} 阅读全文

posted @ 2017-07-22 16:54 boyanh 阅读(1999) 评论(0) 推荐(0)

背景透明，文字不透明

摘要：.demo{ padding: 25px; background-color: rgba(0,0,0,0.5);/* IE9、标准浏览器、IE6和部分IE7内核的浏览器(如QQ浏览器)会读懂 */ } .demo p{ color: #FFFFFF; } @media \0screen\,screen\9 {/* 只支持IE6、7、8 */ .demo{ backgro... 阅读全文

posted @ 2017-07-22 16:51 boyanh 阅读(216) 评论(0) 推荐(0)

on() 不支持hover事件

摘要：因为 .hover() 是 jQuery 自己定义的事件… 是为了方便用户绑定调用 mouseenter 和 mouseleave 事件而已，它并非一个真正的事件，所以当然不能当做 .bind() 中的事件参数来调用。阅读全文

posted @ 2017-06-29 09:32 boyanh 阅读(914) 评论(0) 推荐(0)

px em rem的区别

摘要：PX px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。 PX特点 1. IE无法调整那些使用px作为单位的字体大小； 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位； 3. Firefox能够调整px和em，rem，但是96%以上的中国网民使用阅读全文

posted @ 2017-05-09 12:25 boyanh 阅读(216) 评论(0) 推荐(0)

CSS3 resize 属性

摘要：CSS3 resize 属性 CSS 参考手册实例规定可以由用户调整 div 元素的大小： div { resize:both; overflow:auto; } 支持 Firefox 4+、Chrome 以及 Safari 不支持 resize。定义和用法 resize 属性规定是否可由用户阅读全文

posted @ 2017-05-03 16:41 boyanh 阅读(1223) 评论(0) 推荐(1)

resize

摘要：CSS3 resize 属性 CSS 参考手册实例规定可以由用户调整 div 元素的大小： div { resize:both; overflow:auto; } 亲自试一试浏览器支持 Firefox 4+、Chrome 以及 Safari 不支持 resize。定义和用法 resize 属阅读全文

posted @ 2017-05-02 17:16 boyanh 阅读(315) 评论(0) 推荐(0)

border-color:transparent;

摘要：http://www.zhangxinxu.com/study/201111/triangle-css-border.html 阅读全文

posted @ 2014-11-03 10:38 boyanh 阅读(469) 评论(0) 推荐(0)

href="#"与javascript：void（0）的区别

摘要：目录：1href="#"方法2href="javascript:void(0);"方法3#与javascript:void(0)的区别概述：在工作中，如果我们想把a标签中的链接置成空链接，我们一般会用两种方法：或者以上两种方法很多人都认为是空链接的方法，但是这两种方法是有区别的，到底有什么区别呢？今... 阅读全文

posted @ 2014-09-23 10:37 boyanh 阅读(190) 评论(0) 推荐(0)

IE css HACK

摘要：IE6：_selector{property:value;}selector{property:value;property:value !important;} //IE6 不支持同一选择符中的 !importantIE7：+selector{property:value;}IE8：selecto... 阅读全文

posted @ 2014-09-23 10:17 boyanh 阅读(138) 评论(0) 推荐(0)

z-index只能用在定位元素上

摘要：弄了很久才突然想到z-index只能用在被定位的元素上。定位的时候要注意给父级定位在ie7里有问题的部分代码结构如下图如果只给.more_li定位，加z-index的话，如图这里给最外面的.more_list添加：border:1px solid red;发现有一段红色的边框颜色没有显示，那是因为没有给.more_list添加z-index添加后的显示结果如图：阅读全文

posted @ 2013-08-22 16:08 boyanh 阅读(722) 评论(0) 推荐(0)

地址给的越精确，优先级越高

摘要：地址越精细，优先级越高<a class="button" href="###"></a>这个时候可以写成a.button,会覆盖掉之前定义的a:link, a:visited {color:#333333;text-decoration:none;}例子如下：html<form action="##" class="form"> <p> <input type="submit" class="button" value=& 阅读全文

posted @ 2013-05-21 15:03 boyanh 阅读(168) 评论(0) 推荐(0)

因浮动问题导致的IE6/7下的换行

摘要：总结：当一个块里面包含a,b两个元素，想让它们在一条线上，a居左，b居右。a没用浮动，b用浮动。写代码的时候把b写在a的前面。或者a,b都分别加上浮动。不然IE6.IE7下面会出来b换行不和a在一条线上。错误展示<h1 class="title"><span class="title_span">国培计划</span> <a href="###" class="more" >更多</a>  & 阅读全文

posted @ 2013-05-21 14:42 boyanh 阅读(185) 评论(0) 推荐(0)

页面图片的缩放问题

摘要：之前遇到过几次关于页面里面图片的缩放问题，所以就以为自己熟悉了，就没记下来，刚同事又问到这个问题，我按照脑子里记的就给同事说了一遍，但是调试的时候，发现演示的效果不是对图片进行缩放，而是剪切。注意力一下子全被拉到这个问题上了。经过一番摸索，发现问题出现在图片的路径上。按照我讲的那种方法，图片在页面里面的代码应该写成<image src="themes/blue/images/photobg.gif "/>这种格式。但是我给同事讲的时候图片是<image class="photobg" />把图片放在class里面。所以我怎么调试都阅读全文

posted @ 2012-12-14 18:02 boyanh 阅读(307) 评论(0) 推荐(0)

line-height

摘要：最近发现项目中的搜索输入框出现了一点问题。输入框中的光标在不同浏览器中的长度有异。class如下：.seek{ width:300px; height:25px; margin:5px 0; line-height:25px; border:1px solid #ccc; padding-left:5px;}在firefox下显示为：在safari下显示为在chrome下显示为在IE先显示为后来调整代码为.seek{ width:300px; height:25px; margin:5px 0; line-height:25px\9;... 阅读全文

posted @ 2012-12-14 15:11 boyanh 阅读(182) 评论(0) 推荐(0)

margin:0 auto;在IE中无法居中

摘要：margin:0 auto;页面在火狐和谷歌里面是居中的，在IE中是居左的。在页面代码的最前面加<!DOCTYPE HTML>，问题就可以解决阅读全文

posted @ 2012-11-16 10:19 boyanh 阅读(178) 评论(0) 推荐(0)

CSS HACK IE7/IE8

摘要：调试时发现显示的内容在搜狗和360上显示的效果不一样。检查浏览器的版本时发现，搜狗版本是ie7，360浏览器版本是IE8。这是搜狗下显示的效果。这是360下显示的效果。在浏览器的地址输入框里输入代码：javascript:alert(navigator.userAgent); 在弹出的对话框里就可以查看浏览器的版本。之前知道IE6/7都能识别*。但是IE8下，对我写的带*的代码没有反应。后来上网查发现在代码后面加“\0”后。IE8就可以识别。原始代码.re_btn, .su_btn{ height:25px; width:53px; border:1px #bfd8e1 solid; *pad 阅读全文

posted @ 2012-09-05 17:26 boyanh 阅读(157) 评论(0) 推荐(0)

仿做百度阅读器有感（初级菜鸟写，高手绕道）

摘要：最近，跟的项目有充足的空闲时间让我干点自己想干的事，本来想做一个淘宝的页面，鉴于考虑到影响问题，我就转向做百度阅读器了。通过做百度阅读器，感触是有的第一：页面居中我浏览百度阅读器后，直接用工具测量了页面居左边的距离，直接设置margin:0 200px：觉得这样页面就会居中了，后来才知道页面居中margin设置的是：0 auto; 我之前那样设置，当浏览器的窗口是最大化的时候感觉它是居中的，当浏览器的窗口缩小时，问题就出现了，页面的左边始终都会留有200px的空间。第二：浮动之前对浮动的概念一直停留在：浮动是使元素靠左或靠右，目前在ul和div里面用的比较多，对清楚浮动也没有一个概念，只阅读全文

posted @ 2012-05-10 15:54 boyanh 阅读(264) 评论(0) 推荐(0)

CSS命名规则

摘要：功能标志：logo广告：banner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的:current小技巧：tips图标:icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright页面结构容器:container页头：header内容：content/container页面主体：main 阅读全文

posted @ 2012-05-10 15:50 boyanh 阅读(182) 评论(0) 推荐(0)

boyan

随笔分类 - CSS

公告