500px | 易学教程

无缝滚动 Js

阅读更多关于无缝滚动 Js

js 无缝切换 CSS .clearfix { clear: both; } .banner { width: 500px; height: 500px; overflow: hidden; margin: 0 auto; position: relative; background: url(../img/loading.gif) no-repeat center;} .banner ul { height: 500px;} .banner li {position: absolute; left: 500px; top: 0; width: 500px; height: 500px; list-style: none; z-index: 5;} .bannerspan { text-align: center; position: absolute; bottom: 10px; left: 0px; width: 500px; z-index: 11;} .bannerspan span { display: inline-block; width: 10px; height: 10px; border-radius: 5px; background: #0ff; margin: 0 3px; cursor: pointer;} .bannerspan span.on {

几种有效的清除浮动的方法

阅读更多关于几种有效的清除浮动的方法

浮动是 CSS 布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为 CSS 布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。当元素浮动时，它将不再处于普通文档流中，相当于浮在文档之上，不占据空间，但是会缩短行框，产生文字环绕的效果清除浮动有好一些方法，但兼容各种浏览器的方法却不多，下面我就介绍几个比较有效的兼容的方法: 我们以下面的 HTML 代码为例来说明这几种方法的用法： <div id="box"> <div id="sidebar"></div> <div id="main"></div> </div> 对父级设置CSS高度原理：父级 div 手动定义 height ，就解决了父级 div 无法自动获取到高度的问题优点：简单、代码少、容易掌握缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级 div 不一样时，会产生问题建议：不推荐使用，只建议高度固定的布局时使用对应 CSS 代码： #box{ width:500px; margin:10px auto; background:#ccc; height:500px;/*解决代码*/ } #sidebar{ width:190px; height:500px; float:left;

轮播图

阅读更多关于轮播图

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 ul{ 12 list-style: none; 13 overflow: hidden; 14 } 15 ul li{ 16 float: left; 17 width: 200px; 18 height: 50px; 19 border:3px solid black; 20 text-align: center; 21 line-height: 50px; 22 } 23 </style> 24 </head> 25 <body> 26 <ul> 27 <li>1</li> 28 <li>2</li> 29 <li>3</li> 30 <li>4</li> 31 <li>5</li> 32 </ul> 33 <script> 34 // 除了通过ID名获取标签,还有通过标签名获取标签 35 var lis=document.getElementsByTagName('li'); 36 for(var i=0;i<lis.length;i++){ 37 console.log(lis[i]); 38 //

css使图片垂直居中

阅读更多关于 css使图片垂直居中

第一种方法 <style type="text/css"> .first{ width: 500px; height: 500px; border: 1px solid black; margin-left: 50%; transform: translateX(-50%); text-align: center; } .second{ width: 200px; height: 200px; border: 1px solid black; display: inline-block; vertical-align: middle; } span{ height: 500px; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="first"> <span></span> <div class="second"> </div> </div> </body> 第二种方法 <style type="text/css"> .first{ width: 500px; height: 500px; border: 1px solid black; margin-left: 50%; transform: translateX(-50%); position:

小白初学HTML的一些小理解

阅读更多关于小白初学HTML的一些小理解

小白初学HTML 在我学习css语法时遇到了一些问题在子元素浮动时，导致父元素坍塌。如何去解决父级元素坍塌的问题 position 的属性 position的实际应用在我学习css语法时遇到了一些问题在子元素浮动时，导致父元素坍塌。 <style> .box{ background-color: red; } .box1{ width: 200px; height: 200px; background-color: green; float: left; } .box2{ width: 200px; height: 200px; background-color: blue; float: left; } </style> </head> <body> <div class="box"> <div class="box1"></div class="box1"> <div class="box2"></div> </div> </body> 此时的效果为父元素设置的红色并没有显示出来，因为他的高度变成了 0。此时父级元素高度坍塌了。如何去解决父级元素坍塌的问题 1.为父元素设置高度 .box{ background-color: red; height: 400px; } 此时的显示效果为这个方法并不好，当要调整子级元素时，父级元素也有相应的做调整。 2.

div 图片垂直居中

阅读更多关于 div 图片垂直居中

div水平居中很容易，设置css样式 text-align: center; 就可以了。垂直居中也有个属性 vertical-align: middle; 这个属性普通设置是没有效果的。第一种方法：通过一个空白图片可以达到垂直居中的效果。 <html> <style> #image{ width:500px; height:500px; background:#fff000; text-align: center; overflow: hidden; } #image img { 　　　　vertical-align: middle; 　　 } #block { width: 0px; height: 100%; } </style> <body> <div id="image"> <img src="http://www.mm21.cn/dimg6/qqtu/201105/20110507234620615.jpg"/> <img src="" id="block"/> </div> </body> </html> 个人觉得 vertical-align: middle 是相对于左边的高度垂直居中的，我给左边一个填满div的图片，就可以实现垂直居中了。第二种方法：往div里面加表格。 <html> <style> #a { background: #fff000;

css重点知识和bug解决方法

阅读更多关于 css重点知识和bug解决方法

1.图片向下撑大3像素问题在一个盒子里面放一张图片，默认情况下，图片会向下撑大3像素，有以下几种解决方法： 1.1 给图片添加display : block； 1.2 给图片添加 float : left； 1.3 给图片添加 vertical-align : middle ; 1.4 给他的父元素加font-size：0； 2.如何实现一张未知宽高的图片在一个盒子里面做水平垂直居中？给父元素添加宽高，添加行高添加 text-align：center 给图片添加：vertical-align：center 3.元素的类型分类哪几种？各自都有什么特点？块元素独占一行，竖着排，能设置宽高行内元素默认情况下文本一行显示，不能设置宽高行内块状元素 inline-block,既有行内元素的特点又有块状元素的特点可变元素添加float：left 相当于display：block 4.如何实现一个元素消失和出现？ display：none display：block opcity : 0 ; opcity : 1 ; 5.单行文本溢出显示省略号怎么实现？添加width； white-space：nowrap； overflow：hidden； text-overflow：ellipsis； 6.定位的属性值有哪几个？分别有什么特点？ position : absolute

垂直居中及容器内图片垂直居中的CSS解决方法

阅读更多关于垂直居中及容器内图片垂直居中的CSS解决方法

方法一: <style type="text/css">  </style> <div><p><img src=" http://www.google.com/intl/en/images/logo.gif " /></p></div> 方法二: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html xmlns=" http://www.w3.org/1999/xhtml "> <head> <meta

Jquery绑定事件及动画效果

阅读更多关于 Jquery绑定事件及动画效果

Jquery绑定事件及动画效果本文转载于： https://blog.csdn.net/Day_and_Night_2017/article/details/85799522 绑定事件 bind（type，data，fuc） one(type,data,fuc) //只执行一次常见事件类型名称含义 blur 失去焦点 focus 获取焦点 load 加载 resize 重置大小 scroll 滚动 unload 卸载 click 点击 dblclick 双击 mousedown 鼠标按下 mouseup 鼠标弹起 mousemove 鼠标移动 mouseover 鼠标悬停 mouseout 鼠标移走 mouseenter 鼠标移入 mouseleave 鼠标离开 change 内容改变 select 选中 submit 提交 keydown 有键按下 keypress 有键按下 keyup 有键弹起 error 有错误判断是否显示 if($("#id").is(":visible")) { } else { } 简化绑定事件 $(this).mouseover(function(){ //代码 }) Hover事件 hover（enter，leave）光标移入，触发第一个事件，光标移走，触发第二个事件 $("#id").hover(function(){ //光标移入

让块元素在div中水平居中，并且垂直居中的五种方法

阅读更多关于让块元素在div中水平居中，并且垂直居中的五种方法

在写代码前，先做下准备工作，写两个div,设置下div的大小，把小的div放在大的div里面。可以给小的div设置下颜色，方便观看. 方法一：写一个伪元素，将它设置为行内块元素，高度与父元素相同，写一条属性，vertical-align:middle,子元素也要写，具体代码如下： <style> div{width:500px;height:500px;box-shadow:0 0 5px #000; text-align:center;} .zi{width:100px;height:100px;background:#60C;display:inline-block;vertical-align:middle;} div:after{content:""; height:500px; background:#00C;display:inline-block;vertical-align:middle;} </style> </head> <body> <div > <div class="zi"></div> </div> 方法二：利用定位，给大的div写一个position:relative;子元素写position:absolute; 这时子元素的包含块就是外面大的div,然后给里面的div写一下位置left:0;right:0;top:0;bottom:0;margin

订阅 500px