css学习知识总结

一、css与html连接:

可以将css语句放在html内部,一般放在<head>之下,定义在<style>中,格式一般是一个“.”然后加上一个“名称”再加上一个“{}”,再在“{}”内部定义具体的语句。

二、调整元素

2.1 字体类:

 2.1.1 front-size:

 调节字体大小。如:font-size: 200%;

 2.1.2 front-weight: 

 调节字体粗细。如:font-weight: bold;

2.1.3 font-family:

font-family:sans-serif, '黑体';

2.2 方位类:

 2.2.1 text-align:

 调节组件的方位。如:text-align: right; text-align: center; 让组件居于右侧:text-align: right;

 2.2.2 top:

 调节组件上侧方位。如:top: 50%;

 2.2.3 left:

 调节组件左侧方位。如:left:50%;

2.2.4 transform:

 从组件当前位置进行变换,第一个参数是横移,第二个参数是竖移。transform: translate(20%,0%);

2.2.5 margin:

调节组件间的距离,调节距离边界的距离。如:margin: 18px 0。让组件距离右边界60px:margin-right: 60px

2.2.6 改变两个组件横向距离:

.sub {padding-left: 0px;
}.sub input {margin-right: 100px;
}

2.3 颜色类:

 2.3.1 background-color:

 调节元素背景颜色。如:background-color: yellow;

 2.3.2 color:

 调节元素颜色。如: color: red;

2.3.3 background:

用于调节背景颜色。background: rgba(0, 0, 200, 0.3);

2.4 装饰类:

2.4.1 border:

 设置边框。如:1px solid #000000; 第一个参数是粗细,第二个参数是颜色。

2.4.2 display:

将外部边框包围文字。display: inline-block;

2.4.3 box-shadow:

给组件制造阴影。box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);

2.4.4 border-radius:

给方形制造圆角。border-radius: 10px;

2.5交互类:

 2.5.1 cursor:

鼠标移动到组件上形成箭头。cursor: pointer;

三、现成代码

将两个button类型的按钮隔开一定的距离:

.mm {display: flex;justify-content: space-between;margin: 0 5px;
}

第一步:搭建界面(css+html)

如何让组件到达我们预想的位置(例如中央),如何进行组件内部的对齐。

第二步:用flask对各个组件点击事件进行关联

跳转首页,跳转登录界面

如何实现点击某个按钮然后实现跳转?

第三步:存取数据

1、从网页读取到数据,然后存入数据库。

2、回应网页端,从数据库中取出数据,然后显示在网页上。

第四步:页面实时更新

第五步:美化完善

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

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

相关文章

LiveData使用和原理

LiveData使用和原理 本文链接&#xff1a;https://blog.csdn.net/feather_wch/article/details/131797422 文章目录 LiveData使用和原理LiveData使用Transformations LiveData相关类原理粘性事件数据倒灌 问题思考设计模式 要点&#xff1a; 注册监听事件分发生命周期感知粘性…

【springboot】RestTemplate的使用、格式转换、异常处理、拦截器,

RestTemplate提供了一个基于Http客户端库&#xff08;HttpClient&#xff0c;OkHttp等&#xff09;的高层次API&#xff0c;并不是重复制造轮子。 RestTemplate提供了常见的REST请求方案的模版&#xff0c;例如GET请求、POST请求、PUT请求、DELETE请求以及一些通用的请求执行方…

整数拆分(力扣)动态规划 JAVA

给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积 。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。 示例 2: 输入: n 10 输出: 36 解释: 10 3 3 4…

Python应用实例(二)数据可视化(二)

数据可视化&#xff08;二&#xff09; 1.随机漫步1.1 创建RandomWalk类1.2 选择方向1.3 绘制随机漫步图1.4 模拟多次随机漫步1.5 设置随机漫步图的样式 1.随机漫步 使用Python来生成随机漫步数据&#xff0c;再使用Matplotlib以引人瞩目的方式将这些数据呈现出来。随机漫步是…

使用 YOLOv8 和 Streamlit 构建实时对象检测和跟踪应用程序:第 1 部分-介绍和设置

示例:图像上的对象检测 介绍 实时视频中的目标检测和跟踪是计算机视觉的一个重要领域,在监控、汽车和机器人等各个领域都有广泛的应用。 由于需要能够识别和跟踪对象、确定其位置并对它们进行实时分类的自动化系统,对视频帧中的实时对象检测和跟踪的需求日益增加。 在这…

MinIO:开源对象存储解决方案

MinIO是一款开源的云原生对象存储解决方案&#xff0c;旨在提供高性能、可扩展和持久化存储服务。它兼容Amazon S3 API&#xff0c;可以轻松地集成到现有的应用程序中&#xff0c;为用户提供可靠的对象存储和数据管理。本文将介绍MinIO的基本概念、架构设计以及常见的应用场景&…

Java反射

