前端笔记2023

news2024/10/5 13:56:50

border-radius: 数值px;圆角

flex布局

小程序中

display:flex;    //flex布局
flex-direction:row/column;  //规定主轴的方向:row/column
justify-content:space-around;
//元素在主轴方向的排列方式:flex-start/flex-end/space-around/space-between;
align-items:center;  
// 元素在副轴方向的排列方式:flex-start/flex-end/space-around/space-between;

微信小程序组件(标签)对照

1、text(span)
编写文本信息,类似于span标签
2、view
容器,类似于div标签
3、image
图片

小程序特殊的样式

1、像素:
px
rpx(推荐,自适应)整个页面宽度是750rpx

字体图标

css
在这里插入图片描述

ul标签

css
在这里插入图片描述

去掉列表符号(去圆点)

css中

<style>
ul{
list-style: none;
}
</style>
这些在开发文档里有的。

清除标签内外边距

<style>
{
margin: 0;
padding: 0;
border-box:box-sizing;//自动内减间距
)
</style>

清除a标签下划线

<style>
{
color:#333;
text-decoration: none;
}
</style>
{
margin:xx auto  //左右设置为auto,标签水平居中,版心居中。
}

对同一标签设置多个同一操作(参数不同)
只有最后一条实现了,why?

因为css具有层叠性。

渐变背景

在这里插入图片描述
单独的css文件,需要一个link标签引进。

2023/1/21 基于菜鸟教程整理css笔记

多重样式优先级

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

一般情况下,优先级如下:

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

CSS 背景属性用于定义HTML元素的背景

CSS 属性定义背景效果:

background-color//背景颜色
background-image//背景图像,默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体.
body {background-image:url('paper.gif');}
background-repeat//默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:
实例

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果你不想让图像平铺

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

以上实例中,背景图像与文本显示在同一个位置,为了让页面排版更加合理,不影响文本的阅读,我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
当使用简写属性时,属性值的顺序为::

background-color
background-image
background-repeat
background-position

示例
body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/887806.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【动画】p61Mixamo自动绑定骨骼

Mixamo自动绑定骨骼 Mixamo Mixamo 虚幻商城搜索Mixamo Animation Retargeting 有两个版本4.14-4.27和5.0-5.2 优化&#xff1a; 程序方面优化 素材方面优化 光照方面优化 模型面数优化 材质方面优化 先获得一个模型 打开mixamo网站 导入模型 自动进入自动绑骨界面&#xf…

工厂方法模式【Factory Method Pattern】

前言 1.工厂模式概念 实例化对象&#xff0c;用工厂方法代替new操作(重点) 工厂模式包括工厂方法模式和抽象工厂模式 抽象工厂模式是工厂方法模式的扩展 2.什么情况下适合工厂模式 有一组类似的对象需要创建 在编码时不能预见需要创建哪种类的实例 系统需要考虑扩展性&#xff…

前端(十二)——深入理解和使用 async和await

&#x1f61b;博主&#xff1a;小猫娃来啦 &#x1f61b;文章核心&#xff1a;深入理解和使用 async和await 在 JS中&#xff0c;异步操作是无法避免的&#xff0c;而处理异步操作最常用的方法是使用回调函数或者 Promise。然而&#xff0c;自 ES2017 引入了 async/await 之后…

分布式版本控制系统(一)

分布式版本控制系统(一) 目录 分布式版本控制系统(一) 1、Git、Github、Gitlab 的区别2、Git 与 SVN 区别3、Git工作流程4、Git基本概念5、Git 客户端安装使用 5.1 git-server安装配置5.2 git-client配置免密登录git服务器5.3 文本编辑器5.4 差异分析工具5.5 查看配置信息5.6 常…

clip模型学习

先介绍几个相关概念&#xff1a; 1.零样本学习&#xff08;zero-shot&#xff09; 参考&#xff1a;https://blog.csdn.net/gary101818/article/details/129108491 利用训练集数据训练模型&#xff0c;使得模型能够对测试集的对象进行分类&#xff0c;但是训练集类别和测试集类…

【枚举】CF1858 B

Problem - B - Codeforces 题意&#xff1a; 思路&#xff1a; 直接枚举是去掉哪个店&#xff0c;然后计算贡献即可 虽然赛时做出来了&#xff0c;但是这种计算还是感觉不熟练 Code&#xff1a; #include <bits/stdc.h>#define int long longusing i64 long long;co…

订货系统怎么选?从这四个方面筛选错不了(一)

选择适合的订货系统对企业来说是一个重要且复杂的决策。一个优秀的订货系统可以提高供应链的运作效率、降低成本&#xff0c;并帮助企业更好地管理库存和订单。如果不知道从那几方面做选择&#xff0c;我们可以简单从四个方面进行筛选&#xff0c;这样一般错不了&#xff0c;今…

【RT-Thread】 启用hash算法软件包

参考文章 哈希匹配算法在单片机上的应用 近来单片机开发因业务需求需要用hash算法&#xff0c;为开启此功能&#xff0c;在RT-Thread Studio环境下操作如下&#xff1a; 1&#xff0c;在RT-Thread Setttings里面的搜索栏里输入hash,然后定位到下图所示 使能hash match for …

