html
xvzhengyang
这个作者很懒,什么都没留下…
展开
-
css实现分割线功能,各种各样的分割线(附效果图)
css hr 分割线原创 2022-07-08 18:11:07 · 15567 阅读 · 0 评论 -
div设置百分百高度实现
在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的。这个是因为body高度默认值为自适应的,所以及时设置body第一个布局div高度为百分比也是无效的,因为div解析上级高度为0,自然div height 100%实际高度也为0。浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。因为页面并没有缺省的高度值,所以,当你让...原创 2021-04-19 19:27:06 · 3016 阅读 · 0 评论 -
js调试技巧
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>调试小技巧</title> </head> <body> <div id="app"> <p>\config\index.js</p> <span> 本地正常启动vue项目,localhost:9001 本地.原创 2021-02-03 18:12:05 · 103 阅读 · 0 评论 -
日期格式比较
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> function compareTime(start, end) { let firstStart = start.replace(/\-.原创 2021-02-03 18:07:53 · 134 阅读 · 0 评论 -
div与span的外边距
1.text-align会对块元素中的所有内联内容对齐;实际上text-align不仅仅是适用于文本,是对所有类型的内联元素对齐; 另外text-align属性只能在块元素上设置,如果直接在内联元素上使用那么是不起作用的.2.子孙选择器 2.1 用途:我们只想选择某些元素的子孙元素. 写法如下 div h2{...原创 2019-03-05 21:55:31 · 3658 阅读 · 0 评论 -
关于..和img的一些记录
.. 是什么意思? ".."表示向上移动到父文件夹,换句话说对浏览器来讲,这就是父文件夹. 如果要向上两级文件夹而不只是一级该怎么办? "../../",用"/"分隔每一部分,这个我们叫做父文件夹的父文件夹 <img>元素:浏览器在页面中显示图像之前,必须先获取这个...原创 2019-03-05 21:57:57 · 227 阅读 · 0 评论 -
为列表增加一些样式
效果如下图,为列表ol或者ul添加标识符代码如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>为列表增加一些样式</title> <!-- 列表的主要属性是 list-style-type,利用这个属原创 2019-03-05 22:10:19 · 499 阅读 · 0 评论 -
CSS中的表格(一)
如何使用HTML来完成一个表格? <table>元素专门负责标记表格数据. <tr>每个tr元素构成表格中的一行 <th>每个th元素分别是某一列的表头;浏览器默认的会用粗体来表示表头. <td>每个td元素包含表格中的一个单元格,每个单元格分别构成一个单独的列;包含一个表格数...原创 2019-03-05 22:15:54 · 6041 阅读 · 1 评论 -
form表单二之几种常见的表单
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>几种常见的表单</title> <!-- 文本输入 提交输入 单选按钮输入 复选框输入 1.文本输入: text <ipnu原创 2019-03-05 22:29:00 · 503 阅读 · 0 评论 -
CSS属性选择器
顾名思义:属性选择器就是根据属性值来选择元素<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>属性选择器</title> <!-- 顾名思义:属性选择器就是根据属性值来选择元素 --> <原创 2019-03-06 23:08:17 · 413 阅读 · 0 评论 -
CSS变换和过渡一
/* 鼠标处于悬停状态的时候,旋转45度 PS:效果没有过渡,看下一个html我们看下过渡效果*/<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>CSS变换和过渡</title> <!--...原创 2019-03-06 23:08:02 · 181 阅读 · 0 评论 -
css过渡效果二
鼠标悬停看到动画过渡效果,旋转 缩放 平移以及透明度#box{ position: absolute; top: 100px; left: 100px; width: 200px; height: 200px; ...原创 2019-03-06 23:07:41 · 337 阅读 · 0 评论 -
CSS代码技巧
1.当class或者ID包含多个单词时,应使用连字符(-),CSS不区分大小写,因此不能使用驼峰式命名。同样,CSS中也不建议使用下划线连接的命名方式。/* 正确 */.footer-column-left { }/* 错误 */.footerColumnLeft { }.footer_column_left { }2.不要重复设置大多数CSS属性的值都是从D...转载 2019-07-02 23:37:29 · 224 阅读 · 0 评论 -
css中的text-align和子孙选择器
<!-- text-align:不仅仅是影响文本,实际上会对块元素中的所有内联内容对齐,包括图片; 另外需要记住,text-align属性只能用在块元素身上,对内联元素是没有影响的-->子孙选择器,如下图,h1的字体颜色为红色,但是可以通过是使用子孙选择器,改变子孙元素的字体颜色<!DOCTYPE html><html> &l...原创 2019-01-15 23:08:25 · 433 阅读 · 0 评论 -
css中的绝对定位
<!-- 1.绝对定位,脱离文档流,和浮动不同的是,内联元素不会围绕绝对定位元素 --> <!-- 2.绝对定位元素可以分层放置,若同一个位置上有多个绝对定位元素,可以有一个名为z-index的属性, 会指定它在一个虚拟z轴上的位置(上面的元素"更靠近你",z-index更大)--> <!-- 3.position的...原创 2019-01-15 23:08:38 · 217 阅读 · 0 评论 -
html5拖动元素
<!DOCTYPE HTML><html>/*将一个元素拖动到另一个元素上*/ <head> <meta charset="utf-8" /> <style type="text/css"> #div1 { width: 198px; height: 66px; padding: 10px; bor转载 2018-04-18 15:11:50 · 472 阅读 · 0 评论 -
Vue.js中slot插槽
<slot></slot> 插槽: 1.个人理解:组件中,如果我们不使用插槽slot元素,那么我们在组件中放入任何元素或内容都是不会显示,也就是说放入的元素会被抛弃;使用插槽slot可以向组件内部制定位置传递内容;也就是说<slot>显示不现实以及如何显示是父组件来决定的.2.分类 2.1 "单个插槽"又叫"匿名插槽"或"默认插槽" ..原创 2018-09-06 00:01:45 · 555 阅读 · 0 评论 -
(转载,非原创)CSS实现水平垂直居中的多种方式
大体可以分为以下几种方式:仅居中元素定宽高适用absolute + 负margin absolute + margin auto absolute + calc居中元素不定宽高absolute + transform lineheight writing-mode table css-table flex gridok,我们先看下仅居中元素定宽高的情况absol...转载 2018-10-22 23:41:26 · 97 阅读 · 0 评论 -
css属性width默认值width: auto与width: 100%区别
width: auto子元素(包括content+padding+border+margin)撑满整个父元素的content区域。子元素有margin、border、padding时,会减去子元素content区域相对应的width值父元素的content = 子元素(content + padding + border + margin ) width: 100%强制将子元...转载 2018-10-23 00:12:53 · 858 阅读 · 0 评论 -
水平居中:使用flex和justify-content
<!-- flex很强大,但是兼容性不是非常好,个人倒是比较喜欢flex --><!DOCTYPE html><html> <head> <meta charset="utf-8"> <!-- 同上,兼容性不是很好 --> <title>水平居中:使用flex和just原创 2018-11-28 21:32:40 · 1071 阅读 · 0 评论 -
css 多列等分布局使用float
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多列等分布局使用float</title> <!-- 百分比 box-sizing为border-box:padding和border都被计算到width里面 --&原创 2018-11-29 19:53:59 · 514 阅读 · 0 评论 -
HTML中的内联元素外边据
<!-- 通常我们总是希望使用与内容含义最接近的元素来标记内容 --> <!-- 可以设置内联元素的宽度,但是在对这些元素定位之前,可能注意不到宽度改变的效果,另外可以对这些元素增加 内边距/外边据和边框等,内联元素上的外边据和内边距与块元素稍有不同,如果一个内联元素四周都加上外边据,只能看到左边和右边增加空间 .你也可以对内联...原创 2019-01-13 10:05:32 · 376 阅读 · 0 评论 -
a元素和它的多重人格以及伪类
下面的span当鼠标悬停在上面的时候背景色会改变,代码如下所示 1.样式方面,链接表现得稍有些不同.链接是元素世界的变色龙,取决于具体环境,会瞬间改变样式 2.主要是根据状态改变样式. 未访问 已访问 悬停状态(其他状态 focus指的是浏览器将焦点放到你的链接上,有些浏览器允许 按下Tab键轮流访问页面上的所有连接.浏...原创 2019-01-13 21:50:18 · 194 阅读 · 1 评论 -
html中的引用 q 和blockquote
<!-- q 短引用,作为现有段落的一部分,有些浏览器会加上双引号,有些浏览器不会加上双引号--> <!-- blockquote用于较长的引用,需要单独显示;另外会把首行缩进 --><!DOCTYPE html><html> <head> <meta charset="u...原创 2019-01-13 21:59:39 · 457 阅读 · 0 评论 -
css中的标签选择器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>id属性</title> <!-- 未完待续 --> <style type="text/css">原创 2019-01-13 22:13:02 · 287 阅读 · 0 评论 -
HTML中的元素外边距
<!-- 一个元素嵌套到另一个元素,他们都有外边距,会折叠; 1.只要两个垂直外边据碰到一起就会折叠,即使是一个元素嵌套到另一个元素中也不例外;但是 如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,这样就不会折叠;但是边框去掉就会折叠--> <!-- 浏览器:块元素,上下放置,外边距高度就是最大的外边...原创 2019-01-13 22:32:03 · 2733 阅读 · 0 评论 -
css中的流体与冻结设计
<!-- 1.布局锁定,当用户调整屏幕代大小的时候,设计仍然可以保持原样,称之为冻结布局 --> <!-- 2.凝胶布局,会锁定页面中的内容区的宽度,将其在浏览器中居中显示 --><!DOCTYPE html><html> <head> <meta charset="utf-8"> &转载 2019-01-13 22:40:26 · 218 阅读 · 0 评论 -
js或jquery中必须做到的时刻不能忘记的一件事
1.作为新手,我在学习cavas的时候,出现了一个比较常见的新手会发生的问题;大家看下面代码 var mycanvas = document.getElementById("mycanvas"); var cxt = mycanvas.getContext("2d"); cxt.moveTo(10, 10); cxt.lineTo(...原创 2018-04-18 13:45:30 · 146 阅读 · 0 评论