【HTML5】
关注
分享
扫一扫
主要记录一些html的技巧功能
月疯
得到你最想要的东西，最保险的办法，那就是你能配得上你最想要的东西。机会是留给有准备的人，运气是留给有天赋的努力者。
展开
-
Web前端VM结合rem布局及插件flexible使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"> <script src="./node_modules/amfe-flexible/index.js"><.原创 2021-08-13 00:09:32 · 1117 阅读 · 0 评论 -
html5移动端开发(rem和媒体查询@media)
css下：index.css@charset "utf-8";body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select,figcaption,figure{margin: 0;padding: 0;}/* 添加怪异盒，margin和padding就不用减 */*{box-sizing: border-box;}body{font-family: "微软雅黑";}body..原创 2021-08-12 20:44:05 · 269 阅读 · 0 评论 -
web开发移动端准备工作
<!--移动端准备工作：1、<meta name="viewport" content="width-device-width,initial-sacle=1.0,maximum-scale=1.0,user-scalable=no">2、单位：px、pt、em、% em相对大小（相对父元素font-size的值） rem单位：默认情况下 1rem==16px； 原理：rem的值是根据元素html的font-size发...原创 2021-08-12 15:33:52 · 356 阅读 · 0 评论 -
CSS文本溢出的处理方法总结
1、容器宽度：width：value2、强制文本在一行内显示：white-space：nowrap；3、溢出内容为隐藏：overflow：hidden；4、溢出省略号：text-overflow：ellipsis；1、溢出属性说明：overflow：visible/hidden(隐藏)/scroll/auto(自动)/inherit;visible:默认值，内容不会被修剪，会呈现在元素框之外；hidden：内容会被修剪，并且其余内容是不可见的；scroll：内容会被修剪，但是浏览.原创 2021-08-11 20:37:03 · 7739 阅读 · 0 评论 -
css高度自适应以及高度塌陷总结
高度塌陷：场景：子元素有浮动，父元素没有设置高度或者设置最小高度，父元素会出现高度塌陷高度塌陷的解决方法：1、给高度塌陷的元素设置：overflow：hidden（原理：因为overflow：hidden触发了一个BFC，块格式上下文，有一个布局规则，计算BFC高度的时候，里面的浮动元素也参与计算的）。弊端：会隐藏掉定位在当前元素外面的内容。2、给出现高度塌陷的元素里面，放在浮动元素的后面，添加空的div，并且给div{clear：both}原理：忽略上面的浮动元素预留出来的空间弊.原创 2021-08-11 20:27:12 · 848 阅读 · 0 评论 -
Flash和margue字幕滚动效果
Flash具体用法：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } </style> </head> <body> <obj原创 2021-08-11 12:42:49 · 253 阅读 · 0 评论 -
CSS定位和浮动（吸顶、居中）
理论知识：场景一：1、把要移动的元素拿来2、放到哪个容器里面（参照物）3、放到当前容器的具体位置（坐标）场景二：1、自身要脱离当前位置2、坐在教室（参考物）3、东南角（第几排）（坐标）包含块（绝对定位的参考物）的设置方式：给要做绝对定位的父元素（参考物），添加position：relative让其形成参考物定位属性：position 设置或者检索元素的定位方式 属性值： 1、position：static（静态定位，默认值）...原创 2021-08-11 12:14:15 · 1369 阅读 · 0 评论 -
伪元素选择符
::first-line 伪元素用于向文本的首行添加特殊样式。<style>p::first-line { color: #ff0000; font-variant: small-caps;}</style>::first-letter 伪元素用于向文本的首字母添加特殊样式。（伪元素只适用于块级元素）<style>p::first-letter { color: #ff0000; font-size: x...原创 2021-08-10 21:13:55 · 474 阅读 · 0 评论 -
Css伪类选择符
1、属性选择符<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img[title="mao"]{ width: 100px; height: 100px; } img[alt="gou"]{ width: 100px;原创 2021-08-10 19:19:20 · 506 阅读 · 0 评论 -
css动画逐帧播放、缩放
百度直接搜索：animation.css库，专门是写好的css动画库<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animation.css"/> <style type="text/css"&g.原创 2021-08-10 16:30:19 · 269 阅读 · 0 评论 -
制作旋转相册css
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } body,html{ height: 100%; } body{ background: url(img...原创 2021-08-09 21:06:48 · 214 阅读 · 0 评论 -
css的animation动画
小例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 600px; height: 500px; ...原创 2021-08-09 20:36:27 · 179 阅读 · 0 评论 -
Css33D背面不可见
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 500px; height: 500px; background: #ccc...原创 2021-08-09 12:43:21 · 451 阅读 · 0 评论 -
Css33D旋转正方体实现（二）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 400px; height: 400px; background-size:...原创 2021-08-09 12:41:40 · 185 阅读 · 0 评论 -
Css33D旋转正方体实现（一）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 400px; height: 400px; background: url(...原创 2021-08-09 12:36:40 · 221 阅读 · 0 评论 -
CSS3 3D位移和旋转
transform-style：preserve-3d 设定父元素为一个3d空间小例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0;...原创 2021-08-09 11:18:29 · 195 阅读 · 0 评论 -
CSS3动画相册制作
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } html,body{ height: 100%; background: pink; } section...原创 2021-08-08 16:34:22 · 257 阅读 · 0 评论 -
Css3线条的缩放
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 500px; height: 300px; background...原创 2021-08-08 15:55:17 · 286 阅读 · 0 评论 -
Css3控制变形原点
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 500px; height: 300px; background: r...原创 2021-08-08 15:40:13 · 328 阅读 · 0 评论 -
Css3旋转、位移、缩放、倾斜动画
rotate：旋转skew：倾斜sacle：缩放translate：位移<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ wid...原创 2021-08-08 14:52:43 · 514 阅读 · 0 评论 -
CSS3过渡动画
第一个例子：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 100px; height: 40px; mar...原创 2021-08-08 02:55:53 · 248 阅读 · 0 评论 -
css3的渐变总结
1、线性渐变：效果：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } section{ width: 500px; height: 300px;..原创 2021-08-07 14:45:08 · 211 阅读 · 0 评论 -
媒体查询介绍
媒体查询：去检测设备的特性（手机端编程使用）媒体查询可以让我们获取根据设备显示器的特性（如视口的宽度、屏幕的比例、设备的方向：横向或者纵向）为其设定css样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测媒体的特性有width、height和color（等）。使用媒体查询，可以在不改变页面的情况下，为特定的一些输出设备指定显示效果。媒体查询操作方式实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的css被应用，如果表达式为假，.原创 2021-08-06 19:02:25 · 903 阅读 · 0 评论 -
Css3 Column实现瀑布流
基础知识总结：CSS3多列column rule1、column-count说明：属性规定元素应该被分隔的列数适用于：除table外的非替换块级元素，table，cells,inline-block元素2、column-gap说明：属性规定列之间的间隔大小3、column-rule说明：设置或检索对象的列与列之间的边框。复合属性。column-rule-color规定列之间规则的颜色。column-rule-style规定列之间的样式。column-rule..原创 2021-08-06 15:53:53 · 612 阅读 · 0 评论 -
盒子模型（悬挂式布局）
早期的图文混排，直接浮动<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ width: 100px; height: 100px; float:原创 2021-08-06 14:33:08 · 180 阅读 · 0 评论 -
Html5新增表单属性
新增输入类型：Type=“email” 限制用户输入email类型Type=“url” 限制用户必须输入url类型Type=“range”产生一个滑动条表单Type=“number”Type=“search”产生一个搜索意义的表单Type=“color” 生成一个颜色选择表单Type=“time”限制用户必须输入时间类型Type=“month” 限制用户必须输入月类型Type=“week”限制用户必须输入周类型Type=“datetime-local”选取本地时间Type=“d...原创 2021-08-06 01:06:41 · 3517 阅读 · 0 评论 -
Video和Audio标签的使用
Video和audio的应用video元素 定义视频<video src="movie.ogg" cotrols="cotrols">Video元素</video>audio元素 定义音频<audio src="someaduio.wav">Audio元素</audio>属性介绍：cotrols属性：如果出现该属性，则向用户显示控件，比如播放按钮autoplay属性：如果出现该属性，则视频在就绪后就马上播放。loop属性：重复播放...原创 2021-08-06 00:11:59 · 2284 阅读 · 0 评论 -
table表格高级用法（二）
表格及表单：语法：<th></th><caption></caption>th标记表格内表头单元格，是单元格标题caption标记表示鸟哥的名称，也叫表格标题caption-side：top/right/bottom/left定义表格的caption对象放于表格二的哪个位置，与caption对象一起作用。top为默认left、right位置只有火狐识别top、bottom IE6以上版本支持，IE6一下版本只识别top隔行...原创 2021-08-05 21:52:10 · 1519 阅读 · 0 评论 -
table表格高级用法（一）
一、细线表格border-collapse: collapse;相邻单元格边框合并<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>细线表格</title> <style type="text/css"> *{ margin: 0; padding: 0; } table{ wi..原创 2021-08-05 21:11:49 · 748 阅读 · 0 评论 -
Html5新标签
Html5 新增语义结构标签section元素 表示页面中的一个区块article元素：表示一块与上下文无关的独立内容aside元素 在article之外的，与article内容相关的辅助信息header元素 表示页面中一个内容区块或整个页面的标题footer元素 表示页面中一个内容区块或整个页面的脚注nav元素 表示页面中导航链接部分figure元素 表示一段独立的内容，使用figcaption元素为其添加标题（第一个或最后一个子元素的位置）main元素 表示页面中...原创 2021-08-05 00:49:39 · 137 阅读 · 0 评论 -
响应式布局介绍
1、模块中内容：挤压（拉）布局不变2、模块中内容：换行铺平3、模块内容：删减（增加）4、模块位置变换（布局改变）5、模块展示方式改变：隐藏（展开）（布局改变）6、模块数量改变：删减（增加）（布局改变）实现小例子：代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title&g...原创 2021-08-04 12:26:16 · 231 阅读 · 0 评论 -
鼠标划过图片进行缩放效果
例码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #box{ width: 800px; height: 500px; background: #...原创 2021-08-03 19:38:30 · 249 阅读 · 0 评论 -
企业网站集成（一）
css代码：@charset "utf-8";/*重置样式 css reset*/*{ margin: 0; padding: 0;}ul,ol,li{ list-style: none;}b,strong{ font-weight: normal;}i,em{ font-style: normal;}a,u{ text-decoration: none;}h1,h2,h3,h4,h5,h6{ font-size: 16px; font-weight: no..原创 2021-07-30 18:44:19 · 220 阅读 · 0 评论 -
制作一个登录页面
代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ font-family: Roboto; background-color: #e76f51; display: flex; justify-content: c..原创 2021-07-30 01:14:22 · 344 阅读 · 0 评论 -
制作不同方向的三角形（border属性）
border属性详解：border：10px solid red；border-width:10px;border-style:solid;border-color:red;1、线性：solid（实线）dashed（虚线） dotted（点状线）doubble（双线）none/0（没有边框）2、单一一个方向添加边框：border-right： 10px solid red；border-left/right/top/bottom3、边框设置方法：border：solid-re.原创 2021-07-29 19:40:23 · 416 阅读 · 0 评论 -
文本属性总结
字体属性：加粗{font-weight:bolder/bold/normal/100-900;}(更粗的、加粗、常规)字体倾斜{font-style:italic/oblique/normal;}文本是否大小写{font-vaiant：normal（正常字体）small-caps（小型的大写字母体）}text-align：{left/right/center/justify}(justify对内容以俩段边界线对齐显示，俩端对齐经常不起作用)line-height：{normal/数值}当单行文本的行高等原创 2021-07-29 19:10:29 · 282 阅读 · 0 评论 -
富文本编辑器quill的集成
中文地址：https://www.kancloud.cn/liuwave/quill/1409366只要模块：<!-- Quill主要库 --><script src="//cdn.quilljs.com/1.3.4/quill.js"></script><script src="//cdn.quilljs.com/1.3.4/quill.min.js"></script><!-- 主题样式 --><li原创 2021-07-29 10:14:20 · 509 阅读 · 0 评论 -
shadow阴影属性
前缀 实例 说明 -ms- -ma-box-shadow Ie浏览器专属CSS属性添加-ms- -moz- -moz-box-shadow 所有基于Gecko引擎（Firfox）专属css属性添加-moz- -o- -o-box-shadow Opera浏览器专属CSS需要添加属性-o- -webkit- -webkit-shadow 所有基于webkit引擎的浏览器（Chrome、Safri）专属的css需要添加-webkit-原创 2021-07-29 01:30:22 · 3755 阅读 · 0 评论 -
背景图的属性（backgroud）
backgroud：red url（../img/tupian.png）1、backgroud-origin（背景图的起始点）属性值： padding-box默认值 border-box content-box2、backgroud-clip（裁剪）属性值： padding-box bordering-box默认值 content-box3、backgroud-size：控制...原创 2021-07-29 00:54:00 · 2060 阅读 · 0 评论 -
弹性盒子练习（骰子）
直接上代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; h..原创 2021-07-29 00:21:35 · 482 阅读 · 0 评论