HTML
文章平均质量分 68
布朗狗熊
这个作者很懒,什么都没留下…
展开
-
elementplus表格合并
表格数据有层级嵌套,for循环遍历渲染的,导致直接调用表格行合并方法会有问题。原创 2022-11-18 17:28:05 · 918 阅读 · 0 评论 -
CSS3选择器
CSS3选择器css3选择器主要分为:属性选择器和结构伪类选择器属性选择器:e[type="text"]{} 选择名字完全匹配的这个标签,eg:div[class="box"]{width:100px;}div中class等于box的宽度改为100px。e[type*=""] {} *号选择的是包含的属性值e[type^=""] {} ^号选择是以“”里面开头的...原创 2019-06-29 20:58:36 · 230 阅读 · 0 评论 -
CSS3新增属性
关于文本的:文本阴影:text-shadow 文本换行: Word-wrap 、 Word-break Css3服务器端字体: @font-face 使用方法: @font-face{ font-family:webFont; src:url(‘font/字体名称.otf’); } Div{font-family:webFont;} (阿里文字图标的加...原创 2019-06-29 21:13:34 · 3768 阅读 · 0 评论 -
flex弹性布局和多栏布局
flex弹性布局在未来flex布局将成为布局的首选方案 Flex是flexinle Box的缩写,意思是弹性布局;用来为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局。即:display:flex;Css3中box-sizing:属性让两种盒模型相互转变box-sizing : content-box || border-box || inherit;采用flex布局的元...原创 2019-06-29 21:15:12 · 424 阅读 · 1 评论 -
响应式布局之媒体查询法
响应式不同分辨率设置1.1024px显屏 @media screen and (max-width : 1024px) { /* 样式写在这里 */ }2.800px显屏 @media screen and (max-width : 800px) { /* 样式写在这里 */ }3.640...原创 2019-06-29 21:16:35 · 380 阅读 · 0 评论 -
js实现图片时间,京东倒计时案例
html代码<div id="pic"> <img src="img/0.png" alt="" /> <img src="img/0.png" alt="" /> <span>时</span> <img src="img/0.png" alt="" /> <...原创 2019-07-20 22:09:00 · 829 阅读 · 0 评论 -
js拖拽实现动态评分以及九宫格的实现
拖拽实现动态评分效果<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body,i,em{padding: 0;margin: 0;} i,em{fon...原创 2019-08-02 20:42:54 · 485 阅读 · 0 评论 -
js封装的运动函数适用于获取样式和样式变化(宽,高,透明度等)
封装的js函数 startMove.js//获取样式的函数function getStyle(obj,attr){ if(window.getComputedStyle){ return getComputedStyle(obj,null)[attr]; } return obj.currentStyle[attr];}/* 参数 * domobj要改变的dom对象 ...原创 2019-08-05 09:08:46 · 341 阅读 · 1 评论 -
js写一个烟花效果
调用一个startMove的js文件,这个封装用的原生js,包括获取样式,高度,宽度和透明度等。引用js地址如下https://blog.csdn.net/weixin_40196539/article/details/98477850如有错误,欢迎指正,不胜感激!烟花完整代码如下:<!DOCTYPE html><html> <head> <...原创 2019-08-16 20:32:55 · 605 阅读 · 0 评论 -
js用类的方法写萤火虫和组合创建的方法写萤火虫
上面两张为素材图方法一:类的方法<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> html{ height: 100%; } body...原创 2019-08-16 20:37:47 · 278 阅读 · 0 评论 -
原生js实现放大镜效果
下面是用到的图片下面是html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*body{padding: 0;margin: 0;}*/ i...原创 2019-08-16 21:26:34 · 266 阅读 · 0 评论 -
原生js实现星星评分效果
注意图片路径问题代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul,li,body{padding: 0;margin: 0;} ...原创 2019-08-16 21:29:26 · 828 阅读 · 0 评论 -
原生js实现瀑布流
瀑布流效果主要步骤分为1.排好第一行2.找出最小高度,往下排3.最小高度更新4.数据后续添加,找到最小值,加载数据js代码如下:<script type="text/javascript"> var data = ["img2/1.jpg","img2/5.jpg","img2/9.jpg","img2/1.jpg","img2/5.jpg","img2/9.jpg"...原创 2019-08-16 21:33:02 · 152 阅读 · 0 评论 -
js中的cookie基础封装和ajax的cookie完整封装以及实现7天免登陆效果
免登陆效果,主要是浏览器中cookie的作用,可以设置保存数据到本地,从而实现记住密码,免登陆1.cookie的基础封装,面试经常考这个。function setCookie(key,value,n){//cookie添加函数 var oDate = new Date(); oDate.setDate(oDate.getDate()+n); //value = encodeURIComp...原创 2019-08-16 21:41:04 · 781 阅读 · 0 评论 -
HTML高级结构以及input新增类型
HTML高级结构结构主要在移动端应用广泛 <header>写网页头部区域</header> <nav>写导航区域</nav> <article>写独立版块区域</article> <aside>写与article相关联的一些板块</aside> <se...原创 2019-06-29 20:36:03 · 161 阅读 · 0 评论 -
HTML常见bug的hack以及图片整合介绍
(前端面试常见问题)1.图片间隙 div中的图片间隙 bug:在块元素中插入图片时,有时图片会将块元素下方撑大三个像素。 hack:给<img>添加声明:display:block;vertical-align:middle2.css兼容问题1)表单元素行高不一致(IE,MOZ,C,O,S) BUG:表单元素行高对齐方式不一致 hac...原创 2019-06-22 09:32:10 · 1114 阅读 · 0 评论 -
HTML钟表的制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>钟表</title> <meta name="Keywords" content=""> &am原创 2018-08-01 22:48:16 · 2845 阅读 · 0 评论 -
利用JavaScript网页中显示当前时间
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq原创 2018-09-13 20:33:48 · 1701 阅读 · 2 评论 -
HTML5简介和基本标签
H5简介<!--HTML:超文本标记语言 (英文:HyperText Markup Language )是一种用于创建网页的标准标记语言,但是它不属于编程语言的范畴--><!-- HTML5:它是HTML标记语言的一个最新版本,其定义了很多新元素,比如新语义标签,智能表单,多媒体标签等,可以帮助开发者创建丰富的互联网应用 --><!-- 通常情况下,我们的一个...原创 2018-09-13 20:52:56 · 18858 阅读 · 6 评论 -
锚点定位案例
1)作用:在同一个页面内的不同位置进行跳转。2)给元素定义命名锚记点。语法:<标记 id=“命名锚记名”> </标记>3)命名锚记链接语法:<a href="#命名锚记名称">下面是具体案例<!DOCTYPE HTML><html><head> <meta charset="UTF-8">...原创 2018-09-13 20:55:58 · 1770 阅读 · 0 评论 -
HTML5中label标签实例
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq原创 2018-09-13 21:00:23 · 1496 阅读 · 0 评论 -
表单实例
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq原创 2018-09-13 21:03:10 · 2422 阅读 · 0 评论 -
表单域实例
<!DOCTYPE HTML><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq原创 2018-09-13 21:04:59 · 302 阅读 · 0 评论 -
表格实例
表格宽度:width 表格高度:height 表格边框:border单元格与单元格之间的间距:cellspacing="20" 单元格与内容之间的空隙cellpadding="10"水平对齐方式:align="left/center/right";(如果此属性加到table相对于浏览器的对齐方式;如果加到tr或td上表示单元格内容相对于单元格的对齐方式)垂直对齐:valign="top/...原创 2018-09-13 21:06:54 · 907 阅读 · 0 评论 -
表格CSS属性以及实例
表格的css属性 1)单元格间距(该属性必须给table添加)border-spacing:value; 2)合并相邻单元格边框 border-collapse:separate(边框分开)/collapse(边框合并);(写1像素边框表格) 3)无内容单元格显示、隐藏empty-cells:show/hide;table-layout:auto/fixed(固定单...原创 2018-09-13 21:10:57 · 324 阅读 · 0 评论 -
css中边框,行高等属性介绍
内边距:边框与内容之间的距离padding-left:左内边距 eg:padding-left: 10px; padding-top:上内边距 eg:padding-top:10px; padding-bottom:下内边距 eg:padding-bottom:10px; padding-right:右内边距 eg:padding-right:10px; padding属性值的4种形...原创 2018-09-14 20:29:16 · 334 阅读 · 0 评论 -
文本溢出的属性和解决方法
在写Html页面中,在文字详情等页面有宽度限制,需要显示省略号等1. 文本溢出显示省略号的写法 1)容器宽度:width:value; 2)强制文本在一行显示:white-space:nowrap(强制换行)/()/()/()/ 3)溢出内容隐藏:overflow:hidden(隐藏)/scroll(滚动条)/auto(自动:溢出显示滚动条,不溢出不显示)/inheri...原创 2019-06-22 09:16:13 · 1830 阅读 · 0 评论 -
HTML网页自适应以及清除浮动
自适应定义:网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是自适应。优点:元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。1)宽度自适应 子元素的宽度自动适应父元素的宽度 子元素宽度设置为100%。(块元素宽度默认值为auto)2)高度自适应 元素高...原创 2019-06-22 09:22:11 · 481 阅读 · 0 评论 -
常用浏览器内核介绍
常用浏览器内核以及介绍1)Trident :IE、Maxthon(遨游)、腾讯、Theworld世界之窗、360浏览器代表作品IE,因为Ie捆绑在Windows中,所有占有极高的市场份额,又称IE内核或MSHTML,此内核只能应用于windows平台,且是不开源的。 2)Gecko:代表作品Mozilla Firefox是开源的,它的最大优势是跨平台,能在Microsoft Window...原创 2019-06-22 09:28:47 · 287 阅读 · 0 评论 -
HTML、CSS定义字体、颜色、背景等属性
字体属性 字体font-family:"字体1","字体2",... 例:font-family:“宋体”; 字号font-size:大小的取值 例:font-size:16px; 注意:xx-small:绝对字体尺寸,最小。 x-small:绝对字体尺寸,较小。 medium:绝对字体尺寸,正常默认值。对应还有large、x-large、xx-large等。large...原创 2018-07-31 12:31:52 · 14965 阅读 · 0 评论