当前位置: 首页 > news >正文

CSS笔记(一)炉石传说卡牌设计1

目标

我要通过html实现一张炉石传说的卡牌设计

问题

其中必须就要考虑到各个元素的摆放,形状的调整来达到满意的效果。通过这个联系来熟悉一下CSS的基本操作。

1️⃣ 基本概念

在CSS里面有行元素,块元素,内联元素,常见的行元素有buttoninput等,块级元素有divh1p等,内联元素有span

  • 行元素:多个行元素放在一起会自动排成一行,不会垂直排列。且行元素不能设置widthheight
  • 块元素:独占一行,可以设置 width, height, margin, 和 padding
  • 内联元素:可以与其他元素在一行显示,也能设置widthheight

可以通过设置style = "display:inline" 来改变某个元素的显示方式,例如:

<div style="display: inline;">这是行内显示的内容</div>
<div style="display: inline;">这是另一个行内内容</div>

该代码就把块级元素的显示方式改成了行元素显示方式。

  • inline:行元素
  • block:块元素
  • inline-block:内联元素
  • none:不设置

2️⃣ flex

flex就是用来对容器内的元素进行对齐排列的
语法说明:

  • dispaly:flex
  • flex-direction
    • row将内部元素横向排列
      哈哈哈

    • column将内部元素纵向排列
      在这里插入图片描述

  • justify-content:垂直排列
  • align-items:水平排列

justify-content参数

首先我们要知道主轴方向,flex-direction:row的主轴方向是从左到右,flex-direction:column的主轴方向是从上到下。当然我们也可以让主轴方向从右到左,例如row-reverse

  • flex-end
    在这里插入图片描述
    这里主轴方向是column从上到下,而flex-end表示靠着底部排列元素
    我们把主轴方向改成row看看有什么不同在这里插入图片描述
    显然内部元素贴着右边排列有点像右对齐的感觉,但是这里我们发现内部元素被拉伸到和容器的高度一致。原因是我们没有设置align-items,如果我们设置该参数则
    在这里插入图片描述
    其根本原因是align-items如果不被设置,则它的默认值就是stretch,它的作用就是把元素拉伸跟容器一样的属性。
  • space-between:子元素之间的空间平均分布
  • space-around:每个子元素周围的间距相等,两侧分配的间距是子元素间距的一半。
  • space-evenly:子元素之间的空间和子元素到容器边缘的空间都均匀分布

flex-wrap:wrap

  • 子元素在容器空间不足时换行。
  • 新行的排列方向与主轴方向一致(从左到右或从上到下)。
    一般默认是nowrap即容器空间不足也不换行如下:在这里插入图片描述
    这样十分拥挤,也会让元素丧失原本的长宽属性,如果改成wrap即十分美观:
    在这里插入图片描述

3️⃣ 居中显示

<style>body{width:200px;height:300px;position:relative;}//水平居中显示.box1{position:absolute;top:5px;left:50%;//偏移到容器的对称轴transform:translateX(-50%)//让图片的对称轴和容器的对称轴重合}//垂直居中显示.box2{position:absolute;top:50%;//偏移到容器的对称轴transform:translateY(-50%)//让图片的对称轴和容器的对称轴重合}
</style>

4️⃣ transform

在我要插入一张图片到左上角的时候,我得到了以下的知识

	<style>transform-oringin:top left // 以图片的左上角作为缩放点transform:scale(0.1)  // 缩小十倍</style>

其次transform属性会被覆盖,如果我要让一张缩小10倍后的图片居中我需要把缩小和坐标偏移写在一起。

	<style>transform-oringin:top left // 以图片的左上角作为缩放点transform:scale(0.1) translateX(-50%) // 把两句写在一起,不然两句只能生效一句</style>

相关文章:

CSS笔记(一)炉石传说卡牌设计1

目标 我要通过html实现一张炉石传说的卡牌设计 问题 其中必须就要考虑到各个元素的摆放&#xff0c;形状的调整来达到满意的效果。通过这个联系来熟悉一下CSS的基本操作。 1️⃣ 基本概念 在CSS里面有行元素&#xff0c;块元素&#xff0c;内联元素&#xff0c;常见的行元…...

怎么在宿主机上通过ssh连接虚拟机 VirtualBox 中的linux系统

通过 Xshell 连接 VirtualBox 中的 linux 虚拟机&#xff0c;您需要确保以下几个步骤都正确配置&#xff1a; 1. 配置 VirtualBox 网络 您需要将 VirtualBox 虚拟机的网络适配器设置为支持 SSH 连接的模式&#xff1a; 打开 VirtualBox&#xff0c;选择您的 Ubuntu 虚拟机&am…...

Spire.PDF for .NET【页面设置】演示:打开 PDF 时自动显示书签或缩略图

用户打开 PDF 文档时&#xff0c;他们会看到 PDF 的初始视图。默认情况下&#xff0c;打开 PDF 时不会显示书签面板或缩略图面板。在本文中&#xff0c;我们将演示如何设置文档属性&#xff0c;以便每次启动文件时都会打开书签面板或缩略图面板。 Spire.PDF for .NET 是一款独…...

241125学习日志——[CSDIY] [InternStudio] 大模型训练营 [17]

CSDIY&#xff1a;这是一个非科班学生的努力之路&#xff0c;从今天开始这个系列会长期更新&#xff0c;&#xff08;最好做到日更&#xff09;&#xff0c;我会慢慢把自己目前对CS的努力逐一上传&#xff0c;帮助那些和我一样有着梦想的玩家取得胜利&#xff01;&#xff01;&…...

Centos 7 安装 Docker 最新版本

文章目录 一、卸载旧版本二、安装最新版本docker三、问题解决3.1 启动docker报错3.2 启动容器报错 一、卸载旧版本 #如果之前安装过旧版本的Docker&#xff0c;可以使用下面命令卸载 yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest …...

JavaScript的基础数据类型

一、JavaScript中的数组 定义 数组是一种特殊的对象&#xff0c;用于存储多个值。在JavaScript中&#xff0c;数组可以包含不同的数据类型&#xff0c;如数字、字符串、对象、甚至其他数组。数组的创建有两种常见方式&#xff1a; 字面量表示法&#xff1a;let fruits [apple…...

网络安全-------防止被抓包

1.Ios应用网络安全之https 安全套接字层 (Secure Socket Layer, SSL) 是用来实现互联网安全通信的最普遍的标准。Web 应用程序使用 HTTPS&#xff08;基于 SSL 的 HTTP&#xff09;&#xff0c;HTTPS 使用数字证书来确保在服务器和客户端之间进行安全、加密的通信。在 SSL 连接…...

【Linux】认识进程以及进程的状态

目录 认识进程 基本概念 查看进程 父子进程 进程的状态 进程排队 运行状态 阻塞状态 挂起状态 僵尸进程 孤儿进程 认识进程 基本概念 有些教材上会说&#xff1a;正在运行的程序就是进程。这并没有错误&#xff0c;但是太过于笼统。现在我们深入到Linux底层来了解…...

Parker派克防爆电机在实际应用中的安全性能如何保证?

Parker防爆电机确保在实际应用中的安全性能主要通过以下几个方面来保证&#xff1a; 1.防爆外壳设计&#xff1a;EX系列电机采用强大的防爆外壳&#xff0c;设计遵循严格的防爆标准&#xff0c;能够承受内部可能发生的爆炸而不破损&#xff0c;利用间隙切断原理&#xff0c;防…...

11超全局变量php

超级全局变量是指在php任意脚本下都可以使用 PHP 超级全局变量列表: $GLOBALS&#xff1a;是PHP的一个超级全局变量组&#xff0c;在一个PHP脚本的全部作用域中都可以访问。 $_SERVER&#xff1a;$_SERVER 是一个PHP内置的超级全局变量,它是一个包含了诸如头信息(header)、路…...

路由器中继与桥接

