div标签

html在div中显示滚动条

由 妖精的绣舞 提交于 2019-11-27 15:53:25
基本思路：滚动条要添加到内容部分的 父标签上（div） ，内容部分不设置大小，父标签要明确设置大小，并且父标签要添加 overflow 样式，并设置成 auto 。 打开的效果如下： 这时可能有人会问，父div的长度和宽度如何确定呢？有时候这个父div是需要根据页面的大小来自动适应的！！！！！例如下边这种页面是很常见的: 其中header部分、sider部分、footer部分是固定宽度的，而content区域是要适应不同窗口大小的，这时这个content大小就是问题了。 解决的办法有我有两种： 1、利用css 的 flex布局，具体如何做，可以搜索去学，但flex貌似是ie9即以下的ie不行； 2、利用css的calc函数，通过减掉固定的像素后得到具体的像素大小；实例代码如下： 页面的效果如下： 由于例子中使用了flex布局，所以要求IE浏览器最低版本为10！！！ calc函数书写的时候一定要注意！函数内表达是的运算符前后必须要用空格隔开！ 对的：calc(100vh - 10px - 10px) 错的：calc(100vh-10px-10px)、 calc(100vh -10px -10px)等 来源： https://www.cnblogs.com/janken/p/11369202.html

可编辑DIV （contenteditable=\"true\"） 在鼠标光标处插入图片或者文字

由 落花浮王杯 提交于 2019-11-26 17:14:54
近期需开发一个DIV做的编辑器，插入表情图片可直接预览效果，仔细参考了下百度贴吧的过滤粘贴过来文件的THML代码，自己整理了下。写出来只是和大家分享下，我自己也不大懂，经过努力，幸好搞定。 蛋疼的事情出来了，当编辑框失去焦点时候，再插入图片时候总是插入在最前面（谷歌和火狐，IE没问题）。还没搞定，，， <!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-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIV可编辑框鼠标光标处插入图片或者文字。</title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js "></script> <script type="text

Html动态添加新的div等元素

由 生来就可爱ヽ(ⅴ＜●) 提交于 2019-11-25 23:48:28
利用鼠标点击事件生成新的元素，适用于动态添加表单等。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <div id="div1" οnclick="fun1()" style="border:1px solid #ebebeb"> <p id="p1">点击添加新的元素。</p> <p id="p2">利用JS向页面动态添加元素</p> </div> <script> function fun1(){ var para = document.createElement("p"); var node = document.createTextNode("这是一个新的p标签。"); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); } </script> </body> </html> 来源： https://blog.csdn.net/zhh0310235/article/details/98740912
订阅 div标签