Tiger の HTML&CSS
。。。。。。
StudiousTiger
这个作者很懒,什么都没留下…
展开
-
【vue】原创Vue组件 - Hunit (开发中...)
原创Vue组件库 - Hunit (持续更新中...)原创 2022-11-12 00:52:03 · 2768 阅读 · 0 评论 -
当你使用float后,sticky会失效,我们可以使用下面的方法实现sticky的效果
说明:演示原创 2022-01-27 20:51:10 · 326 阅读 · 0 评论 -
css中的 position: sticky 失效的原因(1)
最近在写东西的时候,我发现sticky失效的,找了老半天找到了原因。(1)我们知道float是使得div悬浮,悬浮之后元素的父元素在不设置height的情况下其height为0px。如下的情况就会使得sticky失效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=原创 2022-01-16 20:17:44 · 1728 阅读 · 0 评论 -
在dive上打孔(使div上有一个透明的区域)
通过background-image: radial-gradient(circle at 20px, transparent 8px,rgb(255, 255, 255) 0px);实现。circle at 20px: 确定孔的形状和位置transparent 8px: 确定孔的颜色和大小rgb(255, 255, 255) 0px: 确定其他区域的颜色<!DOCTYPE html><html lang="en"><head> <meta ch原创 2022-01-13 13:38:58 · 5605 阅读 · 3 评论 -
<base href=““/> 标签的使用
在javaWeb中我们难免会用到“请求转发”(不明白的伙伴可以来看看我之前发布)请求转发的一个特点是: url是不会变的那么我经常使用的绝对路径“…/”就会失效,因为“…/”是参照url中的地址的。那么怎么解决这个问题呢?这个时候base标签就出现了,当在htm中使用的base,那么该HTML中的“…/”就不会参照url中的地址,就会参照base中的href中的地址,这样就解决了上述的问题例如:<!DOCTYPE html><html lang="en">&l原创 2020-10-19 16:16:00 · 2686 阅读 · 0 评论 -
HTML中的 lable 标签的介绍和使用
label :是一个 作用域 标签我们一般用在单选按钮、复选按钮、按钮中,提高用户体验主要原因是,label中的区域都是可选了的下面我们就以 radio标签为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-10-13 21:36:10 · 1388 阅读 · 0 评论 -
在HTML中,怎么实现点击删除按钮时,实现确认和取消
我们通过a标签中的 onclick 属性来实现通过 location.href 来设置路径<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g原创 2020-10-13 10:49:31 · 3534 阅读 · 0 评论 -
怎么通过js获取到form中的action属性
通过document.getElementByTagName(“form”)获取到fom对象obj获取到form中的action属性:obj.form.action=“src”代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale原创 2020-09-25 19:04:40 · 2772 阅读 · 0 评论 -
怎么通过js获取到form的action属性
通过document.getElementByXxx(“xxx”)获取到对象obj获取到form中的action属性:obj.form.action="src"代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2020-09-20 23:25:00 · 1067 阅读 · 0 评论 -
33.2响应式布局-媒体查询——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 媒体原创 2020-08-12 12:18:51 · 144 阅读 · 0 评论 -
33.1.响应式布局——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 使用原创 2020-08-12 12:18:28 · 182 阅读 · 0 评论 -
32.完美视口——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!-- 我们可以通过meta标签调整视口的大小,以达到符合移动端的视口 下面的meta标签就是设置我们的 网页的视口 为 完美视口 <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2020-08-12 12:18:04 · 309 阅读 · 0 评论 -
31.4弹性元素的样式——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2020-08-12 12:17:45 · 186 阅读 · 0 评论 -
31.3弹性容器上的样式_副轴——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2020-08-23 09:19:39 · 75 阅读 · 0 评论 -
31.2弹性容器上的样式_主轴——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ mar原创 2020-08-11 17:00:21 · 94 阅读 · 1 评论 -
31.1flex_弹性盒(弹性容器,弹性元素)——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* flex (弹性盒,原创 2020-08-11 17:00:01 · 145 阅读 · 1 评论 -
29.变形_缩放——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-08-11 16:59:42 · 114 阅读 · 0 评论 -
28变形-旋转——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html{原创 2020-08-11 16:59:21 · 104 阅读 · 0 评论 -
27变形-Z轴平移——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html{原创 2020-07-07 19:02:27 · 412 阅读 · 0 评论 -
26平移-XY轴平移——html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 变形不会影响也变得布局 */原创 2020-07-07 19:01:54 · 789 阅读 · 0 评论 -
24动画-关键帧——html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-07 19:01:00 · 135 阅读 · 0 评论 -
24动画-动画——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 动画原创 2020-07-06 21:54:44 · 268 阅读 · 0 评论 -
23过渡——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-06 21:54:04 · 100 阅读 · 0 评论 -
22表单——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--原创 2020-07-06 21:53:30 · 68 阅读 · 0 评论 -
21表格的样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table{原创 2020-07-06 21:52:45 · 123 阅读 · 0 评论 -
20长表格——html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--原创 2020-07-06 21:52:15 · 283 阅读 · 0 评论 -
19表格——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!--原创 2020-07-06 21:51:39 · 121 阅读 · 0 评论 -
18镜像渐变——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-06 21:50:54 · 376 阅读 · 0 评论 -
17线性渐变——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-06 21:50:08 · 543 阅读 · 0 评论 -
16.2背景——HTML
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-06 21:48:54 · 97 阅读 · 0 评论 -
16.1背景——html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-06 21:48:03 · 91 阅读 · 0 评论 -
15.2下划线——html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box1{原创 2020-07-06 21:47:18 · 103 阅读 · 0 评论 -
15.1文本溢出标记——H5C3
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style>/*********** 设置文本溢出省略号*********************** */ .box2{ width: 400px; /*原创 2020-07-06 21:46:19 · 124 阅读 · 0 评论 -
14 文本的水平、垂直
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ w原创 2020-07-02 10:44:13 · 125 阅读 · 0 评论 -
12 行高
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div{ f原创 2020-07-02 00:14:45 · 137 阅读 · 0 评论 -
09 元素的层级
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box1,.box2,.box3{ width: 200px; height: 200px; } .box1{原创 2020-07-02 00:13:39 · 96 阅读 · 0 评论 -
08 绝对定位元素的位置
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .a1{ width: 300px; height: 300px; background-color: pink;原创 2020-07-02 00:12:23 · 101 阅读 · 0 评论 -
07 粘滞定位
<!DOCTYPE html><head> <meta charset="UTF-8"> <!-- 去除浏览器默认样式 --> <link rel="stylesheet" href="../reset_style/reset.css"> <title>20胡学好</title> <style> body{ height: 3000原创 2020-07-02 00:11:24 · 137 阅读 · 0 评论 -
06 position_定位
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* ****************************************************** */ /* 相对定位:position: relative;原创 2020-07-02 00:10:44 · 480 阅读 · 0 评论 -
05 clearfix_高度塌陷_外边距重叠
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 用于父元素的类 */ .clearfix::before, .clearfix::after{ content: '';原创 2020-07-02 00:09:50 · 77 阅读 · 0 评论