![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
切图
太羽
kkkkk
展开
-
详细讲解transform
http://blog.sina.com.cn/s/blog_5cd7f5b40101h6hj.html转载 2014-04-18 15:17:29 · 1293 阅读 · 0 评论 -
浏览器兼容汇总
1、a元素margin-bottom:50px; b元素margin-top:30px;他们两个之间的间距取最大值:50px,而不是50px+30px。原创 2014-03-19 17:04:47 · 710 阅读 · 0 评论 -
div+css打造兼容ie6的tab样式
记得先引用JQ框架 CSS部分html{ font:normal 12px/24px "宋体"; overflow-x:hidden;}body{ margin:0; padding:0;}img{ border:nonel;}ul,li,ol{ list-style:none; padding:0; margin:0;}.menu{ border:1px solid #ccc原创 2013-12-30 16:30:58 · 1674 阅读 · 0 评论 -
8种CSS清除浮动的方法优缺点分析
转载地址:http://www.5icool.org/a/201211/a1661.html为什么清除CSS浮动这么难?因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。我根据转载 2014-03-12 16:19:29 · 629 阅读 · 0 评论 -
display:inline-block兼容ie6/7的写法
1、实例演示效果2、 display:inline-block作用?使用display:inline-block属性,可以使行内元素()或块元素能够不加float属性就可以定义自身的宽、高,同时又能使该元素轻松在父元素居中显示!3、 什么时候会用到display:inline-block?在网站布局中,很多时候,子元素中使用行内元素如span或块元素li标签且标签个转载 2014-03-06 09:35:08 · 923 阅读 · 0 评论 -
众多img标签排列在一起产生间隙如何处理
在一个元素下面如果排列很多img标签的话的确会有空隙 不但垂直方向有,水平方向也有,其实这个问题很简单,在ie6下面你写个div规定他的高度为0,其实他还是有自己的高度的,就是默认字体的高度,ie6固执的认为该div高度不能小于默认字体的高度--大约是12px,只要设置fong-size:0这个问题就解决了在网上搜了一下,发现old9说的 在这里同样是这个问题,之所以vertical:原创 2014-03-12 10:07:36 · 1882 阅读 · 0 评论 -
position:relative 详解
position:relative; 他的意思是绝对相对定位,他是参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,配合TRBL进行定位,当父级内有padding等CSS属性时,当前级的原始点则参照父级内容区的原始点进行定位.relative和absolute的另外一个很重要的区别就是当被定义成absolute的对象被移出了,那么他原来的位置也就不存在了, 如果被定义成rela原创 2014-03-04 14:37:41 · 6074 阅读 · 0 评论 -
list-style ie6支持不友好的解决方法
一、最常见的方法就是初始化之后使用小图标代替列表项标记 但是初始化之后如果用户使用类似FCKeditor的编辑器的话那么列表项标记就不会出现 尤其是ie6不会支持 那么参照方法二 二、多加个inside就可以.detailed_content ul li{list-style:disc inside;}.detailed_content ol li{ list-style:decim原创 2014-02-19 15:09:01 · 1052 阅读 · 0 评论 -
IE6/IE7下若出现下图错位样式
IE6/IE7下若出现下图错位样式,只需限制标签的高度即可原创 2014-01-03 10:41:24 · 862 阅读 · 0 评论 -
html表单
山东北京山东北京 哈哈 1112 百度 优酷北京济南111原创 2014-02-11 10:12:56 · 736 阅读 · 0 评论 -
Js实现当前导航菜单高亮显示
HTML结构 主页 栏目 栏目 JS代码var nav = document.getElementById("nav");var links = nav.getElementsByTagName("li");var lilen = nav.getElementsByTagName("a");var currenturl = document转载 2014-01-09 09:49:11 · 2113 阅读 · 0 评论 -
src与href属性的区别
详细出处参考:http://www.jb51.net/web/77258.htmlsrc和href之间存在区别,能混淆使用。src用于替换当前元素,href用于在当前文档和引用资源之间确立联系。src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame转载 2014-05-16 14:51:35 · 727 阅读 · 0 评论 -
position:fixed 固定定位(兼容IE6)问题及关闭浮动框的JS
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。position:fixed; 可以让网页上的某个元素固定在一个绝对的位置,即使拉动滚动条位置也不发生变化。(在 LOO2K 博客右下角的那个置顶的小按钮就是用了这个 CSS 属性实现的)一般的 position:fixed; 实现方法转载 2014-04-28 11:24:11 · 1283 阅读 · 0 评论 -
display:inline-block
1、inline元素(比如span,em等)的display属性设置为inline-block时,所有的浏览器都支持;2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;原创 2014-07-01 15:55:32 · 517 阅读 · 0 评论 -
网站打开之后ie浏览器都是杂项模式该如何处理
html DTD文档声明永远要放在第一行,否则ie默认文档模式就是杂项模式原创 2016-03-03 13:38:14 · 5130 阅读 · 0 评论 -
word-wrap与word-break的区别
word-wrap:break-word与word-break:break-all共同点是都能把长单词强行断句,不同点是word-wrap:break-word会首先起一个新行来放置长单词,新的行还是放不下这个长单词则会对长单词进行强制断句;而word-break:break-all则不会把长单词放在一个新行里,当这一行放不下的时候就直接强制断句了。转载 2014-08-19 09:37:43 · 759 阅读 · 0 评论 -
解决视网膜屏上看网页图片模糊的问题?
使用 img-set:background-image: img-set( url(a.png) 1x, url(a@2x.png) 2x );或 Media Query + background-size:.sprite { background-image: url(sprite.png); background-size: 100px 200px;转载 2015-12-31 12:22:07 · 2132 阅读 · 0 评论 -
a 标签的样式规划
http://www.neoease.com/a-tag-css-design/转载 2015-03-10 11:18:23 · 500 阅读 · 0 评论 -
background-size cover和contain的区别
相同点:图片都是等比例缩放不同点:cover是铺满整个显示区域。如果显示比例和显示区域的比例相差很大某些部分会不显示比如下面这张图,宽比高大很多,使用cover那么两边的就不会显示 background:#ccc url(111.jpg) no-repeat center top; background-size: cover;显示结果:两边的去掉很多,如果图片很小原创 2015-01-16 10:31:14 · 54519 阅读 · 3 评论 -
列表图片自适应垂直居中-空白标签+js
声明:部分代码来源于网络,有改动。css.menu{ width:960px; border:1px solid #ccc; background-color:#eee;}.menu ul li{ width:300px; height:250px; text-align:center; float:left; margin:15px 10px; _margin:15px 7px; di原创 2014-03-11 10:01:27 · 1132 阅读 · 0 评论 -
display:inline-block产生的间隙问题
网上有很多文章介绍,这里原创 2014-07-31 09:54:05 · 848 阅读 · 0 评论 -
如何优雅的清除浮动-块级格式化上下文,匿名框
匿名框分为两种,一种是匿名块级框,另一种是匿名内联框。匿名块级框看下面的例子div> Some text p>More textp>div>上面的代码会生成一个匿名块级框来包围Some text文本。演示效果如图: 如果一个块级框(如上面的div),包含一个另一个块级框(转载 2014-06-20 16:46:26 · 1669 阅读 · 1 评论 -
前端优化与实用工具
前端的性能对于一个Web应用来说非常重要,如果一个Web应用的页面加载速度非常快、对于用户的操作可以及时响应,那么产品的用户体验将会极大地提升。下图显示了页面加载速度对于用户体验的影响。你的Web页面的速度是否已经足够快了?其实可能还有很多可以提升的地方。Google和雅虎也提出了一些Web应用的前端优化建议,并发布了一些工具,你可以逐一检验你的Web应用,以便达到更高的性能。转载 2014-07-03 11:27:28 · 642 阅读 · 0 评论 -
不用Cookie的仿刷新二级高亮菜单
菜单高亮效果是每个网页经常采用的设计方式,它能有效地让用户知道自己当前所在的栏目。这也是我经常采用的方式,一般的网页至少都有两级菜单,第一个是顶部的总导航条菜单,另一个是左侧的分类导航菜单。一般要求在一级菜单高亮下二级菜单也能记录当前状态。对于一个包含顶部菜单的页头区域如果固定不变的,也就是它不用每次都重新加载,这种情况下用纯CSS或JS方式可以很容易地实现,但今天我要谈的不是这种,今天说的是转载 2014-01-09 16:24:22 · 754 阅读 · 0 评论 -
ie8不兼容input标签的处理办法
ie679 火狐都兼容就是ie8 谷歌 opera出现上图的情况只要在input标签加一个vertical-align:top;再调整下高度就可以了原创 2014-01-06 17:23:44 · 3933 阅读 · 0 评论 -
css初始化代码
我个人比较懒 注释就不写了清除浮动那一行艾玛比较重要 html{color:#000;background:#fff; overflow-y:auto;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} body,but原创 2013-10-23 10:58:42 · 805 阅读 · 0 评论 -
ie6下li内图片和文字不居中对齐的解决办法
2013-11-01新闻标题2013-11-01新闻标题2013-11-01新闻标题img不要写在a标签内li a{display:inline-block;}li img{vertical-align:middle;}原创 2013-10-29 21:32:49 · 1246 阅读 · 0 评论 -
子元素margin-top属性传递给父元素的问题
问题描述:一个父包含框包含一个子元素。给正常流的子元素一个垂直外边距margin-top就会使得父元素跟着往下走,而子元素和父元素的边距则没有发生变化。html结构:css样式:.box1{height:400px;background:#fad;}.box1_1{height:100px;margin-top:50px;background:#ade;}解转载 2013-10-23 09:43:02 · 3534 阅读 · 0 评论 -
涉及到图片展示的
父元素给定宽度和高度 设置溢出隐藏图片只给丁宽度 居中对齐 不给高度这样就不会是图片看起来压缩了原创 2013-10-28 17:11:16 · 539 阅读 · 0 评论 -
IE7以下浏览器的hasLayout属性,大部分的IE css bug都出于此
什么是hasLayout?hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。转载 2013-10-23 09:48:20 · 751 阅读 · 0 评论 -
改变网页文字被选中之后的颜色
::selection { background: #ef4832; /* Safari */ color: #FFF;}::-moz-selection { background: #ef4832; /* Firefox */ color: #FFF;}/*IE下不支持,如果要实现这样的效果,可以用js实现,当触发选中事件时,在选中的文字之转载 2013-10-28 11:21:15 · 1048 阅读 · 0 评论 -
Ie6 Ie7 双倍padding问题
产生条件:当父级元素没有定有高度,且定义了padding值,里面子元素有浮动时,padding值在ie6 7下会成双倍解决方法:1、定义父级元素的高度2、给父级元素添加display:inline-block举例如下;无标题文档*{padding:0; margin:0;}我是左边浮动元素我是右边浮动元素转载 2013-10-23 10:07:34 · 1401 阅读 · 0 评论 -
避免别人引用自己的网页
使用meta标签来控制网页显示的窗口,只要在网页中加入下面的代码就可以了:,这段代码可以防止网页被别人作为一个Frame调用。原创 2013-10-16 21:16:28 · 909 阅读 · 0 评论 -
纯css利用border制作三角形
点击我查看原理介绍 rgba(0,0,0,0) 透明 注意逗号- 透明:IE6浏览器不支持transparent透明属性,就border生成三角技术而言,直接设置对应的透明边框的border-style属性为dotted或是dashed即可解决这一问题,原因是在IE6下, 点线与虚线均以边框宽度为基准,点线长度必须是其宽度的3倍以上(height>=border-width*3转载 2013-10-16 21:20:59 · 979 阅读 · 0 评论 -
JS无缝代码滚动
****注****:如果父容器有绝对定位 那么要在这里加一句样式:position:absolute;相关分下如下:1、当元素的父容器没有指定定位方式时,指元素与body元素之间的偏移距离;2、当对父容器指定定位方式(如:position:relative;)时,则指元素与父容器之间的偏移距离;所以,当没有指定定位方式时,代码中的colee2.offsetTop值已经是元素co转载 2013-10-16 21:17:58 · 743 阅读 · 0 评论 -
文字+图片无缝滚动 兼容ie 360 火狐 谷歌 [花20积分买的]
js无缝滚动制作js文字无缝滚动和js图片无缝滚动*{margin:0;padding:0;list-style-type:none;font-size:12px;}a,img{border:0;}.scroll{height:300px;width:500px;}.scroll p{line-height:20px;padding:5px 0;}.scroll p a{co转载 2013-11-03 22:39:28 · 829 阅读 · 0 评论 -
ie6框架下,出现横向滚动条bug
碰到ie6在框架下出现横向滚动条的问题,其他浏览器都没有这个滚动条。 纠其原因,可能是因为ie6下的宽度没有把竖向的滚动条算进去,所以一旦高度出现滚动条,ie6横向的宽度相当于增加了这个滚动条,进而出现了横向滚动条。而别的浏览器就不会这么计算。解决方法:把出现滚动条的子框架中,在html标签里添加样式:overflow-x:hidden;overflow-y:auto;这样就o转载 2013-11-18 10:21:16 · 745 阅读 · 0 评论 -
改变字符之间的间距 英文和汉字
英文 word-spacing:汉字 letter-spacing:原创 2013-11-06 09:43:23 · 1472 阅读 · 0 评论 -
网站标签ico标志
来自网络 1、使用一个png图片通过网站在线转换成ico格式的图片2、放在网站根目录下3、在index.html里面输入转载 2013-12-16 17:37:17 · 904 阅读 · 0 评论 -
DW8 插入flash代码
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockw ave/cabs/flash/swflash.cab#version=6,0,29,0" width="960" height="763">转载 2013-11-06 17:39:17 · 1069 阅读 · 0 评论