想必大家都注意到的不循环滚动，所以出现了很多替代脚本，或iframe或JS输出，不管怎么做，都略显麻烦。下面说一下这个相对简单的实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无...
new/2019-09-27-201927/hap-table2css.rar
div+css 左右两列高度自适应以及父级div也跟着自适应子级的高度 代码如下： 左右两列高度自适应以及父级div也跟着自适应子级的高度 #container { width:216px; height:auto;overflow: hidden; } #container div { float: left; width:8px; margin-bottom: -800px; padding-bottom: 800px; } #container .zuo{ background-image:url(http://www.616sc.com/616/f_lm.gif)} #container .you{ background-image:ur...
转自：http://www.zhukun.net/archives/361#more-361 CSS功能复杂多变，大多数新手莫不着头脑，不知道怎么去控制。所以做个简易教程。1，文字控制类 font-size:12px; 文字大小，通常为12px。现在又流行14px。大小自己控制。 color:#666; 颜色控制，颜色自己下个取色板吧。16进制line-height:2em; 行高，em为字符，支持px 百分比等等多种单位text-align:center; 文字居中，居左不要，居右为rightfont-weight:bold; 文字加粗te...
以下是有关于边框样式的定义，首先，以下样式是html5的定义内容，对于浏览器，IE8、IE8以下的浏览器存在很多兼容问题，但是IE9浏览器，已经达到了他的兼容效果： border-color:#ccc #aaa #999 #666 #777;的定义 使用CSS3的border-radius属性，如果你设置了border的宽度是X px，那么你就可以在这个border上使用X种颜色，每种颜色显示1px的宽度。如果说你的border的宽度是10个像素，但是只声明了5或6种颜色，那么最后一个颜色将...
单行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center; } #content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; } 两行一列 以下是引用片段： body { margin: 0px; padding: 0px; text-align: center;} #content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;} #content-end {margin-left:auto; margin-right:auto; width: 400px; wid...
CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中，再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积，减少对服务器的请求次数，提高效率。 讲CSS Sprites之前，先把背景图片给搞清楚 #menu ul li a { background:#ccc url(images/nav_bg2.gif) 0 0 no-repeat; } css背景属性缩写后如上所示，#ccc表示背景色；url（）里是背景图片路径；接下来的两个数值参数分别是...
1.想要how are you 中的空格有效：需加 word-spacing:20px; 2.固定div的宽度后，里面的文本是否想要溢出or隐藏： 需要设置 text-overflow:ellipsis;overflow:hidden; text-overflow:ellipsis; overflow:visible; 3.文本中的空白是否有效：white-space:nowrap;//一行显示 white-space:pre;//遇到空白的换行才换行 4.根据词的属性换行 word-break:break-all;//是根据宽度而换行，不管这个词是否写完整立即换行。 5...
这久发现了一个很好的效果图自动切片生成DIV+Css工具，给我网页开发确实带来不少方便。 官方地址：http://www.guanlian8.com/product.asp?cataid=33&id=230 软件操作手册下载：http://www.guanlian8.com/down/%E8%87%AA%E5%8A%A8%E5%88%87%E7%89%87%E8%BD%AF%E4%BB%B6%E6%93%8D%E4%BD%9C%E6%89%8B%E5%86%8C.doc 如需注册请联系我，qq：371816210
（图bj.gif） 无标题文档#header,#footer{ background-color:#399; width:1000px; border:1px solid red; height:50px; } #content{ width:1000px; height:auto; background:url(bj.gif) repeat-y left; } #left{ width:300px; height:auto; float:left; background-color:#336; } #center{ width:400px; height:auto; float:left; background-color:#309; } #right{ width:300px; height:auto; float:right; b...
第一种，如果要看演示，新建记事本，把下面代码加进去后保存，文件名改成 ：abc.htm,然后直接运行就可以看了。 Copy code #nav{ height: 44px; width: 600px; background: #FFF; } .vline{ background: #999; width: 1px; height: 20px; } #nav ul{ margin:0px; padding: 0px; list-style-type: none; } #nav li{ float: left; font-family: Arial; font-weight: bold; font-size: 12...
代码: < html xmlns ="http://www.w3.org/1999/xhtml" > < head > < meta http-equiv ="Content-Type" content ="text/html; charset=gb2312" /> < title > 黑色CSS菜单 </ title > < style > #menu { background : #333 ; float : left ; list-style : none ; margin : 0 ; padding : 0 ; width : 100% ; height : 0px ; } ...
Untitled Document body { margin:0; padding:0; font: bold 11px/1.5em Verdana;} h2 { font: bold 14px Verdana, Arial, Helvetica, sans-serif; color: #000; margin: 0px; padding: 0px 0px 0px 15px;} /*- Menu Tabs--------------------------- */ #tabs { float:left; width:100%; background:#BBD9EE; font-size:93%; line-height:normal; } #tabs ul { margin:0; padding:10px...
自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼,下面介绍的是CSS如何实现换行的方法 最佳CSS定义换行代码 .wrap { table-layout:fixed; word-break: break-all; overflow:hidden; } 这里 overflow:hidden;或者 auto； 对于div,p等块级元素 正常文字的换行(亚洲文字和非亚洲文字)元素拥有默认的white-space:normal,当定义的宽度之后自动换行 html 正常文字的换行(亚洲文字和非...
要求：在不同的浏览器下，要求字多的时候，框会自动延伸，字少的情况下是200px，字没有的情况下还是这个高度。此例子主要用了(!important) CSS代码： *{padding:0; margin:0}body{ font-size:30px;padding:100px}.box{width:300px; height:auto !important; min-height:200px;border:5px solid #000000} HTML代码: View Code 1 2 smart工作室 3 smart工作室 4 smart工作室 5 smar...