一 . 背景 现在的路由器大多数已经开始支持多种网络连接模式&#xff0c;以下将以TP-Link迷你无线路由器为例进行展开介绍。在TP-Link迷你无线路由器上一般有AP&#xff08;接入点&#xff09;模式&#xff0c;Router&#xff08;无线路由&#xff09;模式&#xff0c;Repeate…...

[算法] 前缀函数与KMP算法

前缀函数 前缀函数 n x t [ i ] nxt[i] nxt[i]定义为 子串 s [ 1 … i ] s[1\dots i] s[1…i]最长的相等的真前缀与真后缀的长度。 计算前缀函数 scanf("%s",b1);lbstrlen(b1);int j0;nxt[1]0;for(int i2;i<lb;i){while(j&&b[j1]!b[i]) jnxt[j];if(b[j…...

电子学习中的关键游戏化元素

游戏化彻底改变了电子学习领域&#xff0c;提供了一种使学习具有吸引力、互动性和有效性的方法。通过将类似游戏的功能集成到教育平台中&#xff0c;教育工作者可以增强动力&#xff0c;提高知识记忆&#xff0c;并创造动态的学习体验。游戏化的关键要素为设计与学习者产生共鸣…...

通过端口测试验证网络安全策略

基于网络安全需求&#xff0c;项目中的主机间可能会有不同的网络安全策略&#xff0c;这当然是好的&#xff0c;但很多时候&#xff0c;在解决网络安全问题的时候&#xff0c;同时引入了新的问题&#xff0c;如k8s集群必须在主机间开放udp端口&#xff0c;否则集群不能正常的运…...

Mac配置maven环境及在IDEA中配置Maven

Mac配置maven环境及在IDEA中配置Maven 1. 介绍 Maven是一款广泛用于Java等JVM语言项目的工具&#xff0c;它以项目对象模型&#xff08;POM&#xff09;为基础进行项目管理&#xff0c;通过POM文件来定义项目信息和依赖关系。同时&#xff0c;它也是构建自动化工具&#xff0…...

TCP流套接字编程

TCP流套接字与UDP数据报套接字对比 API介绍 TCP协议核心的特点是面向字节流&#xff0c;是通过读取数据&#xff08;单位字节&#xff09;来完成通信。 TCP套接字与UDP套接字不同的点在于TCP是通过建立连接&#xff0c;使用输入流和输出流的方式完成通信。 ServerSocket 是…...

《硬件架构的艺术》笔记(七):处理字节顺序

介绍 本章主要介绍字节顺序的的基本规则。&#xff08;感觉偏软件了&#xff0c;不知道为啥那么会放进《硬件架构的艺术》这本书&#xff09;。 定义 字节顺序定义数据在计算机系统中的存储格式&#xff0c;描述存储器中的MSB和LSB的位置。对于数据始终以32位形式保存在存储器…...

IDEA2024如何创建Web项目以及配置Tomcat

在Web项目的开发过程中&#xff0c;Tomcat作为一款开源的Servlet容器&#xff0c;扮演着至关重要的角色。它不仅能够提供稳定的运行环境&#xff0c;还支持多种Java EE规范&#xff0c;为开发者提供了丰富的功能支持。因此&#xff0c;正确配置Tomcat服务器对于确保Web项目的顺…...

「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用

1. 谷歌浏览器安装及使用流程 1.1 准备篡改猴扩展程序包。 因为谷歌浏览器的扩展商城打不开&#xff0c;所以需要准备一个篡改猴压缩包。 其他浏览器只需打开扩展商城搜索篡改猴即可。 没有压缩包的可以进我主页下载。 也可直接点击下载&#xff1a;Chrome浏览器篡改猴(油猴…...

java学习记录12

ArrayList方法总结 构造方法 ArrayList() 构造一个初始容量为 10 的空列表。 ArrayList(int initialCapacity) 构造一个具有指定初始容量的空列表。 实例方法 add(int index, E element) 在此list中的指定位置插入指定元素。 ArrayList<Integer> array…...

网络协议之DNS

一、DNS概述 域名系统&#xff08;Domain Name System&#xff0c;缩写&#xff1a;DNS&#xff09;是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库&#xff0c;能够使人更方便地访问互联网。DNS使用TCP和UDP端口53&#xff0c;通过递归查询请求的方式来…...

第02章_MySQL环境搭建(基础)

1. MySQL 的卸载 1.1 步骤1&#xff1a;停止 MySQL 服务 在卸载之前&#xff0c;先停止 MySQL8.0 的服务。按键盘上的 “Ctrl Alt Delete” 组合键&#xff0c;打开“任务管理器”对话 框&#xff0c;可以在“服务”列表找到“MySQL8.0” 的服务&#xff0c;如果现在“正在…...

反向代理模块

1 概念 1.1 反向代理概念 反向代理是指以代理服务器来接收客户端的请求&#xff0c;然后将请求转发给内部网络上的服务器&#xff0c;将从服务器上得到的结果返回给客户端&#xff0c;此时代理服务器对外表现为一个反向代理服务器。 对于客户端来说&#xff0c;反向代理就相当于…...

【强化学习的数学原理】第05课-蒙特卡洛方法-笔记

学习资料&#xff1a;bilibili 西湖大学赵世钰老师的【强化学习的数学原理】课程。链接&#xff1a;强化学习的数学原理 西湖大学 赵世钰 文章目录 一、通过例子介绍蒙特卡洛二、 MC Basic 算法介绍三、MC Basic 算法例子例1&#xff1a;MC Baxic算法例2&#xff1a;episode le…...

Spring源码(十三):Spring全系列总结

Spring总结篇,不同于之前抽丝剥茧式地纵向深入源码,本次从横向的角度出发,希望可以带个读者一个完全不同的Spring视角。 2024年重置版,搞点不一样的东西。希望通过本篇的内容,将之前的文章全部给串起来。 相关前文: Spring Boot启动加载Spring Web请求处理流程Spring上…...

算法日记 33 day 动态规划(打家劫舍,股票买卖)

今天来看看动态规划的打家劫舍和买卖股票的问题。 上题目&#xff01;&#xff01;&#xff01;&#xff01; 题目&#xff1a;打家劫舍 198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金…...

从零开始打造个人博客:我的网页设计之旅

✅作者简介&#xff1a;2022年博客新星 第八。热爱国学的Java后端开发者&#xff0c;修心和技术同步精进。 &#x1f34e;个人主页&#xff1a;Java Fans的博客 &#x1f34a;个人信条&#xff1a;不迁怒&#xff0c;不贰过。小知识&#xff0c;大智慧。 ✨特色专栏&#xff1a…...

用python将一个扫描pdf文件改成二值图片组成的pdf文件

使用墨水屏读书现在似乎越来越流行&#xff0c;这确实有一定的好处&#xff0c;例如基本不发热&#xff0c;电池续航时间超长&#xff0c;基本不能游戏所以有利于沉浸式阅读&#xff0c;还有不知道是不是真的有用的所谓防蓝光伤害。但是&#xff0c;如果阅读的书籍是扫描图片组…...

Electron开发构建工具electron-vite(alex8088)添加VueDevTools(VitePlugin)

零、介绍 本文章的electron-vite指的是这个项目&#x1f449;electron-vite仓库&#xff0c;electron-vite网站 本文章的VueDevTools指的是VueDevTools的Vite插件版&#x1f449;https://devtools.vuejs.org/guide/vite-plugin 一、有一个用electron-vite创建的项目 略 二、…...

服务器数据恢复—raid5阵列热备盘上线失败导致EXT3文件系统不可用的数据恢复案例

服务器数据恢复环境&#xff1a; 两组分别由4块SAS硬盘组建的raid5阵列&#xff0c;两组阵列划分的LUN组成LVM架构&#xff0c;格式化为EXT3文件系统。 服务器故障&#xff1a; 一组raid5阵列中的一块硬盘离线。热备盘自动上线替换离线硬盘&#xff0c;但在热备盘上线同步数据…...

网络安全基础——网络安全法

填空题 1.根据**《中华人民共和国网络安全法》**第二十条(第二款)&#xff0c;任何组织和个人试用网路应当遵守宪法法律&#xff0c;遵守公共秩序&#xff0c;遵守社会公德&#xff0c;不危害网络安全&#xff0c;不得利用网络从事危害国家安全、荣誉和利益&#xff0c;煽动颠…...

go-rod vs Selenium:自动化测试工具的比较与选择

自动化测试是软件开发过程中的关键环节&#xff0c;它能够帮助我们发现缺陷、验证功能并提高软件质量。随着Web技术的快速发展&#xff0c;市场上出现了多种自动化测试工具&#xff0c;其中Selenium和go-rod是两个备受关注的选择。本文将从多个维度对这两个工具进行比较&#x…...

Ubuntu20.04+ROS 进行机械臂抓取仿真:环境搭建(一)

目录 一、从官网上下载UR机械臂 二、给UR机械臂添加夹爪 三、报错解决 本文详细介绍如何在Ubuntu20.04ROS环境中为Universal Robots的UR机械臂添加夹爪。首先从官方和第三方源下载必要的软件包&#xff0c;包括UR机械臂驱动、夹爪插件和相关依赖。然后&#xff0c;针对gazeb…...

Pytorch微调深度学习模型

在公开数据训练了模型&#xff0c;有时候需要拿到自己的数据上微调。今天正好做了一下微调&#xff0c;在此记录一下微调的方法。用Pytorch还是比较容易实现的。 网上找了很多方法&#xff0c;以及Chatgpt也给了很多方法&#xff0c;但是不够简洁和容易理解。 大体步骤是&…...

PPT分享 | IBM集团业务流程架构顶层规划-订单到交付-销售到回款方案

PPT下载链接见文末~ IBM业务流程规划方法是一套结构化、体系化的流程设计理论&#xff0c;其企业流程框架&#xff08;EPF&#xff09;是一种用于企业业务流程架构设计梳理的方法论。 一、IBM业务流程规划方法的核心 IBM的BPM&#xff08;业务流程管理&#xff09;流程管理体…...

后端并发编程操作简述 Java高并发程序设计 六类并发容器 七种线程池 四种阻塞队列

目录 并发集合 1. ConcurrentHashMap&#xff1a; 2. CopyOnWriteArrayList&#xff1a; 3. CopyOnWriteArraySet&#xff1a; 4. BlockingQueue系列&#xff1a; 5. ConcurrentSkipListMap 和 ConcurrentSkipListSet&#xff1a; 6. ConcurrentLinkedDeque&#xff1a;…...

基于LLama_factory的Qwen2.5大模型的微调笔记

Qwen2.5大模型微调记录 LLama-facrotyQwen2.5 模型下载。huggingface 下载方式Modelscope 下载方式 数据集准备模型微调模型训练模型验证及推理模型导出 部署推理vllm 推理Sglang 推理 LLama-facroty 根据git上步骤安装即可&#xff0c;要求的软硬件都装上。 llama-factory运行…...

resnet50,clip,Faiss+Flask简易图文搜索服务

一、实现 文件夹目录结构&#xff1a; templates -----upload.html faiss_app.py 前端代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widt…...

亚信安全与飞书达成深度合作

近日&#xff0c;亚信安全联合飞书举办的“走近先进”系列活动正式走进亚信。活动以“安全护航信息化 共筑数字未来路”为主题&#xff0c;吸引了众多数字化转型前沿企业的近百位领导参会。作为“走近先进”系列的第二场活动&#xff0c;本场活动更加深入挖掘了数字化转型的基础…...

Spring框架特性及包下载(Java EE 学习笔记04)

1 Spring 5的新特性 Spring 5是Spring当前最新的版本&#xff0c;与历史版本对比&#xff0c;Spring 5对Spring核心框架进行了修订和更新&#xff0c;增加了很多新特性&#xff0c;如支持响应式编程等。 更新JDK基线 因为Spring 5代码库运行于JDK 8之上&#xff0c;所以Spri…...

.net 8使用hangfire实现库存同步任务

C# 使用HangFire 第一章:.net Framework 4.6 WebAPI 使用Hangfire 第二章:net 8使用hangfire实现库存同步任务 文章目录 C# 使用HangFire前言项目源码一、项目架构二、项目服务介绍HangFire服务结构解析HangfireCollectionExtensions 类ModelHangfireSettingsHttpAuthInfoUs…...

python VS c++

一、语法特点 Python&#xff1a; 语法简洁、优雅&#xff0c;代码可读性极强&#xff0c;采用缩进来表示代码块&#xff0c;摒弃了像 C 那样使用大括号的传统方式&#xff0c;使得代码看上去十分清晰简洁。例如&#xff1a; ​ if 5 > 3:print("5大于3") elif 5 …...

windows C#-属性

属性提供了一种将元数据或声明性信息与代码(程序集、类型、方法、属性等)关联的强大方法。将属性与程序实体关联后&#xff0c;可以使用称为反射的技术在运行时查询该属性。 属性具有以下属性&#xff1a; 属性将元数据添加到您的程序中。元数据是有关程序中定义的类型的信息…...

Redis常见面试题总结(上)

Redis 基础 什么是 Redis&#xff1f; Redis &#xff08;REmote DIctionary Server&#xff09;是一个基于 C 语言开发的开源 NoSQL 数据库&#xff08;BSD 许可&#xff09;。与传统数据库不同的是&#xff0c;Redis 的数据是保存在内存中的&#xff08;内存数据库&#xf…...

小鹏汽车智慧材料数据库系统项目总成数据同步

1、定时任务处理 2、提供了接口 小鹏方面提供的推送的数据表结构&#xff1a; 这几个表总数为100多万&#xff0c;经过条件筛选过滤后大概2万多条数据 小鹏的人给的示例图&#xff1a; 界面&#xff1a; SQL: -- 查询车型 select bmm.md_material_id, bmm.material_num, bm…...

风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计

风尚云网前端学习&#xff1a;一个简易前端新手友好的HTML5页面布局与样式设计 简介 在前端开发的世界里&#xff0c;HTML5和CSS3是构建现代网页的基石。本文将通过一个简单的HTML5页面模板&#xff0c;展示如何使用HTML5的结构化元素和CSS3的样式特性&#xff0c;来创建一个…...

论文阅读:A fast, scalable and versatile tool for analysis of single-cell omics data

Zhang, K., Zemke, N.R., Armand, E.J. et al. A fast, scalable and versatile tool for analysis of single-cell omics data. Nat Methods 21, 217–227 (2024). 论文地址&#xff1a;https://doi.org/10.1038/s41592-023-02139-9 代码地址&#xff1a;https://github.com…...

【从零开始的LeetCode-算法】43. 网络延迟时间

有 n 个网络节点&#xff0c;标记为 1 到 n。 给你一个列表 times&#xff0c;表示信号经过 有向 边的传递时间。 times[i] (ui, vi, wi)&#xff0c;其中 ui 是源节点&#xff0c;vi 是目标节点&#xff0c; wi 是一个信号从源节点传递到目标节点的时间。 现在&#xff0c;…...

一文理解 Python 编程语言中的 .strip() 方法

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ Python 中的 strip() 方法&#xff1a;初学者友好指南 在 Python 中&#xff0c;strip() 是一个极为实用的字符串方法&#xff0c;主要用于移除字符串首尾的特定字符。默认情况下&#xff0c;它会清除…...

solr 远程命令执行 (CVE-2019-17558)

漏洞描述 Apache Velocity是一个基于Java的模板引擎&#xff0c;它提供了一个模板语言去引用由Java代码定义的对象。Velocity是Apache基金会旗下的一个开源软件项目&#xff0c;旨在确保Web应用程序在表示层和业务逻辑层之间的隔离&#xff08;即MVC设计模式&#xff09;。 Apa…...