display:inline-block的使用示例

2016-12-03 16:44:25 网页制作

在实习中做专题时,遇到的一个问题:建立一个宽度很长的一个页面,里面包含许多列。或许许多人认为直接设置float:left;不就行了 但是这个有一个问题,你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度,而实际中由于子页面中个数不定,因此外面的div块的宽度不能确定,若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行,这不是我们所要的就比如下面的代码 复制代码代码如下: <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> <title></title> <link rel="stylesheet" href="style.css"> </head> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 500px; height: 600px; background: #ccc; border: 1px solid red; } .list{ width: 150px; height: 300px; background: blue; float: left; border: 1px solid green; } </style> <body> <div class="box"> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> <div class="list"></div> </div> </body> </html> 可以 明显看到  后面的两个被挤到了下面的一行; 这时候可以使用display:inline-block 并将父级设置:white-spac:nowrap; 不够此时子div块之间会有一段空白  可以在父级中添加font-size:

为什么要特别提textarea?因为其实textarea这个节点很特殊。而因为这个节点特殊,所以在IE和其它浏览器下,对它的解释不一样。 卖一下关子,哈哈!其实主要原因是今天帮一个师兄修一个BUG,具体是因为从服务器拉数据下来插进textarea的时候失败,这个情况只在IE出现。其它浏览器一切正常! 首先,为什么textarea特殊?在所有的表单插件里面,textarea的值是写在两个开闭标签之间的,所以它的值在DOM的角度可以看作是文本节点,这是textarea特有的。也正因为这个特性,所以当你修改它的innerHTML的值时你仍然可以改变textarea的文本,而IE虽然支持这样做,却不允许一件事:动态插入一些html标签。 你不妨做一个实验: 在IE下通过JS插入一段HTML代码,用的是innerHTML属性而不是value或者innerText。 IE9+我是没有去测试,但是IE6、7、8都会报错。 估计是出于安全的原因,所以才不允许JS动态插入html进textarea,但细心的人可以发现,其实如果你手动键入html代码的话,textarea是可以接受的。我想其实这经历了这样一个过程:字符转义。对的,这是唯一能够解释手动输入html代码成功的原因了。 所以,在我看来,既然那么多的浏览器的textarea都不支持html的显示,为何JS操作的时候还要用innerHTML属性呢?也就是说无论你用value插入html代码还是用innerHTML插入html代码,它都不会解析后显示(所以才会有富文本编辑器代替textarea),那么为什么不用value去设置textarea的值呢? 所以我认为,设置textarea的值不应该通过innerHTML(当然更不可能是innerText,因为firefox的原因),而要通过value去设置。这一点是开发人员要注意的。因为最近看的一些童鞋的代码老喜欢用innerHTML。其实我认为这都是要分场合的。

