div | 易学教程

jQuery显示隐藏div的几种方法

阅读更多关于 jQuery显示隐藏div的几种方法

1、$("#demo").attr("style","display:none;");//隐藏div $("#demo").attr("style","display:block;");//显示div 2、$("#demo").css("display","none");//隐藏div $("#demo").css("display","block");//显示div 3、$("#demo").hide();//隐藏div $("#demo").show();//显示div 4、$("#demo").toggle(//动态显示和隐藏 function () { $(this).attr("style","display:none;");//隐藏div }, function () { $(this).attr("style","display:block;");//显示div } ); <div id="demo"></div> 注： $("#demo").show()表示display:block, $("#demo").hide()表示display:none; 1和2中的display:none可以换成visibility:hidden，display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间，而后者隐藏后会占空间例：

可编辑DIV 光标位置处理

阅读更多关于可编辑DIV 光标位置处理

//场景：要做一个网页即时通信,发送信息的文本编辑框要求能发图片和表情，那么textarea就不能满足需求了，因为textarea内没有办法加入image// 采用方案是使用可编辑的DIV（也就是一般 DIV的 contenteditable 属性为 true）// 但是发现添加表情或者插入图片之后，光标不会随着移动到末尾图片和表情采用的 append方式添加的html结构采用以下方法可以在输入图片和表情之后使光标出现在最后 IE11 和 chrome浏览器完全没问题 obj 传入的是需要append图片的 DOM对象，text 传入的是图片html结构function inimage(obj,text){ var range, node; if(!obj.hasfocus) { obj.focus(); } if (window.getSelection && window.getSelection().getRangeAt) { range = window.getSelection().getRangeAt(0); range.collapse(false); node = range.createContextualFragment(text); var c = node.lastChild; range.insertNode(node); if(c)

WEB标准布局（DIV+CSS）学习笔记（二）--DIV的布局基础

阅读更多关于 WEB标准布局（DIV+CSS）学习笔记（二）--DIV的布局基础

DIV的布局是挺基础，也挺重要的知识，有几个关键字：width、height、margin和float，用几个例子进行最简单的说明：每个DIV独占一行的布局先看一个很常见的例子：设计网页时，往往可以将页面分成top、center和bottom三个区域 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> #top { background-color: #666666; height: 50px; width: 480px; margin: 5px auto; } #center { background-color: #CCCCCC; height: 200px; width: 480px; margin: 5px auto; } #bottom {

去掉div下的img底部的缝隙

阅读更多关于去掉div下的img底部的缝隙

原因去掉图片底部的空白间隙：img前后有空格，而该空格的line-height有默认值，img元素的vertical-align的默认值为baseline，也就是基线对齐，img的底部对齐文字的底部解决方案有让img的vertical-align失效，vertical-align只对block块级元素无效，设置img的display为block 让img的vertical-align选其他值，例如top,bottom,middle 直接修改外层div的line-height，让其值小于空格的默认line-height 设置外层div的font-size为0 知识点 vertical-align的百分比是相对line-height,例如line-height为20px，vertical-align为10%，则最终计算vertical-align为20*10%=2px vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的详情见张大佬的博客来源： oschina 链接： https://my.oschina.net

WEB标准布局（DIV+CSS）学习笔记（一）--基础知识

阅读更多关于 WEB标准布局（DIV+CSS）学习笔记（一）--基础知识

