display | 易学教程

vue scss 一键更换主题色，字体等页面等页面大体样式

阅读更多关于 vue scss 一键更换主题色，字体等页面等页面大体样式

主要采用scss 编程式思想实现以上文件从上到下进行说明 _variables.scss 文件主要写主题色字体边框等变量内容如下： ————————————————————————————————————————————————— // colors $colors: ( // 主题色 'primary': #0066ff, "header-bg":#fff, "header-text":#000, 'pages-bg': #f6f7fb, 'border-color': #f2f2f2, 'page-bottom': #d4d9de, 'status-color': #c3672c, 'info': #4b67af, 'danger': #791a15, 'blue-1': #1f3695, 'blue': #1e78ff, 'gree': #07c160, 'white': #fff, 'white-1': #fcfcfc, 'white-2': #eceef0, 'light': #f9f9f9, 'light-1': #d4d9de, 'grey': #808080, 'grey-1': #666, 'dark-1': #343440, 'dark': #222, 'black': #212121, 'end': #fcb102, //warrary 页面steps

前端学习（163）:博客小练习

阅读更多关于前端学习（163）:博客小练习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>博客静态页面</title> <link rel="stylesheet" href="./cssblog/common.css"> <style> #header{height: 64px;background: url(./imgblog/cst.jpg) no-repeat 446px 0,url(./imgblog/001.jpg);} #header h2{line-height: 64px;} #header .header_pifu{margin-top: 15px;} #header .header_title{margin-top: 15px;margin-right: 20px;} #main{height: 720px;background:url(./imgblog/001.jpg);} #main .main_left{width: 262px;height: 767px

浅谈CSS3中display属性的Flex布局

阅读更多关于浅谈CSS3中display属性的Flex布局

最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex 1 .container { 2 display: flex; 3 flex-direction: column; 4 align-items: center; 5 background-color: #b3d4db; 6 } 编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？　　 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。它即可以应用于容器中，也可以应用于行内元素。(以上说明结合微信开发者工具说明)2009年，W3C提出了一种新的方案----Flex布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。基本概念采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做 main

E/libEGL: validate_display:255 error 3008 (EGL_BAD_DISPLAY) on Nexus 9 + Android 6

阅读更多关于 E/libEGL: validate_display:255 error 3008 (EGL_BAD_DISPLAY) on Nexus 9 + Android 6

问题 I'm porting an old big application in Cordova 3.4, from Eclipse to Android Studio because this application used a library that now has been updated in Android 6. After some issues with build.gradle and settings.gradle, the App builds, runs and I can make the apk. Every thing works fine on devices with Android 5. With Android 6 on Nexus 9 the app crashes, with a white screen with this error: E/libEGL: validate_display:255 error 3008 (EGL_BAD_DISPLAY) On Internet I've found few answers to this

css水平垂直居中

阅读更多关于 css水平垂直居中

css水平垂直居中方法总结，简单明了水平居中对于行内元素(inline)：text-align: center; 对于块级元素(block)：设置宽度且 marigin-left 和 margin-right 是设成 auto 对于多个块级元素：对父元素设置 text-align: center;，对子元素设置 display: inline-block;；或者使用 flex 布局垂直居中对于行内元素(inline) 单行：设置上下 pandding 相等；或者设置 line-height 和 height 相等多行：设置上下 pandding 相等；或者设置 display: table-cell; 和 vertical-align: middle;；或者使用 flex 布局；或者使用伪元素来源： https://www.cnblogs.com/renzm0318/p/8932827.html

Why are borders causing div to overflow container?

阅读更多关于 Why are borders causing div to overflow container?

问题 I have a section set to a fixed width and a 100% width div inside of it with a 5 pixel border. Looks fine but you can tell the containing div is a bit off center and it wouldn't be without the border, which I need to match the client comp. The code is rather straightforward: #info { max-width: 980px; margin: 0 auto; } .info-box { border: 5px solid #0033A0; display: inline-block; text-align: center; padding: 48px 0; width: 100%; } <section id="info"> <div class="info-box">SOME CONTENT</div> <

CSS的inline、block与inline-block

阅读更多关于 CSS的inline、block与inline-block

基本知识点行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。其中 img和input为行内块元素。行内元素与块状元素之间的转换: float: 当把行内元素设置完float:left/right后，该行内元素的display属性会被赋予block值，且拥有浮动特性。行内元素去除了之间的莫名空白。 <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> p{ background-color: red; height: 500px; width: 30%; padding: 20px; margin: 20px; float: left;} div{ background-color: green; height: 50px; width: 40%; padding: 20px;

web前端入门到实战：布局之display属性

阅读更多关于 web前端入门到实战：布局之display属性

在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）。而其中CSS的 display 属性又可以显式的修改每个盒子的视觉格式化模型，比如说从行内级盒子变成块级盒子。那在这一章节中，我们就来一起探讨CSS的 display属性，该属性也是学习CSS不可或缺的属性之一。 display 的基本介绍 CSS的 display 属性在W3C规范中是一个独立的模块，即 CSS Display Module Level 3。该模块描述如何从文档树（DOM树）生成CSS树（CSSOM树），并定义了如何使用 display 属性来控制CSSOM。比如我们一个类似下面这样的一个HTML文档：学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划） <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <link href="style.css" rel="stylesheet"> <title>Critical Path</title> </head> <body> <p

正确地使用SAP的标准对话框函数

阅读更多关于正确地使用SAP的标准对话框函数

在用户设计sap的程序时，经常需要一些对话框，用户可以自己编写，但使用SAP系统中提供了的对话框函数将减少许多开发工作。 1、sap的函数组列表和用途说明适用情况 Function group 提示用户将可能丢失数据 SPO1 提示用户对某个问题选择Yes或者No SPO1 提示用户将可能丢失数据, 并询问用户是否继续操作 SPO1 提示用户在多个操作中选择一个操作 SPO2 提示用户是继续当前操作或者取消当前操作 SPO2 提示用户输入数据 (可以根据一个表检查或者不检查输入值） SPO4 将数据显示给用户 SPO4 将详细数据显示给用户 SPO6 从列表中选择数据 SP05 用可滚动的对话框显示数据给用户 STAB 从视图或者数据表中打印数据 STPR 2、函数列表和说明 2.1 SPO1的函数 POPUP_TO_CONFIRM_STEP 用此函数可以建立一个对话框用于询问用户是否执行某步操作，用户可以选择Yes No或者Cancel。该函数可以传入一个标题和两行的文本（提示问题）。系统在窗口上显示一个绿色问号图标。可以设置某个按钮作为默认按钮。 CALL FUNCTION 'POPUP_TO_CONFIRM_STEP' EXPORTING TITEL = '确认提示测试' TEXTLINE1 = '确实要执行' TEXTLINE2 = '测试？' CANCEL

ESP32 direct port manipulation

阅读更多关于 ESP32 direct port manipulation

问题 Dear StackOverflowers, I am trying to use HX8357D 3.5" TFT from Adafruit (link) with an esp32. The TFT driver has two interfaces: SPI and 8-bit parallel. The provided library from Adafruit (link) only supports SPI on the esp32. I need to have higher display speeds, so I decided to try and add support for the esp32 myself. I'm not experienced at all with this kind of programming, but I liked the challenge. I figured out how the 8-bit interface work by reverse engineering the Arduino Uno/Mega

订阅 display