弹性 盒子 布局css
flex布局 align-items和align-content
1.align-items 对齐项目 项目只有单行的时候，对齐项目 与容器设置高度或者未设置高度 无关 可以使用align-self 重新定义某一个项目的值 align-items: center 项目在交叉轴的中间 align-items：flex-start 项目起始位置紧靠交叉轴的起始位置 a ......
css属性——env()和constant()设置安全区域,解决移动端小程序和H5底部栏 iPhoneX安全区域(Safe Area)底部小黑条在的屏幕适配
转载:https://www.cnblogs.com/jiaoshou/p/16647577.html 使用苹果官方推出适配方案css函数env()、constant()来适配 苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少。这2个方法是什么呢？ en ......
CSS伪类
CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法： selector:pseudo-class {property:value;} CSS类也可以使用伪类： selector.class:pseudo-class {property:value;} https://www.lekaowa ......
CSS 实现重叠效果时，div 背景被 img 图片遮挡
CSS 为实现重叠效果，将 margin-top 设为负值时，div 背景被 img 图片遮挡 一、未实现重叠效果 <body> <img src="https://cdn.uviewui.com/uview/swiper/swiper2.png" style="width: 375px;" alt ......
常用css属性flex: 1详解
flex:1实际代表的是三个属性的简写 flex-grow是用来增大盒子的，比如，当父盒子的宽度大于子盒子的宽度，父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比 flex-shrink用来设置子盒子超过父盒子的宽度后，超出部分进行缩小的取值比例 flex-basis是用来设置盒子的 ......
[CSS]水平镜像翻转
// 方法1 ios支持差 transform retateX(180deg) // 方法2 通用 transform scaleX(-1) 垂直翻转将X改为Y即可 ......
CSS3弹性盒子
传统布局与flex布局 传统布局 兼容性好 布局繁琐 局限性，不能在移动端很好地布局 flex 弹性布局 操作方便，布局极为简单，移动端应用很广泛 PC 端浏览器支持情况不如移动端 flex 布局的基本概念 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 fl ......
css选择器 ~ （波浪号）、+（加号）、＞（大于号）的用法解析和举例
参考：https://blog.csdn.net/Amnesiac666/article/details/122060057 ~（波浪号）：A ~ B表示选择A标签后的所有B标签，但是A和B标签必须有相同的父元素。 ~（加号）加号又被称作兄弟选择器。A+B表示选择紧邻在A后面的B元素，且A和B必须拥 ......
HTML+JS+CSS实现图片文件上传界面设计的例子
在Java Web应用程序设计中文件上传功能的实现是一项非常重要的工作，本文中的例子程序实现了文件上传功能的界面设计。在Java Web应用程序设计中涉及到上传图片文件功能时，往往都需要对图片文件进行预览，如新闻稿件编辑、证件照片上传等，以便查看上传文件是否正确和效果是否适合，但是Windows系统 ......
火狐浏览器插件--Stylish，任意网站嵌入css
护眼背景 vbody{ background-color: rgb(204,232,207) } 效果展示 ......
暗夜发光,独自闪耀,盘点网页暗黑模式(DarkMode)下的特效和动效,CSS3实现
众所周知，网页的暗黑模式可以减少屏幕反射和蓝光辐射，减少眼睛的疲劳感，特别是在夜间使用时更为明显。其实暗黑模式也给霓虹灯效应（Neon Effect）提供了发挥的环境。 霓虹灯效应是一种视觉效果，其特点是在深色背景上使用鲜艳的颜色来产生强烈的视觉冲击。这种效应通常用于设计海报、广告、标志和网页等。霓 ......
弹性盒子模型
弹性盒子模型(flex box) 定义 弹性盒子是CSS3的一种新的布局模式 CSS3弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式 引入弹性盒子布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间 CSS3弹性盒内容 弹 ......
css 按钮背景透明
background-color: Transparent; background-repeat:no-repeat; border: none; outline:none; ......
关于Android Studio constraintlayout布局出现控件无法固定问题
遇到设备开机就黑屏的问题可以参考文献,亲测好用 https://blog.csdn.net/Just__Do__IT__/article/details/121129827?ops_request_misc=&request_id=&biz_id=102&utm_term=android%20stu ......
css实现文字的条纹阴影效果
先写下一段文字 添加重复的线性渐变，该渐变倾斜45deg（倾斜角度依需求设置） 上面的为黑色、透明色的渐变，实际上渐变的颜色需要跟文字的背景颜色相同，如果文字的背景色是白色那么渐变的颜色就是白色、透明色，白色用来融入背景，透明色用来显示被遮住的文字，如下: 写下相同的文字，覆盖条纹阴影，调整文字的位 ......
Cadence入门笔记（六）：布局和板框
说明 布局和走线是最复杂的一个环节，涉及诸多技巧和设计理念。但为了入门学习简单考虑，这里只做基本的操作步骤说明。 隐藏飞线 上一节放置好元件后就要开始布局了，布局前可以通过工具栏设置来选择隐藏飞线 指针过滤器 可以使用过滤器来使鼠标点击时只选中我们需要的器件 元件位置编辑 布局时可以选择切换应用模式 ......
Android开发-Android UI与布局
01 Android UI 1.1 UI 用户界面（User Interface，简称 UI，亦称使用者界面）是系统和用户之间进行交互和信息交换的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。 软件设计可分为两个部分：编码设计与UI设计。 1.2 Android UI Android应用界 ......
css样式基础
标签选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米</title> <style type="text/css"> #menu{ background: red; height: 80px; } ......
css实现折扇案例
搭建扇子结构 <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12&l ......
css实现一个太极案例
搭建一个太极的盒子 <body> <div></div> </body> 样式（使用 linear-gradient线性渐变；radial-gradient径向渐变） <style> body { background-color: lightcyan; } div { width: 200px; ......
css实现三角形
界面搭建<i></i> 1、右三角形 i { width: 0; height: 0; border: 20px solid transparent; border-left: 20px solid red; } 实现效果： 2、下三角形 i { width: 0; height: 0; borde ......
使用css实现图片轮播功能
功能实现： 先搭建一个用于轮播的容器，水平置入需要轮播的图片，设置图片大小为容器的大小，超出容器的部分隐藏显示 然后用动画使每次需要轮播时让图片向左平移容器的宽度，这样一个简单的轮播就做好了 废话不多说，世界上案例吧 界面搭建 <body> <div class="swiper-container" ......
css中关于超出显示省略号
1、单行超出显示省略号 overflow: hidden; //超出隐藏 text-overflow: ellipsis; //文本超出时显示省略号 white-space: nowrap; //设置文本不换行 2、多行超出显示省略号 overflow: hidden; //超出隐藏 text-ov ......
box-shadow盒子阴影的书写顺序
box-shadow: 水平阴影 垂直阴影 模糊 阴影尺寸 颜色 外阴影转内阴影（默认外阴影） 例如： box-shadow: 10px 10px 5px 2px #ff4444 inset; ......
K8S实战集训第一课 Ansible自动化部署k8s、弹性伸缩、Helm包管理、k8s网络模型介绍
K8S实战集训第一课 Ansible自动化部署k8s、弹性伸缩、Helm包管理、k8s网络模型介绍 Ansible自动化部署K8S集群 一、Ansible自动化部署K8S集群 1.1 Ansible介绍 Ansible是一种IT自动化工具。它可以配置系统，部署软件以及协调更高级的IT任务，例如持续部 ......
css笔记
水平布局 这段时间编写静态页面，学习了几种水平布局，其中有不小的差异和注意事项，特此记录汇总一下。 1. display: inline-block 将元素修改为行内块元素，可以在不脱离文档流的情况下实现水平布局，且兼容性极佳。 但是存在元素上下、左右边距不贴合的问题，解决方法如下： 设置父元素fo ......
CSS 媒体查询 @media【详解】
关于媒体查询的一篇好文推荐 https://blog.csdn.net/weixin_41192489/article/details/126028971 ......
CAD 2023 设置布局原点 V1.1
"布局"对应命令中的"Paper"（"P"）（而非"Layout"），在其他界面处或称为"图纸"。 布局中的元素： 虚线框为'可打印区域' 可调整，可与图纸页面重合 （默认情况下）橘色框为'可打印区域'左下角，为原点，坐标为(0,0)。 白色底为图纸 蓝色框为图纸左下角，（默认情况下）坐标为负值(- ......