本文实例讲述了CSS实现左图右文混排布局的方法。分享给大家供大家参考。具体分析如下:CSS图文混排是我们布局网页时经常要用到的布局方法,本实例就是一个典型的左图右文的常用布局,美观大方,方法简便,你可以运行一下代码,看下效果,是不是你想要的呢?复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="www.w3.org/1999/xhtml"><head><title>CSS左图右文混排布局</title><meta http-equiv="content-Type" content="text/html;charset=utf-8"><style type="text/css">* { margin:0; padding:0;}h3 { font-size:12px; color:#0066CC; line-height:2em;}p { font-size:12px; text-indent:2em; line-height:1.5em;}#container { width:300px; margin:0 auto; margin-top:10px; padding-right:3px; border:1px dotted #666; position:relative;}#leftContent { position:absolute; top:4px; left:4px;}#leftContent img{ height:80px; width:100px; border:1px solid #ccc; padding:2px;}#rightContent { margin-left:120px;}</style></head><body><div id="container"> <div id="leftContent"><img src="http://files.jb51.net/file_images/article/201505/2015513172559452.jpg"></div> <div id="rightContent"> <h3><a href="#">十年朋友,一生财富</a></h3> <p>十年之间,我不认识你,你不属于我,走过渐渐熟悉的街头,十年之后,我们是朋友,还可以问候,只是再也找不到。。。</p> </div> </div></div></body></html>希望本文所述对大家的div+css网页设计有所帮助。

合理的添加图片可以使一个网页更加的美观。图片标签<img><img>标签用于在网页里插入图片。<img>标签有一个重要的属性"src",它的属性值就是图片的地址。下面我们就在我们的index.html里插入一个图片。打开”index.html“文件,在</body>前加上如下代码: <p><img src="http://www.jb51.net/images/logo.gif" alt="技术支持"/></p> 保存后浏览网,请确认您的网页与该页面相同。我们注意到<img>是一个空标签,需要在结尾加上一个"/"以符合XHTML的要求。这里的例子除src外还有一个属性alt,我们把它叫做做替换属性,当图片由于某种原因而无法显示的时候,alt的属性值就会代替图片出现;而当图片正常显示时,只要把鼠标停在图片上就会看到alt属性的属性值。用图片作为链接我们在之前的教程中曾经学习过创建超级链接,下面我们打开“index.html”并且将刚插入的代码改为下面这段: <p><a href="http://www.jb51.net/"><img src="http://www.jb51.net/images/logo.gif"alt="技术支持"/></a></p> 保存后浏览网页,请再次确认您的网页与这个网页相同。看看图片是不是变成了超级链接,点击一下图片就会进入菜鸟吧的主页了。关于XHTML的效验从本节开始我们就不再修改"index.html"这个网页的外观了,现在将我们制作的网页送交权威机构检验一下。首先进入:http://validator.w3.org/,该页面就是一个XHTML效验工具,它用来检验我们制作的网页是否符合XHTML的标准。您可以选择用网址效验,也可以上传文件效验。您可以选择文件上传效验,方法如下:在”Validate by File Upload“有“Local File”一栏,点击浏览,找到并选中之前保存的"index.html",然后点击“check”按钮。您的结果应该与我们通过网址效验的结果一样。返回如下错误信息: Sorry, I am unable to validate this document because on line 3, 6-9, 12-14, 16-22 it contained one or more bytes that I cannot interpret as utf-8 (in other words, the bytes found are not valid values in the specified Character Encoding). Please check both the content of the file and the character encoding indication. 难道我们的网页不符合XHTML标准吗?请继续看下一节的内容。

实例如下:源代码:XML/HTML Code复制内容到剪贴板 <!DOCTYPE html>   <html>   <head>   <title>donghua</title>   <meta charset="utf-8">   <style type="text/css">   .beijing{    border: 1px solid black;    width: 100%;    height: 800px;    background: black;    }    .a1 img{    width: 100px;    height: 100px;    -webkit-filter: blur(2px);    }    .qq{    position: absolute;    left: 500px;    top: 150px;    }    .qq img:hover{    animation-name: one;    animation-duration: 3s;    animation-fill-mode: forwards;    }    @keyframes one{    0%{width: 200px;height: 200px;-webkit-filter:blur(4px);}    25%{width: 400px;height: 400px;-webkit-filter:blur(3px);}    80%{width: 600px;height: 600px;-webkit-filter:blur(2px);}    100%{width: 800px;height: 800px;-webkit-filter:blur(0px);}    }    .ww{    position: absolute;    left: 540px;    top: 180px;    }    .ww img:hover{    animation-name: one;    animation-duration: 5s;    animation-fill-mode: forwards;    }    .ss{    position: absolute;    left: 550px;    top: 240px;    }    .ss img:hover{    animation-name: one;    animation-duration: 5s;    animation-fill-mode: forwards;    }    .tt{    position: absolute;    left: 560px;    top: 260px;    }    .tt img:hover{    animation-name: one;    animation-duration: 5s;    animation-fill-mode: forwards;    }    .oo{    position: absolute;    left: 590px;    top: 300px;    }    .oo img:hover{    animation-name: one;    animation-duration: 5s;    animation-fill-mode: forwards;    }    </style>   </head>   <body>   <div class="beijing">   <div class="a1 qq"><img src="43a7d933c895d143b233160576f082025aaf074a.jpg"></div>   <div class="a1 ww"><img src="03087bf40ad162d9ec74553b14dfa9ec8a13cd7a.jpg"></div>   <div class="a1 ss"><img src="b151f8198618367ac7d2a1e92b738bd4b31ce5af.jpg"></div>   <div class="a1 tt"><img src="023b5bb5c9ea15cec72cb6d6b2003af33b87b22b.jpg"></div>   <div class="a1 oo"><img src="c2cec3fdfc03924578c6cfe18394a4c27c1e25e8.jpg"></div>   </div>   </body>   </html>  以上这篇css动画+照片清晰度动画的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。原文地址:http: