大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

表格单元格内的两端对齐

表格单元格内的两端对齐 前端入坑纪 49 许久未更,最近做了个表格。碰到了两端对齐的坑(以前看到过,后来忘了。果然好记性不如烂笔头),今天来分享下~ 好,详解如下! OK,first things first! github项目地址 性冷淡表格 HTML 结构 姓名 休泽 职业 修业 就是这么简单的一个表格,这里的span是整个效果的灵魂,mark CSS 结构 table { width: 300px; height: 30px; display: inline-block;

自适应缩放图文列表

margin: 0;imgWrp { width: 0; background-repeat: no-repeat; flex-flow: row nowrap; } li p { width: 70% } li以display:flex来展现,这样的话,里面的div和p这类子元素可以很好的控制,比float好用多了。 flex-flow控制子元素的方向和是否换行, justify-content: space-around;设定子元素的主轴排列方式,align-items: center;

滚动时的渐显渐隐标题

} #titWrp { background-color: rgba(255, 255, 255, 0); } 对标题设置背景,后续都是操作这个背景的透明度 JavaScript 结构 var tit = document.querySelector('#titWrp') var doc = document.body || document.documentElement // 当滚动时,用节流函数来间隔时间段触发绑定的函数操作 window.addEventListener("scroll", _.throttle(function () { // 仅在小于100时,也就是滚动值100以内才执行对应的操作 if(doc.scrollTop 100){ var num = doc.scrollTop;

如何用VUE写一个多用模态框组件模版

display: flex; z-index: 12; letter-spacing: 0.4rem;blueBackground{ background: #21A6DF;redBackground{ background: #FF4046;modal-fade-leave-active{ opacity: 0;新建一个index.js文件,在其中全局引入组件,全局引入之后,就不用在每个调用的组件里面单独引入了,可以直接使用 import Modalfrom "./Modal.vue"; this.blue = this.$refs.Model.blue this.red = this.$refs.Model.red }, closeModal(){ this.isModalVisible = false }, confirm(){ console.log(11111111111);

Web移动端兼容问题

/* flex-wrap: nowrap */ ios: 父元素display: flex子元素绝对定位后,父元素的align-items:center会失效 -webkit-appearance: none;5s。animation: pop-right 3s ./bg.jpg') 0 no-repeat/cover 不支持这种写法,cover跟在no-repeat后面 js 解决移动端键盘弹起遮住输入框的问题 window.addEventListener("resize", function () { if (document.activeElement.tagName == "INPUT" || document.activeElement.tagName == "TEXTAREA") { document.activeElement.scrollIntoView();

理解 CSS 中的 line-height 和 vertical-align

理解 CSS 中的 line-height 和 vertical-align 文章地址:https://github.com/afishhhhh/blog/issues/4 一个例子 image div { background: #eee; border: 1px solid #000; font-size: 50px; margin: 10px;

React 中合并单元格的正确写法

React 中合并单元格的正确写法 用表格进行页面布局,页面布局在各种浏览器的的兼容性, 都非常好, 而在react中使用表格布局, 合并单元格的写法比较特殊, 博主查了很久才找到正确的写法, 在这里分享一下 效果图 源码 react组件文件 import React, { Component } from 'react';/App.css';App { text-align: center; } td { border: 1px solid #AB3319; width: 30px;title { color: #444444; font-size: 20px; border-collapse: collapse;

ARM汇编指令编程

ARM汇编指令编程 ARM汇编指令编程之选择排序 题目:将整数数组{0XAABBCC11,0XAABBCC00,0XAABBCC33,0XAABBCC22,0XAABBCC44}进行选择排序。 实验软件环境:ARM Developer Suite V1.2 代码: AREA test,CODE,READONLY ENTRY LDR R0,=DATAS LDR R1,=NUM LDR R1,[R1] SORT MOV R1,R1,LSL #2 SUB R1,R1,#4 ADD R1,R0,R1 SUB R0,R0,#4 LOOP1 LDR R4,[R0,#4]! TEQ R1,R0 BEQ FINISH MOV R2,R0 MOV R3,R0 LOOP2 LDR R5,[R2,#4]!

记录一下我的小程序公共样式

记录一下我的小程序公共样式 基于 mpvue 如果需要原生,px转为rpx,可以自己转换 App.vue 样式 /* 全局样式*/ page { background-color: #fff; height: 1px;button { position: relative;ml10 { margin-left: 10px;mb15 { margin-bottom: 15px;bk { word-wrap: break-word;vh { visibility: hidden; content: ""; white-space: nowrap;middle { display: inline-block; transition: all 250ms; cursor: default; pointer-events: none; flex-wrap: wrap; flex-direction: column;

Flex布局

} Webkit 内核的浏览器,必须加上-webkit前缀。 .container{ width: 100px;item{ margin-left: 1px; text-align: center; flex-direction: column;

Flex布局入门

Flex布局入门 父元素 display: flex . } flex-direciton . } row,默认值,水平从左到右 row-reverse,1相反 column 垂直从上到下 column-reverse 3相反 flex-wrap 设置当子元素超过父元素时是否换行,上面方法设置换行的方向 . } 不换行,默认值。 其他字面意思 flex-flow flex-direction和flex-wrap的缩写,默认值row nowrap flex-flow: || ; } 子元素 order .item { align-self: flex-start | flex-end | center | baseline | stretch | auto;

css 实现水平居中的方法总结

} 块级元素的特点:可设置元素的宽度,在不设置宽度时, 元素的宽度会自动填满其父元素宽度,并独占一行 1.1 margin: auto 居中元素设置宽度,并且设置 margin: auto 可实现水平居中 . /*兼容代码*/ } 问题: 需要解决 display: inline-block 在IE 下的兼容性问题 3. 利用定位实现水平居中(已知宽度) 相对定位: 相对定位就是将元素偏离元素的默认位置,但是并没有脱离文档 left: 50%;

