HTML+CSS 笔记+练习+案例
前端技术栈
看面试题 【web前端面试小助手】 小程序
展开
-
JSON对象转成formData对象,formData对象转成JSON对象
在小程序中体验在向后端请求时,如果上传的数据里存在file文件对象,需要用到表单提交,这时候我们需要将JSON对象,转成formData对象,具体见代码const formData = new FormData();Object.keys(params).forEach((key) => {formData.append(key, params[key]);});下面也有可能...原创 2019-11-04 10:27:47 · 2799 阅读 · 0 评论 -
CSS元素居中大全
新手在扫码小程序中体验效果Html5-CSS之五大居中方式你是不是也对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?恭喜你,搜到这篇博客! 这是鄙人在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有所帮助!下面的居中示例中,统一使用了同一个div作为父元素和p作为子元素设置一个div,并且设置了div的宽高...原创 2019-10-29 17:29:06 · 197 阅读 · 0 评论 -
最新 H5 HTML CSS记录 新手入门
新手扫码体验小程序点击链接后退页面:<a href="javascript:history.go(-1)">回到上一个网页</a>——修改placeholder提示的样式:1.除IE外通用写法 类名或标签名::placeholder {color: red;}2.加兼容前缀写法css超出一行显示省略号:给定宽度(width:100px)、超出隐藏(ov...原创 2019-10-29 17:21:40 · 5414 阅读 · 0 评论 -
ul li 的属性值 去掉li的圆点
list-style-type:disc(实心圆) | circle(空心圆)| square(实心方块)|none(没有)用图片作为列表符号list-style-image: url(../images/arror.jpg)改变列表符号的位置:list-style-position: outside(外边) | inside(里面)/* list-style...原创 2018-12-10 18:33:17 · 6709 阅读 · 0 评论 -
ios手机上为input[type="date"]设置样式兼容问题 已解决
在移动网页上需要有一个时间控件,我用了HTML5的input[type=“date”],这个控件在按Android和ios上的实现都是可以的,但是样式有点丑,特别是ios上,于是我加了一段css:input{ background:none; outline:none; appearance:none; -moz-appearance:none; -web...原创 2019-10-21 10:48:34 · 3277 阅读 · 0 评论 -
首行缩进
/*em 是一个单位,根据父元素的font-size的值来确定em的值的大小例如:font-size:20px; 1em = 20px;2em = 40px;//首行缩进:text-indent:1)text-indent可以取负值,可实现隐藏文本,悬挂缩进。2)text-indent属性只对第一行起作用. */ text-indent:2em; ...原创 2018-12-10 18:28:23 · 2902 阅读 · 0 评论 -
文本单行省略号+多行出现省略号
第一种仅支持单行省略:width:value;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;第二种支持多行省略:width:value;overflow : hidden;text-overflow: ellipsis;/* display:box主要是控制父容器里面子元素的排列方式 /display:...原创 2018-12-13 15:31:53 · 331 阅读 · 0 评论 -
// 获取当前时间上一个月
// 获取当前时间上一个月window.getPreMonth = function (date) { var arr = date.split('-'); var year = arr[0]; //获取当前日期的年份 var month = arr[1]; //获取当前日期的月份 var day = arr[2]; //获取当前日期的日 var days...原创 2019-05-27 16:06:25 · 1631 阅读 · 0 评论 -
js时间转化为几天前,几小时前,几分钟前
在前面一篇文章中,我们学习到了如何获取时间和怎么算出两者之间的时间差今天看看怎么将时间戳转换为几个月前,几周前,几天前,几分钟前的形式。与上面类似通过JavaScript计算当前时间与定义的时间的对比,匹配不同时间段的值。function getDateDiff(dateTimeStamp){ var minute = 1000 * 60; var hour = minut...转载 2019-06-19 08:56:28 · 720 阅读 · 0 评论 -
06 - table表格标签+ 行合并+列合并
1、table 表格标签属性cellspacing=“0” 表格边框合并;表格:table行:tr列:td属性:border:边框width:宽height:高bordercolor:变宽颜色cellspacing:单元格与单元格之间的距离cellpadding:单元格与内容之间的距离align:水平的对齐方式,left|center|right<tablebo...原创 2019-10-11 11:09:24 · 2232 阅读 · 0 评论 -
文本修饰添加下滑线+回顾
/*1、 文本修饰text-decoration:underline(下划线)|overline(上划线)|line-through(删除线)|none(没有)*/text-decoration: line-through;2、回顾1、字体相关属性大小:font-size: 数值 + 单位字体颜色:color:颜色的英文单词 | #十六进制 | rgb(red,green,blu...原创 2018-12-10 18:26:51 · 516 阅读 · 0 评论 -
垂直文本对齐方式1
span{ font-size: 50px; /* 垂直的对齐方式(只对行内元素有作用) vertical-align:middle(居中)|top(顶部)|bottom(底部)|baseline(基线对齐,默认值) */ vertical-align: bott...原创 2018-12-10 18:13:49 · 1942 阅读 · 0 评论 -
字体相关属性+颜色取值
1、字体的大小font-size:数值+ 单位(px),默认值为16px2、字体的颜色color: red;3、字体是否加粗font-weight:bold(加粗)|normal(正常)|数值(100-900,100-500正常,600-900加粗)4、字体倾斜font-style:italic(倾斜)|normal(正常)5、字体的样式font-family:*当字体是中文字...原创 2018-12-10 18:12:02 · 1256 阅读 · 2 评论 -
02-标签语法
<标签名 属性1="属性1值 属性值12" 属性2="属性2值"></标签名> 标签与属性之间用空格隔开,属性与属性之间也用空格隔开, 属性与属性值之间用=号隔开,属性值一定要放在引号内 属性值与属性值之间也是用空格隔开 1)写在尖角号<>里的第一个单词,叫做标记,也叫做标签,也称作元素; 2...原创 2018-12-04 13:46:33 · 301 阅读 · 0 评论 -
03-标题标签
&amp;amp;lt;title&amp;amp;gt;Document&amp;amp;lt;/title&amp;amp;gt; 我是h1 我是h2 我是h3 我是h4 我是h5 我是h6原创 2018-12-04 13:47:33 · 181 阅读 · 0 评论 -
04 - 字体标记+段落标签+有序列表+无序列表+自定义列表
1、字体的标记&amp;amp;lt;i&amp;amp;gt;我是i标签&amp;amp;lt;/i&amp;amp;gt;&amp;amp;lt;em&amp;amp;gt;我是em标签&amp;amp;lt;/em&amp;amp;gt;&amp;amp;lt;!-- br换行 --&amp;amp;gt;&amp;a原创 2018-12-05 08:52:56 · 828 阅读 · 0 评论 -
05 - 超链接 a 标签+ 图片标签img
1 、A标签<!--超链接:a属性:href:连接地址target:_blank:在新的窗口打开连接_self:在本身原来的窗口打开连接(默认值)title属性,加入这个属性后,当鼠标移动到热点时,则在鼠标下方显示title的内容;--><a href="06.列表.html" target="_self" title="点我去百度"...原创 2018-12-05 09:00:32 · 2009 阅读 · 0 评论 -
06 - table表格标签+ 行合并+列合并
1、table 表格标签属性在小程序中查看cellspacing="0" 表格边框合并;表格:table 行:tr 列:td属性: border:边框 width:宽 height:高 bordercolor:变宽颜色 cellspacing:单元格与单元格之间的距离 ...原创 2018-12-05 09:07:14 · 16626 阅读 · 3 评论 -
06-1- 行和列合并的练习
姓名 爱好 老谢 养生 大保健 老姚 吹牛逼 ...原创 2018-12-05 09:55:29 · 344 阅读 · 0 评论 -
form表单 +input的属性值+textarea文本域+select下拉菜单
<form action="" name="denglu" method="POST"> <!-- 表单的控件input 属性:type 类型 取值: (1)text 文本输入框 (2)password 密码输入框 (3)radio 单选框 如果有...原创 2018-12-10 17:54:32 · 2829 阅读 · 0 评论 -
三种引入css的方法
1 ,@import url("…/css/index.css");/*说明:@和import之间没有空格 url和小括号之间也没有空格;括号内部加引号,必须结尾以分号结束;必须放在style标签的最开始/2. / 选择符{属性:属性值;} */div{width: 200px;height: 200px;border: 1px solid red;}3 。 r......原创 2018-12-10 17:59:12 · 345 阅读 · 0 评论 -
css样式的优先级+ 伪类选择器:hover+选择器
1、样式表的优先级:内联样式 》 内部样式内联样式 》 外部样式外部样式 和内部样式,谁写在后面,谁的优先级比较高2、伪类选择器;a:link {color: red;} /* 未访问的链接状态 /a:visited {color: green;} / 已访问的链接状态 /a:hover {color: blue;} ...原创 2018-12-10 18:05:50 · 908 阅读 · 0 评论 -
01-HTML基本结构
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><body><!--sh原创 2018-12-04 13:37:05 · 226 阅读 · 0 评论