首先，CSS样式有4种使用方式： 1、外部样式 2、内部样式 3、行内样式 4、导入样式外部样式：把CSS样式写入到一个单独的文件中，每个HTML页面链接该文件，是使用最为广泛的方式，很好的体现了表达（CSS）与结构（HTML ）的分离思想。  <head> <link href="css/mystyle.css" rel="stylesheet" type="text/css" /> </head> 内部样式：只在本HTML页面内有效，不能作用于其他页面。在本页面内，也能够实现表达（CSS）与结构（HTML）的分离。  <head> <style type="text/css"> h1 {color:#000000;} </style> </head> 行内样式：在某个html标签内，通过定义样式，使该标签的表达发生改变。这种方式并不好，因为表达（CSS）与结构（HTML）紧紧地耦合在一起。但由于使用DW等网页可视化编辑工具，可以非常方便的“所见即所得”，这种方式也被很多人所使用，但要知道，这是不对的，尽可能避免。  <p style="font-size:18px;">内部样式</p> 导入样式：

解决子级用css float浮动而父级div没高度不能自适应高度

阅读更多关于解决子级用css float浮动而父级div没高度不能自适应高度

1.使用css clear清除浮动；在父级div体内添加子级div<div style="clear:both;"/> 2.对父级样式加overflow:hidden。 <div style="overflow:hidden;"/>(PS:为什么是hidden?反其道而行之?) PS 1.clear 属性规定元素的哪一侧不允许其他浮动元素。可能值：left、right、both、none(默认值)、inherit 2.overflow 属性规定当内容溢出元素框时发生的事情。可能值：auto、scroll、hidden、visible(默认值)、inherit 参考文献： 1.解决子级用css float浮动而父级div没高度不能自适应高度-http://www.divcss5.com/jiqiao/j612.shtml 2.CSS 参考手册-http://www.w3school.com.cn/cssref/index.asp 来源： oschina 链接： https://my.oschina.net/u/1585241/blog/603893

Dreamweaver格式化html代码提高代码质量

阅读更多关于 Dreamweaver格式化html代码提高代码质量

一、快速启动：Dreamweaver-html源代码自动格式化把自己页面的源代码按照标准的格式整理好!也就是类似于: <table> <tr> <td> XXX </td> </tr> </table> 的格式,标签必须对整齐。首先在[编辑]|[首先参数]的"代码格式"中设置好格式: 第一行-缩进:勾选.可以选择使用Tab键或空格键填补缩进. 第二行-制表符大小:Tab键所占空位.这个只在DreamWeaver中有影响.不管你设为几,在文件中,一个Tab键还是一个Tab键. 第三行-自动换行:是否自动换行.不选. 第四行-换行符类型:换行符类型.(Windows) 第五、六、七行:标签大小写. 第八行:TD后无换行.不勾选. 第九行:居中方式. 设置好以后,点确定.然后转到菜单:[命令]|[应用源格式] 二、用Dreamweaver实现HTML代码格式化和净化功能我们在利用Dreamweaver3进行网页制作前，可以进行“格式化HTML代码”参数设置，如控制缩进、设置行间隔、设置标记和属性名称的大小写等，从而在创作文档时，保持其源代码格式简洁明了，也便于自我维护。利用“格式化HTML代码”和“净化HTML代码”的特性，还可以对现有文档的HTML代码进行格式化和净化，实现统一的HTML代码格式，删除无用的代码，修复代码错误，优化代码，提高代码质量。 1

js可拖拽的div

阅读更多关于 js可拖拽的div

图片img与父元素div之间的间隙解决

阅读更多关于图片img与父元素div之间的间隙解决

之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题, 仔细看,图片和div之间有间隙。下面贴上简易的代码 <div class="content"> <img src="./img/user.jpg"> </div> .content{ float:left; margin:100px auto; background:pink; } 我外层容器content设置浮动,按浮动元素会收缩的原理,本不应该出现这条粉色的间隙,但为什么这里会有呢？之后去网上查了一下,其中涉及到了line-height以及vertical-align的问题。正文 vertical-align vertical-align 指定了行内（inline）元素或表格单元格（table-cell）元素的垂直对齐方式(摘录自MDN)。 vertical-align的取值中有top、middle、baseline、bottom四个值,他们分别对应了橙色：top、粉色：middle、蓝色：baseline、绿色：bottom（手工做图，略丑，客官莫喷。 vertical-align中默认值是baseline也就是说图片的下边缘其实是和蓝色那条线对齐的,而文字元素<span>本身也有高度,所以会多出那么一部分空白的地方，也就是底部绿色线到蓝色线之间的距离。

Codeforces Round #578 (Div. 2) E. Compress Words（KMP优化）

阅读更多关于 Codeforces Round #578 (Div. 2) E. Compress Words（KMP优化）

题目链接题意：给定n个字符串，现在要合并这n个字符串，如果第i个字符串的某个前缀和第i-1个字符串的某个后缀相等的话，合并的时候只能并一个，如want to合并后就是wanto，输出合并后的字符串。思路：KMP模板题，每次匹配与前面已经合并好的字符串ans进行kmp合并，不过这里好优化一下匹配位置，要从ans的起点max（0，ans,size()-strlen(s))到终点ans.size()匹配，否则会tle。 # include <bits/stdc++.h> using namespace std ; const int maxn = 1e6 + 1 ; char s [ maxn ] ; int n , len , Next [ maxn ] ; void getNext ( ) { int j = - 1 ; Next [ 0 ] = - 1 ; for ( int i = 1 ; i < len ; ++ i ) { while ( j != - 1 && s [ i ] != s [ j + 1 ] ) j = Next [ j ] ; if ( s [ i ] == s [ j + 1 ] ) j ++ ; Next [ i ] = j ; } } int main ( ) { string ans ; scanf ( "%d" , & n ) ; scanf

订阅 div