vue2.0移动端自定义性别选择提示框

vue2.0移动端自定义性别选择提示框 这篇文章主要是简单的实现了vue2.0移动端自定义性别选择的功能,很简单但是经常用到,于是写了一个小小的demo,记录下来。 效果图: 图片.png 实现代码: 男 女 export default { data() { return { param: '1' //设置默认值为1,即设置第一个单选框为选中状态 } }, methods: { } }; background: fff; border-bottom: 1px solid #f1ebeb;boy input{ text-align: center;

【CSS】内圆角

【CSS】内圆角 184250-106.jpg 先上个图看看效果 image.png 紫色边框外面是直角,内部是圆角。要做出这个效果,首先要知道box-shadow 和 outline 的使用方法。box-shadow 和 outline 的使用方法在我的简书《CSS多重边框》里面有记录。http://www.jianshu.com/p/a6333147dff5 我做出这种效果有2个方法。 方法一: 用2个div嵌套实现。 HTML代码: CSS代码: . height: 300px;div { width: 280px; border-radius: 20px;

解决div里面img图片下方有空白的问题

解决div里面img图片下方有空白的问题 0001.jpg 在开发的过程中,我发现插入一张图片后,下面想紧跟着一个带背景色的div,不管我怎么折腾他都有一条白边。后来研究了一下发现自己对img标签了解的真不够深入。 image.png html代码: header /* 插入一张banner图片 */ section CSS代码 * { margin: 0; } header { height: 76px; background: rgba(255, 204, 0, 1); background: #00B3FF;banner { font-size: 0;

【CSS】百度百科状态栏

font-family:arial,tahoma,'Microsoft Yahei','\5b8b\4f53',sans-serif; background-color:#f3f3f3; background:#24619c; border-top:1px solid #5895d5; border-bottom:1px solid #3b92e9; background:#459df5; display: flex; height: calc(100% - 1px);nav-content-box li { width: 120px;nav-content-box li:hover{ background:#19508b; } ul.nav-content-box li ul li a { color: #a2c9f0; } HTML与CSS 目录:HTML与CSS 上一篇:【CSS】省略号 下一篇:【CSS】图片动画特效(相框)

CSS Flex布局常见应用

box{ width: 500px; height: 250px; } 2、居左居右布局[上下居中] 【某前端面试题】要求:间距为20像素,上下居中,两个子元素居左,一个子元素居右,父级元素宽度不固定,只能使用flex布局。 效果图: demo.png 分析: 父级元素使用flex布局,上下居中使用align-items控制; 第三个子元素居右采用:margin-left:auto 实现。 效果预览 主要代码: //dom结构 //样式设计 . align-items: center;

css-布局

css-布局 css基础的知识看完后,我们就要学习如何布局,这里详细的总结一下最近了解的布局方式。 一 单列水平居中 1.子元素为display:inline-block时,父元素只需设置text-align:center即可。 2,当子元素为块级元素,且有宽度width时,使用margin:0 auto;

2个概念10种属性教你上手flex布局

container { flex-direction:row | column | row-reserver | column-reserve } 2. flex-wrap:如果项目过多,主轴一行排不下,其排列形式 .container { justify-content:flex-start | flex-end | center | baseline | stretch } align-item 5. align-content: 当项目过多时,主轴上排列不了,多行排列,把多行项目作为一个整体,在交叉轴上的对齐方式。属性特性大体如:align-item .