随笔分类 - HTML+CSS
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：nth-child(n) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
阅读全文
摘要：第一种： <hr style=" height:2px;border:none;border-top:2px dotted #185598;" /> 园点虚线 height:2px;是hr的高度 border:none;是没有边框 border-top:2px dotted #185598;是设置横
阅读全文
摘要：<div style="display: flex;flex-direction: row;align-content: center;margin-top: 20px;"> <!-- <p style="flex: 2">设置科目类型时长</p>--> <!-- <span style="flex
阅读全文
摘要：字体图标--在阿里图库中下载svg格式的 https://icomoon.io/ 将svg格式的图片转换为css的字体网站 1.点击icomoonAPP 2.点击importlicons导入下载好的图片 3.选中图片 4.点击下方GenerateFont 5.下载Download 6.解压下载好的
阅读全文
摘要：###奇偶隔行变色--表格 index.js import $ form 'jquery' $(function() { $('li:odd').css('backgroundColor', 'pink') $('li:even').css('backgroundColor', 'lightblue
阅读全文
摘要：单人课程统计 全部(队员:{{ people }}) {{ item.course_name }}-{{ item.course_ti...
阅读全文
摘要：overflow: hidden 该元素的内容若超出了给定的宽度和高度属性，那么超出的部分将会被隐藏，不占位。 white-space: nowrap 规定段落中的文本不进行换行 text-overflow: ellipsis 显示省略符号来代表被修剪的文本。
阅读全文
摘要：getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 var box=document.getElementById('box'); // 获取元素 alert(box.getBo
阅读全文
摘要：// 设置父盒子为弹性盒模型 display: flex; // 默认flex 布局的盒子，内部的子元素不会换行，可以使用下面的属性使其换行 flex-wrap: wrap; // 设置父盒子为弹性盒模型 display: flex; // 默认flex 布局的盒子，内部的子元素不会换行，可以使用下
阅读全文
摘要：安装 需查看官网-- cnpm i vue-preview -s 获取后台接口 必须设置宽和高 ## 实现缩略图的效果 \1. 先加载所有的图片并显示到页面上； \2. 使用vue-preview插件来实现缩略图效果； \3. 如何使用缩略图组件呢： + 运行cnpm i vue-preview -
阅读全文
摘要：//1.1导入Mint-UI中 图片懒加载组件 import { Lazyload } from 'mint-ui'; Vue.use(Lazyload); //1.1导入Mint-UI中 图片懒加载组件 import { Lazyload } from 'mint-ui'; Vue.use(Laz
阅读全文
摘要：.mui-ellipsis{ display: flex; justify-content: space-between; } ## 绘制新闻资讯页面的效果 + 使用mui中的media-list.html + 使用 `display: flex;`实现了弹性盒模型布局，从而让 元素左右贴边；`ju
阅读全文
摘要：寻找元素通过id找到html元素var nv=document.getElementById("id名").innerHTML="改变内容";通过标签名找到html元素document.getElementByTagName("标签名")//相同元素中的第一个 通过DOM对象改变CSS语法：docu
阅读全文
摘要：垂直导航栏效果ul{list-style-type:none;margin:0px;padding:0px;}a:link,a:visited{text-decoration:none;display:block; 水平导航，删掉block li{display:inline}background-
阅读全文
摘要：css列表list-style --简写列表项list-style-image--列表项图像（url("");）list-style-position--列表标志位置list-style-type --列表类型--（空心圆，数字，黑点） css表格table#tb,tr,th,td{边框border
阅读全文
摘要：多个标签引用一个样式--h1,h2,h3--用逗号派生-一个标签下的子标签-li strong{}--用空格都是遵循-指定的不会被覆盖-未指定的会被引用（权重优先级） id选择器-用#定义类选择器-用一个点显示-class也可用作派生 属性选择器-对带有指定属性的html元素设置样式(不常用)<st
阅读全文
摘要：H5新增的主体结构元素article元素-代表文档，独立出来的内容-可以嵌套-表示插件nav 元素-可作为页面的导航的连接组 应用场景--传统导航条-侧边栏导航-页内导航-翻页操作aside元素-用来表示当前页面或文章的附属信息部分，可以包含相关内容的引用，侧边栏，广告，导航条 --time元素和微
阅读全文
摘要：html链接1.链接数据：--文本链接--<a href="链接地址">点击</a>--图片链接 <a href="链接地址"><img src="图片的路径"></a>2.属性：href--指向另一个文档的链接 --name--创建文档内的链接--用途：在一个页面下，页面过大，可用于点击跳转到顶部
阅读全文