四、Controller 配置总结、RestFul 风格

文章目录 一、Controller 配置总结二、RestFul 风格2.1 使用 RequestMapping 的 method 属性指定请求类型 三、扩展&#xff1a;小黄鸭调试法 一、Controller 配置总结 实现 Controller 控制器的方式 实现 Controller 接口&#xff0c;重写 handleRequest 方法实现 控制器实现 …

IDEA常用工具配置

IDEA常用工具&配置 如果发现插件市场用不了&#xff0c;可以设置Http Proxy&#xff0c;在该界面上点击”Check connection“并输入的地址&#xff1a;https://plugins.jetbrains.com/ 。 一、常用插件 1、MybatisX Mybaits Plus插件&#xff0c;支持java与xml互转 2、F…

【数据结构】_7.二叉树概念与基本操作

目录 1.树形结构 1.1 树的概念 1.2 树的相关概念 1.3 树的表示 1.4 树在实际中的应用—表示文件系统的目录树结构 ​编辑​2.二叉树 2.1 概念 2.2 特殊二叉树 2.3 二叉树的性质 2.4 二叉树的存储结构 2.4.1 顺序存储结构&#xff08;数组存储结构&#xff09; 2.4.2…

小程序数据可视化:使用图表和可视化工具展示数据

在当今信息爆炸的时代&#xff0c;数据无疑是最珍贵的资源之一。然而&#xff0c;海量的数据如果不加以整理和展示&#xff0c;很难从中获取有价值的信息。这时候&#xff0c;数据可视化就发挥了重要作用&#xff0c;它能够通过图表和可视化工具将复杂的数据转化为直观的视觉形…

Azure控制台添加磁盘到VM

在控制台中添加磁盘 RDP方式登录windows虚拟机&#xff0c;打开后提示连接&#xff0c;点击连接&#xff0c;并会指向server manager,点击File and Storage Services,然后点击Disks,并按照提示一步一步操作 3. 最后在我的电脑中可以看到新创建的磁盘

[Go版]算法通关村第十一关白银——位运算的高频算法题

目录 专题1&#xff1a;位移的妙用题目&#xff1a;位1的个数&#xff08;也被称为汉明重量&#xff09;解法1&#xff1a;遍历所有位&#xff0c;判断每个位的数字是否是1Go代码 解法2&#xff1a;依次消除每个1的位 numnum&(num-1)Go代码 题目&#xff1a;比特位计数思路…

春秋云镜 CVE-2020-21650

春秋云镜 CVE-2020-21650 MyuCMS后台rce 靶标介绍 MyuCMS开源内容管理系统,采用ThinkPHP开发而成的社区商城聚合&#xff0c;插件&#xff0c;模板&#xff0c;轻便快捷容易扩展 其2.2版本中admin.php/config/add方法存在任意命令执行漏洞。 启动场景 漏洞利用 exp /index…

以安全促发展——《数据出境安全评估办法》解读

各国关于数据出境的监管要求一直是各国数据监管的风向标&#xff0c;不仅体现国家对于数据安全的重视程度&#xff0c;也能意会出国家对于数据竞争的态度以及数字经济发展的思路。例如欧盟《通用数据保护条例》&#xff08;GDPR&#xff09;设定的个人数据出境的限制&#xff0…

conda常用命令及国内镜像源

conda命令使用介绍 启动conda source ~/.bashrc帮助目录 conda create -h检查conda版本 conda --version升级当前版本的conda conda update conda环境管理 列出所有的环境 conda info -e conda env list安装一个不同版本的python新环境 conda create --name py27 pytho…

有一种新型病毒在 3Ds Max 环境中传播,如何避免?

3ds Max渲染慢&#xff0c;可以使用渲云渲染农场&#xff1a; 渲云渲染农场解决本地渲染慢、电脑配置不足、紧急项目渲染等问题&#xff0c;可批量渲染&#xff0c;批量出结果&#xff0c;速度快&#xff0c;效率高。 此外3dmax支持的CG MAGIC插件专业版正式上线&#xff0c;…

网络通信原理数据链路层数制转换(第四十一课)

数制概述 数制是表示和计算数值的一种方式,不同的数制使用不同的数字和规则来表示数值。最常见的数制是十进制(也称为阿拉伯数字),使用0-9个数字来表示数值。其他常见的数制包括二进制**(使用0和1表示数值)、八进制(使用0-7表示数值)和十六进制(使用0-9和A-F表示数值…

Linux_10_进程、系统性能和计划任务

目录 1 进程和内存管理1.1 什么是进程1.2 进程结构1.3 进程相关概念1.3.1 物理地址空间和虚拟地址空间1.3.2 用户和内核空间1.3.3 C代码和内存布局之间的对应关系1.3.4 进程使用内存问题1.3.4.1 内存泄漏: Memory Leak1.3.4.2 内存溢出: Memory Overflow1.3.4.3 内存不足: OOM …