【01】htmlcssgit网络基础知识

一、html&css

防脱发神器

一图胜千言
在这里插入图片描述

使用border-box控制尺寸更加直观,因此,很多网站都会加入下面的代码

* {margin: 0;padding: 0;box-sizing: border-box;
}

颜色的 alpha 通道

颜色的 alpha 通道标识了色彩的透明度,它是一个 0~1 之间的取值,0 标识完全透明,1 标识完全不透明

在 css 中使用 rgba 可以为颜色添加 alpha 通道

.alpha {/* 一个完全透明的颜色,等同于 transparent */color: rgba(0, 0, 0, 0);/* 一个完全不透明的颜色,等同于rgb */color: rgba(0, 0, 0, 1);/* 一个半透明的颜色 */color: rgba(0, 0, 0, 0.5);
}

rgba 还可以有多种书写方式,例如rgba(0, 0, 0, 0.5)还可以写为:

  • rgb(0 0 0 / 50%)
  • #00000080

尺寸的百分比

绝大部分可以书写尺寸的地方,都可以书写百分比

百分比是一个相对单位,其相对于元素的参考系,比如:

  • 普通元素的参考系为父元素的内容区域
  • 绝对(固定)定位元素的参考系为父元素中第一个定位元素的 padding 区域

下面罗列常见的百分比情况

css 属性百分比相对于备注
width参考系的宽度
height参考系的高度参考系高度受本身宽度影响时,设置无效
padding参考系的宽度
border参考系的宽度
margin参考系的宽度

最大最小宽高

  • 最大宽度:max-width,最大高度:max-height
  • 最小宽度:min-width,最小高度:min-height

当一个元素的尺寸会自动变化时,设置最大最小宽高,可以让它不至于变得过小或过大。

在实际开发中,我们通常为 PC 端的页面设置一个最小宽度,通常此宽度为设计稿的宽度

html {min-width: 1226px;
}

又或者,我们会为页面中的所有图片设置一个最大宽度,让其不至于超过容器

img {max-width: 100%;
}

什么时候使用绝对定位

下面三个条件满足任何一个时,使用绝对定位:

  1. 元素出现在一个天马行空的位置
  2. 元素是否存在,不影响其他元素的排列
  3. 单个元素在某个区域内水平垂直居中

fixed 和 absolute 的区别

fixed 是绝对定位的一种特殊情况,它们的参考系不一样

  • absolute 参考有定位的父元素
  • fixed 参考视口(viewport)

伪类选择器

css 伪类选择器大全:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes

伪类含义
:link选中未访问过的超链接
:visited选中已访问过的超链接
:hover选中鼠标移入的元素
:active选中鼠标按下的元素
:focus选中聚焦的表单元素
:disabled选中被禁用的表单元素
:checked选中被选中的表单元素
:first-child选中第一个子元素
:last-child选中最后一个子元素
:nth-child(an+b)选中第「an+b」个子元素
a 和 b 是常量,n 的值会从 0 开始依次递增
:first-of-type选中第一个指定类型的子元素
:last-of-type选中最后一个指定类型的子元素
:nth-of-type(an+b)选中第「an+b」个指定类型的子元素
a 和 b 是常量,n 的值会从 0 开始依次递增

contenteditable 属性

该属性是一个布尔属性,可以设置到任何元素上,它可以让该元素变为可编辑的状态

在实际开发中,通常用于制作富文本框

在这里插入图片描述

table 元素

table 元素用于表达一个表格,受 CSS3 的影响,现在已经很少使用了

二、git 常用命令

工欲善其事,必先利其器,Git可以帮助开发人员在项目开发过程中进行代码的版本管理,协作开发和分支管理。

创建 SSH Key

$ ssh-keygen -t rsa -C "youremail@example.com"

配置用户信息

$ git config --global user.name "Your Name"
$ git config --global user.email "email@example.com"

仓库

在当前目录新建一个 Git 代码库

$ git init

新建一个目录,将其初始化为 Git 代码库

$ git init [project-name]

下载一个项目和它的整个代码历史

$ git clone [url]

增加/删除文件

添加指定文件到暂存区

$ git add [file1] [file2] ...

添加指定目录到暂存区,包括子目录

$ git add [dir]

添加当前目录的所有文件到暂存区

$ git add .

