随笔分类 -  css

摘要：1.<label style="font-size:12px;">12号字体</label><input style="vertical-align:-2px;" type="checkbox" />元素相对于基线向下偏移两像素，这个常常用来修复单选框/复选框与12像素文字大小不对齐的问题2.vertical-align适用于与inline同一行的，又能设置高度的属性的元素；inline-block;如button,cheeckbox,radion,单行或者多行的文本框等； 阅读全文

摘要：1.2.3.4.今天要做一个如图所示的效果，于是在网上大搜一翻，看看前辈们是如何做的，做成这种效果的方法应该比较多吧，但我目前知道的是用背景图片的叠加，绝对定位等等，感觉很繁琐，不过在各个浏览器中表现的一样；经过自己的摸索，自己也摸索出来了一种方法，也许前辈们已经想出来了，可能我不知道，我做的这个在各个浏览器有一定的差异，但差异不是很大，这可能就是简单了的原因吧。html： <div id="search" style=""><label>关键字搜索</label> <span style="" 阅读全文

摘要：html: <div id="runcon"> <ul class="show"> </ul> </div>css:<style type="text/css">#runcon{margin:0 auto;width:400px;overflow:hidden;background:#ffffff;border:1px solid #d6d6d6;height:100px;}#runcon ul{list-style-type:none;position:relative;m 阅读全文

摘要：<div style="width:500px;border:1px solid #336699;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"> overflow:hidden；内容会修剪，其余内容不可见； white-space: text-overflow:超出的内容以省略号显示； width必须定义； </div> 阅读全文

摘要：toggle(fn1,fn2,fn3,---)函数是为对象添加click事件的函数，设置每次点击后一次调用的函数，每次点击一次，就调用一次；toggle实例：html: <h2>点击隐藏和关闭的效过<span>-</span><span>收起</span></h2> <div class="content"> 熟悉jquery事件，委托事件，快捷事件，切换事件 </divcss:<style type="text/css">h2{width:400px; 阅读全文

摘要：<div><ul><li>1</li><li>2</li></ul></div>实现思想：1.内容的持续滚动；通过设置ul的position;relative;我的实验中用了，position:absolute;top:0也能达到此效果，但这两种方法有什么差异目前，还未清除；给人的感觉就是除了第一个li之外，其他的li是一起滚动的；2.新浪微博的内容是通过上面的内容，把下面的内容推下去，最后一个又重新跑到第一个内容处；让最后的li元素定时插入第一个li元素的上方，然后采用animate方法来改变li 阅读全文

摘要：1.一行一列宽度自适应<div id="d1">一行一列自动宽度适应</div><style type="text/css">#d1{height:100px;border:1px solid red;margin:0 auto;} </style>2.一行两列宽度自适应div id="d1">左列宽度固定</div><div id="d2">右列，自动宽度，自适应</div><style type="text 阅读全文

摘要：前端开发常用的工具“工欲善其事，必先利其器”，现在开发Web应用和前些年相比已经完全不同了。早些年开发ASP应用时，只需要掌握如何应用Dreamweaver就行了；而现在Web应用得越来越成熟，开发语言也更多样化，特别是在Web标准、兼容性、性能、调试、设计等方面得到了广大用户的重视，基于Web的工具应用也越来越多。这些工具能辅助我们在开发效率、思维拓展、协同工作等方面进行改善。下面的小节中将列举一些前端开发人员所必须掌握的工具，相信它们能给我们的工作带来便利。1.4.1 设计类工具Adobe公司旗下的一些软件是我们最常使用的工具集，下面分别介绍其中的一些软件。Adobe Photoshop作 阅读全文

摘要：1.实现只带下划线的textbox;#input1{border:1px;boder-bottom-style:solid; border-bottom-color:red;boder-bottom-color:color;boder-top-style:none;boder-left-style:none;border-right-style:none;color:red;}2.限定文本框的输入（js）；function txtcontrol(content){if(content.length>2){document.getElementById("txt").v 阅读全文