51yunOA

css height高度 css line-height行高 css min-height最小高度 css max-height最大高度 css width宽度 css min-width最小宽度 css max-width最大宽度 css border边框 css background背景 css float浮动 css clear both css font文本 css...

HTML及CSS常用颜色英文词汇https://blog.youkuaiyun.com/u012117917/article/details/41604711黑色 银色 灰色 白色 茶色 红色 紫色 紫红 black silver gray white maroon red purple fuchsia ...

灵感创意：（设计大咖的作品给你带来无限灵感）Behance： https://www.behance.net/Dribbble：https://dribbble.com/花瓣网：http://huaban.com/站酷网：http://www.zcool.com.cn/致设计：http://www.zhisheji.com/UI中国：http://www.ui.cn/P...

背景Flexbox 布局（也叫Flex布局，弹性盒子布局）模块（ W3C 候选推荐，截止到2017年10月）旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够...

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很...

文章目录媒体查询介绍 Media Queries具体使用 一、最大宽度Max Width 二、最小宽度Min Width 三、多个Media Queries使用 四、设备屏幕的输出宽度Device Width 五、iPhone4 六、iPad 七、android 八、not关键字 九、only关键字 十、其他 媒体查询之device-aspe...

1、head标签中引入//语法： @media mediatype and | not | only (media feature) { css-code; }//也可以针对不同的媒体使用不同的stylesheets:<!--<link rel="stylesheet" media="mediatype and|not|only (media feature)" href=...

CSS宽度属性为单词width，宽度width包含了两个重要的属性：最大宽度属性max-width和最小宽度属性min-width。最大宽度属性(max-width)用来定义宽度显示的最大值，当拖动浏览器边框使其显示范围大于最大宽度的时候，元素显示最大宽度值定义的宽度。在最大宽度属性值中，可以使用三种属性值，分别为auto值、长度值和百分比值；最小宽度属性(min-width)用来定义宽度显...

CSS(Cascading Style Sheet)被译为级联样式表，做为一名前端从业人员来说，这个专业名词并不陌生，在行业中通常称之为“风格样式表（Style Sheet）”，它主要是用来进行网页风格设计的。通过设立样式表，可以统一地控制HTML（XHTML）中各标签的显示属性。可以使人更能有效的控制Web页面（或Web应用程序）外观，可以精确指定Web元素位置，外观以及创建特殊效果的能力。CS...

https://www.html.cn/中文网 前端UI技术 文档资料 培训视频

https://www.html.cn/tool/css3Preview/Box-Shadow.htmlBox Shadow(阴影) Text Shadow(文本阴影) Text Stroke(文本描边)和text-fill-color(文本填充色) border-radius(圆角) webkit内核的safari、 Chrome的Linear Gradients (线性渐变)...

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。经过上两篇揭秘，大家心里对sass应该有了很好的认知感了，这篇文章基于前面两篇为基础，请确保你先浏览了前面的两篇文章，不然可能给你带来疑惑感觉。sass揭秘之变量 sass揭秘之@mixin，%，@function这篇文章关键是对sass判断或循环的语法熟悉下，...

因为文章内含有很多sass代码，如需自己动手查看编译结果，推荐使用sassmeister这款在线编译工具，方便你阅读学习。在阅读本文章之前，请先确认你已经阅读了上篇文章sass揭秘之变量，不然会给你带来疑惑的感觉。其实很多人之所以对sass或less感兴趣，就是因为他们能使用变量和这个@mixin功能，而后面的%和@function知道的人就比较少了。所以说@mixin这个东西还是很有诱惑...

全局变量和局部变量要了解sass或less的变量，有必要先了解下js的变量定义，先来一段js的代码：var a = 1;(function(){ a = 5;})();console.log(a);//5上面这段代码，匿名函数里面的a因为没有使用var关键字来定义，所以当我们在函数外打印a的时候，得到的是5，改变了一开始定义的1var a = 1;(fun...

函数参数带有类名设置 函数定义 这个根据每个的设计稿和基础适配的font-size决定，我这里只是说传入参数生成对应的rem的值@base:750 / 720 * 0.01;.px2rem(@name, @px) { @{name}: @px * @base * 1rem;} 函数调用 .px2rem(margin-top,250); 使用...