Java中的字节码&#xff1a;Java源代码经过虚拟机编译器编译后产生的文件&#xff08;即扩展为.class的文件&#xff09;&#xff0c;它不面向任何特定的处理器&#xff0c;只面向虚拟机。 1.反射的定义 反射机制 JAVA反射机制是在运行状态中&#xff0c;对于任意一个类&…

GitUI汉化

1.下载汉化文件 下载地址 备用下载地址 https://files.cnblogs.com/files/chenghu/git-gui-zh-master.zip https://files.cnblogs.com/files/chenghu/git-gui-zh-master.zip 2.找到git安装路径 C:\Program Files\Git\mingw64\share\git-gui\lib 3.解压出1下载的文件 复制粘…

VM(CentOS7安装和Linux连接工具以及换源)

目录 一、Linux意义 二、安装VMWare 三、centos7安装 1、正式安装CentOS7&#xff1a; 2、安装不了的解决方案 2.1常见问题——虚拟机开机就黑屏的完美解决办法 3、查看、设置IP地址 ① 查看ip地址&#xff1a;ip addr 或者 ifconfig&#xff0c; 注意与windows环境的区别…

了解区块链---一个去中心化技术

1.假如你是从事区块链的高端技术人员&#xff0c;我从来没有接触过区块链&#xff0c;请你为我讲解下他的概率、原理、应用&#xff1f; 概念&#xff1a; 区块链是一种去中心化的分布式账本技术&#xff0c;它是由一系列区块组成的链式结构&#xff0c;每个区块包含一些交易数…

宋浩线性代数笔记(一)行列式的计算

本帖更新b站宋浩老师的线代网课笔记&#xff0c;内容较为细致详细&#xff0c;参考书用的是科学出版社的第三版&#xff0c;之后会附加同济出版社第六版的教材内容。 &#xff08;字不好看大家将就看吧QAQ&#xff09;

当DevOps遇到AI,黑马迎来3.0时代丨IDCF

随着GhatGPT的爆火&#xff0c;人工智能和研发效能&#xff0c;无疑成为了2023的两个最重要的关键词。大规模语言模型LLM和相关应用的快速发展正在对研发团队的工作方式产生深远影响&#xff0c;这几乎象征着新的生产力革命的到来。 那么&#xff0c;作为一名工程师&#xff0…

java密码强度校验

一、代码 Testpublic void test(){//包含数字、大小写字母&#xff0c;长度10-20位 String regular "^(?.*\\d)(?.*[a-z])(?.*[A-Z]).{10,20}$";String example1 "1234567891";System.out.println(example1.matches(regular)); //falseString exa…

React(2)

题外话&#xff1a;vscode有个插件可以很方便的快速写代码 输入rcc回车 1.组件嵌套 import React, { Component } from reactclass Navbar extends Component{render(){return <div>Navbar</div>} }const Swiper()>{return <div>Swiper</div> }cons…

数据库信息速递 MONGODB 6.0 的新特性,更多的查询函数,加密查询,与时序数据集合 (译)...

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到3群&#xff08;共…

linux安装redis

背景 项目需要 安装redis&#xff0c;不使用root用户,假设使用redis用户。 root准备 安装依赖 yum install gcc安装目录 mkdir /usr/local/redis授权安装目录 注意&#xff0c;先要新建用户 chown -R redis:redis /usr/local/redis 安装 切换用户 下载 下载包地址 h…

Spring实现文件上传,文件上传

第一步&#xff1a;创建jsp文件 创建form表单 提交文件是post 文件上传的表单 服务端能不能获得数据&#xff0c;能 实现单文件上传的步骤&#xff1a; 导入相应的坐标&#xff1a;在pom.xml文件中进行导入 再导入这份&#xff1a; 第二步&#xff0c;在spring-MVC的上传中去配…

中文分词入门:使用IK分词器进行文本分词(附Java代码示例)

1. 介绍 中文分词是将连续的中文文本切分成一个个独立的词语的过程&#xff0c;是中文文本处理的基础。IK分词器是一个高效准确的中文分词工具&#xff0c;采用了"正向最大匹配"算法&#xff0c;并提供了丰富的功能和可定制选项。 2. IK分词器的特点 细粒度和颗粒…

Zookeeper简介及核心概念

一、Zookeeper简介 二、Zookeeper设计目标 三、核心概念 3.1 集群角色 3.2 会话 3.3 数据节点 3.4 节点信息 3.5 Watcher 3.6 ACL 四、ZAB协议 4.1 ZAB协议与数据一致性 4.2 ZAB协议的内容 五、Zookeeper的典型应用场景 5.1数据的发布/订阅 5.2 命名服务 5.3 Master选举 5.4 分…

2023云曦期末复现

目录 WEB sign SSTI serialize WEB sign 有10000个 进行bp爆破 能发现 410 和 414长度 还有 420 410 414存在16进制的字符 拼凑出来为 \x66\x6c\x61\x67\x7b\x61\x63\x63\x39\x39\x66\x39\x30\x34\x66\x30\x65\x61\x66\x61\x34\x31\x63\x30\x36\x34\x33\x36\x38\x31\x3…