添加每个变化前,都会要求确认
对于同一个文件的多处变化,可以实现分次提交

$ git add -p

删除工作区文件,并且将这次删除放入暂存区

$ git rm [file1] [file2] ...

停止追踪指定文件,但该文件会保留在工作区

$ git rm --cached [file]

改名文件,并且将这个改名放入暂存区

$ git mv [file-original] [file-renamed]

代码提交

提交暂存区到仓库区

$ git commit -m [message]

提交工作区自上次 commit 之后的变化,直接到仓库区

$ git commit 

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

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

相关文章

探索什么便签软件好用,可以和手机同步的便签软件

在信息技术日新月异的今天,各类数字工具已经成为我们生活与工作的重要助手。便签软件作为一种简单却高效的辅助工具,悄然改变着人们的记录习惯与时间管理方式。而在诸多便签软件中,能够实现手机与电脑同步功能的产品尤显其独特的价值。那么&a…

数据结构 之 哈希表习题 力扣oj(附加思路版)

哈希表用法 哈希表&#xff1a;键 值对 键&#xff1a;可以看成数组下标&#xff0c;但是哈希表中的建可以是任意类型的&#xff0c;建不能重复,可以不是连续的 值&#xff1a;可以看成数组中的元素&#xff0c;值可以重复&#xff0c;也可以是任意类型的数据 #include<iost…

R语言程序设计(零基础速通R语言语法和常见函数的使用)

目录 1.Rstudio中的一些快捷键 2.R对象的属性 3.R语言中常用的运算符​编辑 4.R的数据结构 向量 如何建立向量&#xff1f; 如何从向量里面提取元素&#xff1f; 矩阵 如何建立矩阵&#xff1f; 如何从矩阵里面提取元素&#xff1f; 数据框 如何建立数据框&#xf…

python-pandas基础学习

可参考&#xff1a; pandas&#xff1a;http://pandas.pydata.org/docs/user_guide/10min.html 一、基础知识 DataFrame 方法&#xff0c;可以将一组数据&#xff08;ndarray、series, map, list, dict 等类型&#xff09;转化为表格型数据 import pandas as pd data {name: …

前端三件套 | 综合练习:模拟抽奖活动,实现一个简单的随机抽取并显示三名获胜者

随机运行结果如下&#xff1a; 参考代码如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><tit…

鸿蒙-自定义组件-语法

目录 语法组成 在学习自定义组件前&#xff0c;先看一下ArkTS的组成 装饰器 用于装饰类、结构、方法以及变量&#xff0c;并赋予其特殊的含义。如上述示例中Entry、Component和State都是装饰器 Entry 表示该自定义组件为入口组件 Component 表示自定义组件 State 表示组…

python基础——字符串的常见操作方法【下标索引,index,count,len,replace,split,strip】

&#x1f4dd;前言&#xff1a; 字符串是一种有序的&#xff0c;允许重复字符串存在的&#xff0c;不可修改的序列 这篇文章主要总结一下python中有关字符串的部分相关知识&#xff0c;以及字符串的常见操作方法&#xff1a; 1&#xff0c;和其他序列极其类似的操作方法 2&…

2024/03/18(网络编程·day4)

一、思维导图 二、广播 广播发送端 #include<myhead.h> int main(int argc, const char *argv[]) {//1、创建套接字int sfd socket(AF_INET,SOCK_DGRAM,0);if(sfd -1){perror("socket error");return -1;}//2、设置允许广播int broadcast 1;if(setsockopt…

嵌入式DSP教学实验箱操作教程:2-20 数模转换实验(模拟SPI总线输出电压值)

一、实验目的 掌握GPIO模拟SPI总线的使用&#xff0c;了解AD5724的芯片特性和使用&#xff0c;并实现基于AD5724输出电压值。 二、实验原理 StarterWare StarterWare是一个免费的软件开发包&#xff0c;它包含了示例应用程序。StarterWare提供了一套完整的GPIO寄存器配置接…

在吗?腾讯云服务器2024降价了61元一年,要么?

腾讯云服务器多少钱一年&#xff1f;61元一年起。2024年最新腾讯云服务器优惠价格表&#xff0c;腾讯云轻量2核2G3M服务器61元一年、2核2G4M服务器99元一年可买三年、2核4G5M服务器165元一年、3年756元、轻量4核8M12M服务器646元15个月、4核16G10M配置32元1个月、312元一年、8核…