Material design in color 强调大胆的色调，深的阴影及明亮的亮光。几个基本概念Primary color 原色（用来作为actionbar color）Secondary color 二次色（statusbar color -lighter or darker）Accent color 强调色（floating button or active component...

大屏幕上有两个典型的区域适合放置导航：顶部和左侧，但在缺少屏幕空间的手机屏幕上却是一个有趣的挑战。随着响应式设计越来越流行，在小尺寸屏幕上处理导航的各种方法越来越值得我们关注。而手机网站导航必须在快速获取一个网站的信息和不可见性之间取得平衡。下面是一些处理响应式导航比较流行的技巧，由于下述几种导航方式还没有约定俗成的叫法，所以大家可以结合案例网站来理解他的实际用法： 顶部导航 ...

自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design（RWD）的名词，即响应式网页设计，这个概念从Responsive Architecture延伸到web设计领域，让所有的交互设计、视觉、前端开发都开始投入到这个趋势，或者说新的设计解决方案中。响应式导航的设计遵循了响应式Web设计理念，页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕...

http://caibaojian.com/css3/properties/transition/transition.htm

https://www.cnblogs.com/xiaohuochai/p/5347930.html前面的话　　通过过渡transition，可以让web前端开发人员不需要javascript就可以实现简单的动画交互效果。过渡属性看似简单，但实际上它有很多需要注意的细节和容易混淆的地方。本文将介绍和梳理关于CSS过渡的知识定义　　过渡transition是一个复合属性，包...

https://www.cnblogs.com/zxnn/p/8261849.htmltransform字面上就是变形，改变的意思。在CSS3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。2D Transform 方法translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当...

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css *//** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orie...

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。　　当今流行的浏览器(如:Fire...

<scriptsrc="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoa...

<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">

/*** Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)* http://cssreset.com*/html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abb...

一、写在前面今天，90％的媒体互动都是基于屏幕的，通过手机，平板电脑，笔记本电脑，电视和智能手表来与外界产生联系。多屏设计已成为商业设计中不可或缺的一部分，响应式设计正迅速成为常态。作为UI设计师，我们希望为我们的产品在不同尺寸下都能为用户提供良好的用户体验，栅格系统可以帮助我们做到这一点。即使是我们只针对一个尺寸进行设计，我们也经常面临设计布局方面的问题。合理运用栅格系统可以帮助我们控制...

https://www.cnblogs.com/yujihang/p/6882839.htmlhttps://www.w3cplus.com/css3/css-secrets/sticky-footers.html?utm_source=tuicool&utm_medium=referral4.1固定高度的解决方案为容器推算出其高度,我们可以使用一个容器将<header&...

<template> <div class="big"> <div class="box1"></div> <div class="box2"></div> <div class="box3" style="width:1920px;background: skyblue;"&g...

1.命令 2.安装完成以后在main.js引入 3. 在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 build/utils.js 里的一个方法生成的。我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remU...

1. 在配置文件设置大屏设计的尺寸1920*1080//appConfig.jsexport default{ screen:{ width:1920, height:1080, scale:20 }//大屏设计宽高}2. 定义resetScreenSize.jsimport appConfig from '.....

介绍tiptap编辑器基于Prosemirror，完全可扩展且无渲染。可以轻松地将自定义节点添加为Vue组件。Githubhttps://github.com/scrumpy/tiptap为什么使用tiptap？市面上有不少富文本编辑器，但大多数可能并不能满足你的需求。编辑器应该易于扩展，并且不应基于旧的依赖项（例如jQuery）。对于React...

01 如何去做？根据原子定律（不懂原子定律同学可以搜索原子设计方法）我们从页面中最细小的元素入手，也可以理解为页面中无法再拆分的元素开始，它是组成界面最基础的元素，从最基础的元素，开始做统一性，本次我将从颜色，字体，网格说起。02 颜色从颜色开始，需要根据整个页面中场景进行颜色定义，同样色彩也需要根据我们定义的关键词去推导，在定义颜色过程中，可以参加色彩心理学原理，以及竞...