HTML
前端学习
钱端攻城狮
BUG提取器
展开
-
前端HTML中box-reflect倒影的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>倒影</title> <style type="text/css"> /*倒影只是一个影像 不占据空间*/ /*1.倒影的位置 left 在实物的左侧 right 在右侧 above 在标签上方 below 在标签下方 2.距离实物的距离 单位px*/原创 2022-03-04 17:57:10 · 271 阅读 · 1 评论 -
前端HTML多列布局columns的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ width: 1100px; border: dashed 3px red; margin: 30px原创 2022-03-04 17:55:37 · 1796 阅读 · 0 评论 -
前端HTML弹性布局display: flex的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>弹性布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 1100px; margin: 30px auto; border: sol原创 2022-03-04 17:51:16 · 309 阅读 · 0 评论 -
前端HTML移动端适配
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <!--移动端适配--> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title>原创 2022-03-03 19:49:06 · 715 阅读 · 0 评论 -
前端HTML中vm和vh单位的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="t原创 2022-03-03 19:45:30 · 2411 阅读 · 0 评论 -
前端HTMLrem单位的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type=原创 2022-03-03 19:42:54 · 255 阅读 · 0 评论 -
前端HTM中3D动画transform-style的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .root{ width: 600px; height: 600px; background-color: pink; margin: 30px auto; /*开启3D效果 在原创 2022-03-02 21:10:15 · 205 阅读 · 0 评论 -
前端HTML transform2D变换
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .one{ width: 300px; height: 300px; background-color: pink原创 2022-03-01 21:21:13 · 155 阅读 · 0 评论 -
前端HTML第三方动画 呃css的引用 掌握名的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 300px; background-color: pink; } </style> <link rel="sty原创 2022-03-01 21:18:41 · 77 阅读 · 0 评论 -
前端HTML transition过渡动画的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ margin: 50px auto; width: 300px; height: 300px; background-color: pink; /*设置动画属性*/原创 2022-03-01 21:14:27 · 795 阅读 · 0 评论 -
前端HTML animation关键帧动画的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .one{ margin: 0 auto; border-radius: 50%; width: 300px; height: 300px; background-color:原创 2022-03-01 21:06:44 · 753 阅读 · 0 评论 -
前端HTML渐变色的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>渐变</title> <style type="text/css"> #one{ width: 300px; height: 200px; /*写法1*/ /*background: -webkit-linear-gradient(pink,gree原创 2022-02-28 21:03:47 · 1765 阅读 · 0 评论 -
前端HTML背景蒙板
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 600px; height: 600px; background: url(img/1.png); border: 3px solid gold; /*背景蒙原创 2022-02-28 21:02:42 · 760 阅读 · 0 评论 -
前端HTML关于背景图片的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- HTML5新特性 1.新增了新标签 2.支持本地存储 3.新增了音频视频标签 4.新增了canvas画图标签 HTML5的新特性目前只有在标准浏览器下支持 -->原创 2022-02-28 21:01:48 · 1239 阅读 · 0 评论 -
前端HTML新特性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- HTML5新特性 1.新增了新标签 2.支持本地存储 3.新增了音频视频标签 4.新增了canvas画图标签 HTML5的新特性目前只有在标准浏览器下支持 -->原创 2022-02-28 21:00:12 · 87 阅读 · 0 评论 -
前端用媒体查询写一个响应式布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width: 94%; border: 2px solid blue; margin: 20px au原创 2022-02-25 21:16:36 · 173 阅读 · 0 评论 -
前端HTML中的媒体查询
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ width: 300px; height: 300px; background-color: pink; } /*监听的是浏览器窗口的大小 最小能监听到的范围*/原创 2022-02-25 21:13:55 · 961 阅读 · 0 评论 -
前端HTML中的怪异盒模型
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width:300px; height: 300px; padding: 20px; border: 5px solid red; margin: 20px;原创 2022-02-25 21:10:04 · 262 阅读 · 0 评论 -
前端HTML弹窗的实现
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #i1{ width: 180px; height: 30px; padding-left: 10px; /*去掉默认带的外线框*/ outline: none; /*重新设原创 2022-02-24 19:55:00 · 2646 阅读 · 0 评论 -
前端HTML流式布局的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>流式布局</title> <style type="text/css"> *{ margin: 0; padding: 0; } html, body{ width: 100%; height: 100%; } .root{原创 2022-02-24 19:53:19 · 896 阅读 · 0 评论 -
前端HTML伪元素的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*伪元素 通过css方式给标签的首或者尾添加一个标签*/ .one:after{ /*必写属性 默认是行元素属性*/ content: "哈哈"; /*正常标签css样式设置!!!*/原创 2022-02-24 19:51:31 · 510 阅读 · 0 评论 -
前端HTML输入框的CSS设置
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #i1{ width: 180px; height: 30px; padding-left: 10px; /*去掉默认带的外线框*/ outline: none; /*重新设原创 2022-02-24 19:50:10 · 589 阅读 · 0 评论 -
前端HTML中的form表单
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!--<a href="http://www.baidu.com/s?wd=黄景瑜">百度一下</a>--> <!-- form的属性解释: action 设置要提原创 2022-02-24 19:48:30 · 86 阅读 · 0 评论 -
前端HTML中关于行元素左右缝隙问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ background-color: black; font-size: 0; } span{ background-color: blue; font-size: 16原创 2022-02-23 19:35:15 · 392 阅读 · 0 评论 -
前端HTML中定位后的居中问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .root{ width: 600px; height: 600px; background-color: blue; margin: 0 auto; position: relat原创 2022-02-23 19:32:22 · 90 阅读 · 0 评论 -
前端HTML中如何做出一个三角形
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 0; height: 0; border: 200px solid transparent; /*border-left-color: gold;*/ /*b原创 2022-02-23 19:26:17 · 196 阅读 · 0 评论 -
前端HTML中定位的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> body{ height: 2000px; } *{ padding: 0; margin: 0; } #d1{ width: 200px; height原创 2022-02-22 21:52:18 · 382 阅读 · 0 评论 -
前端HTML中display属性的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div,span{ background-color: pink; border: 1px solid red; } div{ width: 100px; height: 100原创 2022-02-21 21:55:27 · 776 阅读 · 0 评论 -
前端HTML中nth-child和nth-of-type的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> li:nth-child(1){ background-color: red; } li:nth-child(2){ background-color: red; } /*不区分原创 2022-02-21 21:52:14 · 667 阅读 · 0 评论 -
前端HTML中盒子的显隐性
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ width: 600px; height: 600px; background-color: pink; /*真正控制显性和隐性的属性*/ /*hidden隐藏 vis原创 2022-02-21 21:53:31 · 748 阅读 · 0 评论 -
前端HTML中浮动及其相关问题
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <link rel="stylesheet" type="text/css" href="css/浮动.css"/> <body> <!--浮动时平铺,盖不住字--> <!--clear解决兄弟造成的影响,o原创 2022-02-18 20:06:10 · 156 阅读 · 0 评论 -
前端HTML中的居中问题以及table表格的使用
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #one{ /*让自身位置居中*/ margin: 90px auto; /*让内部文本居中也包括行元素标签*/ text-align: center; background-col原创 2022-02-17 20:15:35 · 952 阅读 · 0 评论 -
前端HTML中盒模型margin的两个注意事项
注意margin在块和行中的区别<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #one{ background:pink ; width: 300px; he原创 2022-02-17 20:05:36 · 318 阅读 · 0 评论 -
前端HTML盒模型
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>盒模型</title> <style type="text/css"> /*---*号是通配符,匹配所有标签 可用来初始化操作 ------*/ *{ /*外边距和内填充归零*/ margin: 0; padding: 0; }原创 2022-02-17 19:37:03 · 207 阅读 · 0 评论 -
前端HTML中的hover选择器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .one{ background-color: tomato; width: 300px; height: 300px; line-height:300px; } /*:hove原创 2022-02-16 20:55:45 · 674 阅读 · 0 评论 -
前端几个特殊CSS样式以及常见CSS样式补充
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #one{ background-color: pink; color: red; } /*a标签的字体颜色,必须直接修改a标签的属性*/ #one a{ /*去下划线*/原创 2022-02-16 20:38:45 · 157 阅读 · 0 评论 -
前端CSS选择器
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>CSS选择器</title> <style type="text/css"> /*1.id选择器 唯一不可重复 搭配#使用*/ #div1{ background-color: #4169E1; } /*2.class类选择器 选中多个标签,搭配符号.使用*/原创 2022-02-16 20:00:19 · 113 阅读 · 0 评论 -
前端CSS的引用方式以及的CSS样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <!--2.内部引用css 不适合项目开发,练习时可用--> <style type="text/css"> /*css编码区域*/ div{ background-color: royalblue; height: 300px;原创 2022-02-15 19:33:15 · 233 阅读 · 0 评论 -
前端HTML标签语法以及标签的嵌套规则
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--标签*n 生成n个标签 标签1+标签2 生成两个为兄弟关系的标签 标签1>标签2 生成两个为父子关系的标签 标签{文本} {是设置文本} 父标签>子标签* 父标签中多个子标签原创 2022-02-15 19:25:45 · 387 阅读 · 0 评论 -
前端HTML网页文档模板介绍以及常用标签
前端学习原创 2022-02-14 19:13:29 · 1567 阅读 · 0 评论