QT C++ QButtonGroup应用

//QT 中&#xff0c;按钮数量比较少&#xff0c;可以分别用各按钮的信号和槽处理。 //当按钮数量较多时&#xff0c;用QButtonGroup可以实现共用一个槽函数&#xff0c;批量处理&#xff0c;减少垃圾代码&#xff0c; //减少出错。 //开发平台&#xff1a;win10QT6.2.4 MSVC…

IDEA调试入门指南

IDEA调试前准备 一、准备调试环境 在开始调试之前&#xff0c;确保你的IDEA已经正确安装并配置好。打开你的项目&#xff0c;确保所有的依赖都已正确加载&#xff0c;并且项目能够正常编译和运行。 二、设置断点 断点是调试过程中非常关键的一部分&#xff0c;它允许你在代…

O2OA红头文件流转与O2OA版式公文编辑器基本使用

O2OA开发平台在流程管理中&#xff0c;提供了符合国家党政机关公文格式标准&#xff08;GB/T 9704—2012&#xff09;的公文编辑组件&#xff0c;可以让用户在包含公文管理的项目实施过程中&#xff0c;轻松地实现标准化公文格式的在线编辑、痕迹保留、手写签批等功能。并且可以…

使用PySpider进行IP代理爬虫的技巧与实践

目录 前言 一、安装与配置PySpider 二、使用IP代理 三、IP代理池的使用 四、处理代理IP的异常 五、总结 前言 IP代理爬虫是一种常见的网络爬虫技术&#xff0c;可以通过使用代理IP来隐藏自己的真实IP地址&#xff0c;防止被目标网站封禁或限制访问。PySpider是一个基于P…

15届蓝桥杯备赛(2)

文章目录 刷题笔记(2)二分查找在排序数组中查找元素的第一个和最后一个位置寻找旋转排序数组中的最小值搜索旋转排序数组 链表反转链表反转链表II 二叉树相同的树对称二叉树平衡二叉树二叉树的右视图验证二叉搜索树二叉树的最近公共祖先二叉搜索树的最近公共祖先二叉树层序遍历…

为 java 开发者设计的性能测试框架,用于压测+测试报告生成

拓展阅读 junit5 系列教程 基于 junit5 实现 junitperf 源码分析 Auto generate mock data for java test.(便于 Java 测试自动生成对象信息) Junit performance rely on junit5 and jdk8.(java 性能测试框架。压测测试报告生成。) junitperf junitperf 是一款为 java 开…

回归预测 | Matlab实现SO-BP蛇算法优化BP神经网络多变量回归预测

回归预测 | Matlab实现SO-BP蛇算法优化BP神经网络多变量回归预测 目录 回归预测 | Matlab实现SO-BP蛇算法优化BP神经网络多变量回归预测预测效果基本描述程序设计参考资料 预测效果 基本描述 1.Matlab实现SO-BP蛇算法优化BP神经网络多变量回归预测&#xff08;完整源码和数据) …

婚恋相亲红娘牵线系统功能介绍

婚恋相亲红娘牵线系统是一个综合性的婚恋交友平台&#xff0c;它集成了多种功能以帮助用户找到心仪的伴侣。以下是其主要功能的详细介绍&#xff1a; 用户信息深度分析和匹配&#xff1a;该系统利用大数据和人工智能技术&#xff0c;对用户的基本信息&#xff08;如年龄、身高…

基于HSV色度空间的图像深度信息提取算法FPGA实现,包含testbench和MATLAB辅助验证程序

目录 1.算法运行效果图预览 ​编辑2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 将FPGA结果导入到matlab显示结果如下&#xff1a; matlab的对比测试结果如下&#xff1a; 2.算法运行软件版本 vivado2019.2 matlab2022a…

Pytest 教程:从 0 到 1 搭建 Pytest 接口自动化测试项目

从 0 到 1 搭建 Pytest 接口自动化测试项目 1.创建项目目录 mkdir Pytest-API-Testing-Demo 2.项目初始化 // 进入项目文件夹下cd Pytest-API-Testing-Demo// 创建项目 python 项目虚拟环境python -m venv .env// 启用项目 python 项目虚拟环境source .env/bin/activate 3…