前端
关注
分享
扫一扫
文章平均质量分 85
甜心小宇yu丶
喜欢解决问题和研究技术
展开
-
web端 小米商城网站总结
一 小米商城页面的分析目前市面上主流的布局为float布局 , 本人通过flex布局实现了一遍其中轮播图使用了swiper插件 图标使用了iconfont 尽可能的不使用定位此为自我规划的结构分析 , 如图所示二 小米商城搭建的细节1 清楚整个页面的整体布局，先整体再局部，先把整体内容规划好，再自上而下的布置每一块内容。2 明确每个模块要实现怎样的效果，并且自外而内的设置好每个标签的样式。3 不清楚某个样式怎么设置，可以去浏览器控制台中做相应的调整，调整合适后将样式写到文件中。4 flex原创 2021-06-04 15:20:44 · 6480 阅读 · 3 评论 -
CSS grid布局(网格布局)总结
一、grid布局概念grid布局与flex布局对比flex布局为一维布局，一般一行或一列的布局使用flex布局。grid布局为二维布局，同时需要兼顾行与列的布局，可以使用gird布局。grid布局基本概念rowcolumncellgrid line二、grid容器设置容器为grid容器.container{ display:grid;}注 : gird容器内部的元素称为grid容器的项目，grid项目的float属性会失效<style> body{原创 2021-03-31 16:25:49 · 298 阅读 · 0 评论 -
CSS 弹性布局(flex)总结
一、弹性布局概念布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性对于特殊布局非常不方便，比如，垂直居中注：常用的全屏居中的CSSbody {height: 100vh;text-align: center;line-height: 100vh;}Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。.box{ display: flex;}行内翻译 2021-03-26 15:43:26 · 251 阅读 · 0 评论 -
JS 浅拷贝和深拷贝
深拷贝与浅拷贝区别？假设B复制了A，当修改A时，看B是否会发生变化 ?如果B也跟着变了，说明是浅拷贝 (就是B复制了A，如果B复制的是A的引用，那就是浅拷贝)如果B没变，那就是深拷贝 (如果B复制的是A的本体，那就是深拷贝)堆栈和数据类型数据类型分为两种，基本类型和引用类型。基本类型指的是简单的数据段，而引用类型指的是那些可能由多个值构成的对象。基本类型引用类型类型number,string,boolean,null,undefinedobject(对象，数组，函转载 2020-06-28 14:26:17 · 144 阅读 · 0 评论 -
JS 一个数组过滤另一个数组
let ids = [1,2,3,2];let arr = [1,2,3,4];let newArray = []; arr.forEach(item => { if (!ids.includes(item)) { //此处如果需要留下重复元素 newArray.push(item); }; })console.log(newArray);原创 2020-06-12 17:40:54 · 6720 阅读 · 0 评论 -
JS 交换数组内的元素
第一种方式 :function changeLoc(array,from,to){if((from > array.length-1 || from < 0) || (to > array.length-1 || to < 0)){ console.error("指定位置错误"); return;}[array[from],array[to]] = [array[to],array[from]]return array}arr = [1,2,3,4](4) [1原创 2020-06-10 17:46:37 · 708 阅读 · 0 评论 -
JS form表单的加密注意事项
表单密码加密(基础)注 :1.md5加密工具类需要引用2.如果表单里没有写name,在调试中则看不到3.最后可以校验判断表单内容，true就是通过提交，false就是阻止提交<!DOCTYPE html><html lang = "en"> <head> <meta charset = "UTF-8"> <title>Title</title> <!--MD5加密原创 2020-06-01 17:58:05 · 1001 阅读 · 0 评论 -
CSS display:inline-block的边距问题及解决方法
将一个元素的display设置为inline-block时，设置好各元素的宽高及颜色后，这个边距就会诡异的出现了，即使使用（*{margin:0;padding:0;}）也是无法消除<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">原创 2020-05-22 17:32:20 · 1392 阅读 · 0 评论