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

前端基础之CSS

news 来源：原创 2025/8/7 16:43:15

基本语法规范

引入方式

1.内部引入

     <style>p{color:blue ;font-size:30px;}</style>

2.行级引入

    <p style =  "color : green ;font-size : 40px;">hello ,wyx</p><p>hello , wyx1</p><h1>hello , wyx2</h1>

3.外部样式引入

 <link rel = "stylesheet"  href  = "./demo1.css">

选择器

1.类选择器

 <p class = "hello">hello ,wyx</p><p class = "hello1">hello , wyx1</p><h1 class = "play game">hello , wyx2</h1>

.hello{color:red;
}.play{color:green;
}.game{font-size:30px;
}

在第三行的play和game是两个类名分别代表不同的属性

2.id选择器

 <p id = "hello">hello ,wyx</p><h1 id = "play">hello , wyx2</h1>

#hello{color:red;
}#play{color:green;
}

3.通配符选择器：通常用于浏览器默认样式

*{background-color: beige;
}

此处为背景色

4.复合选择器（几个标签套几层）

例子1：

 <style>ol li{color : red;}</style>

 <ol><li>hh1</li><li>hh2</li><li>hh3</li></ol>

例子2：

    <ol class = "h"><li>hh1</li><li>hh2</li><li>hh3</li></ol>

     <style>.h li{color : red;}</style>

5.伪类选择器

a:hover -> 鼠标放在链接上时显示的颜色

a:active -> 鼠标点击时显示的颜色

    <style>a{color:red;}a:hover{color:green;}a:active{color:blue;}</style>

字体设置

font-family :"微软雅黑"

font-size: 30px （字体大小）

font-weight : normal bold bolder lighter 600 (设置字体粗细)

font-style : normal italic（斜体） oblique（斜体，斜得更厉害）

text-align : left center right (居左居中居右)

text-indent: 30px 2em (文本缩进)

text-decoration: underline none (文本装饰：下划线与不用下划线)-> 超链接

line-height: 200px （行间距）

<hr> : 分割线

背景设置

background-color: red

background-image: url(../image.png)

background-repeat: no-repeat repeat-x or y （图片重复）

background-position : 100px 200px

background-size : 100px 200px

边框与圆角矩形和圆

     div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 20px;}

solid 是用来添加这个大盒子的边框的， border-radius ：20px （边框角的弧度）

  div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 20px  40px  40px  20px;}

左上角 -> 右上角 -> 右下角 -> 左下角（弧度）

生成圆形边框：正方形+50%弧度

div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 50%;}

页边距padding：边框与文字的间距

div{width : 400px;height: 400px;border: 2px  green solid;border-radius: 50%;padding:  30px  20px  30px 30px;box-sizing : border-box;}

这里的padding指的是页边距从上开始顺时针

box-sizing ：页边距不再撑大盒子

外边距margin:块与块之间的距离，边框距离上左等距离...

 div{width : 100px;height: 100px;border: 2px  green solid;border-radius: 20px; margin: 100px 5px 5px 5px;}

上开始顺时针

 div{width : 100px;height: 100px;border: 2px  green solid;border-radius: 20px; margin: auto;}

这里的margin:auto 代表框在中间位置

元素形式

1.块级元素（单独占一行）

2.行内元素（不单独占一行）

将行内元素——>块级元素

         a{display: block;}

前端基础之CSS

基本语法规范引入方式 1.内部引入 <style>p{color:blue ;font-size:30px;}</style> 2.行级引入 <p style "color : green ;font-size : 40px;">hello ,wyx</p><p>hello , wyx1</p><h1>hello , wyx2</h1> 3.外…...

编程日记 2025/8/7 16:43:15

【Linux网络】DNS与ICMP

DNS(Domain Name System) DNS是一整套从域名映射到IP的系统。 DNS背景 TCP/IP使用IP地址和端口号来确定网络上的一台主机的一个程序。但是IP地址不方便记忆。于是人们发明了一种叫主机名的东西，是一个字符串，并且使用hosts文件来描述主机名和IP地址的…...

编程日记 2025/8/7 16:41:02

第二十七天打卡

一些函数 for i in range(2, 10000):if is_prime(i):print(i) if ...: 这是 Python 里的条件判断语句，当 is_prime(i) 的返回值为 True 时，就会执行 if 语句块里的代码。 func.__name__ 的作用 func.__name__ 是 Python 中函数对象的一个特殊属性&am…...

编程日记 2025/8/6 11:17:48

38-日语学习小程序

系统功能特点： 技术栈: springBootVueMysqlUni-app 功能点: 用户端管理员端用户端: 1.首页: 轮播图展示、N2词汇列表、网站公告列表 2.学习模块: 有五十音图词汇语法 3.社区模块: 可进行发帖也可查看帖子进行回复可查看小组 4.我的: N2词汇(点击查看详情…...

编程日记 2025/8/3 16:49:54

信贷风控笔记6——风控常用指标（面试准备14）

一、PSI： 1.计算过程：变量分箱10-20箱；统计各分箱内样本占比； 算各个分箱的index（实际占比-预期占比）*ln（实际占比/预期占比）； 将各分箱index求和得PSI 2.情况分类&…...

编程日记 2025/8/6 14:39:24

UDP三种通信方式

单播（Unicast） 单播是最常见的通信方式，数据从一个发送方传输到一个特定的接收方。发送方将数据包发送到接收方的IP地址和端口号，接收方通过监听指定的端口接收数据。单播适用于一对一的通信场景。 import java.net.DatagramPac…...

编程日记 2025/8/7 16:36:39

Windows运维工具批处理版

测试环境：windows10 必看： 1.新建记事本，另存为：文件类型所有文件，文件名运维.bat，编码ansi，复制代码，保存，双击运行 2.有的功能需要输入管理员密码，如果没…...

编程日记 2025/8/7 16:38:05

无需配置光猫，使用网管交换机配合路由器的IPTV功能实现单线复用

一、背景弱电箱和电视柜只预留了一根网线，路由器放在电视柜，想实现既可以上网又可以正常观看iptv，本文提供了一种方法。二、准备工作 1、带iptv功能的路由器；2、水星sg105pro网管交换机；3、网线若干； …...

编程日记 2025/8/7 16:34:20

Elasticsearch 官网阅读之 Term-level Queries

Term-level Queries 参考：https://www.elastic.co/docs/reference/query-languages/query-dsl/query-dsl-exists-query 一、Term Query Term Query 是 term 精准查询。需要注意的是，在进行 Term Query 的时候，要避免 text 类型的字段&#x…...

编程日记 2025/8/7 16:39:42

医疗大模型技术演进与行业应用全景

摘要本文系统梳理医疗大模型技术架构的三大演进阶段，深度解析Transformer架构优化、多模态融合、模型压缩等核心技术突破。结合Google Med-PaLM、启真医疗大模型等16个典型行业案例，揭示医疗大模型在诊断辅助、药物研发、医院管理等九大场景的应用成效。基于权威评测数据，…...

编程日记 2025/8/7 16:34:23

【软考 McCabe度量法】

McCabe度量法（McCabe’s Cyclomatic Complexity）是由Thomas McCabe提出的一种用于衡量程序模块环路复杂性的软件度量方法。它通过分析代码的控制流结构来评估程序的复杂度，帮助开发者识别难以维护或测试风险较高的代码区域。一、McCabe度量法…...

编程日记 2025/8/7 16:36:15

LabVIEW光谱信号仿真与数据处理

在光谱分析领域，LabVIEW 凭借其图形化编程、丰富函数库及强大数据处理能力，成为高效工具。本案例将介绍如何利用 LabVIEW 仿真光谱信号，并对实际采集的光谱数据进行处理，涵盖信号生成、数据采集、滤波、分析及显示等环节。一…...

编程日记 2025/8/7 16:34:12

从零开始认识 Node.js：异步非阻塞的魅力

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，用于在服务器端运行 JavaScript 代码。它的设计目标是让开发者能够用 JavaScript 构建高性能、可扩展的网络应用。以下是关于 Node.js 的详细介绍： 1. 核心特点事件驱动与非阻塞 I/O&…...

编程日记 2025/8/6 21:49:33

ECMAScript 2018（ES2018)：异步编程与正则表达式的深度进化

1.版本背景与发布发布时间：2018年6月，由ECMA International正式发布，标准编号为ECMA-262 9th Edition。历史意义：作为ES6之后的第三次年度更新，ES2018聚焦于异步编程、正则表达式和对象操作的标准化，推动…...

编程日记 2025/8/4 6:03:50

【gitee 初学者矿建仓库】

简易的命令行入门教程: Git 全局设置: git config --global user.name "你的名字"触摸 git config --global user.email "你的邮箱"创建 git 仓库: mkdir codestore cd codestore git init -b "main" touch README.md # 选择运行 git add REA…...

编程日记 2025/8/7 16:34:13

Java 类和对象

文章目录类和对象实例化对象this构造和初始化封装访问修饰限定符包自定义包 static代码块类和对象 Java当中一切皆对象对象是什么呢？ 比如是一个人，手机等怎么描述对象呢？ 可以用类描述对象，可以理解类为一个模版，用…...

编程日记 2025/8/3 18:05:22

湖北理元理律师事务所：科学债务管理模型构建实录

债务问题本质是资源错配问题。湖北理元理律师事务所基于400案例的司法大数据，提炼出一套“三阶九步”债务管理模型，本文从技术视角解析其运作逻辑与实操价值。模型架构：从诊断到执行的全周期管理阶段一：债务体检（1…...

编程日记 2025/8/6 17:27:40

JavaScript vs Python 用于 Web Scraping（2025）：终极对比指南

1. 引言在不断发展的 Web Scraping 领域，选择合适的编程语言对于项目的成功至关重要。虽然 JavaScript 和 Python 在 2025 年仍然是 Web Scraping 领域的热门选择，但它们各自具备不同的优势和挑战。本指南将深入分析 JavaScript 和 Python 的核心特性…...

编程日记 2025/8/2 13:35:31

数据结构day3

一、gdb调试 gcc -g main.c linklist.c // 对两个.c文件进行编译,生成 a.out 文件 gdb a.out //调试可执行文件 a.out b linklist.c:36 // 在该.c文件第 36 行设置断点 r // 运行程序,但会在断点前停…...

编程日记 2025/8/7 16:39:43

VSCode launch.json 配置参数详解

使用 launch.json 配置调试环境时，会涉及到多个参数，用于定义调试器的行为和目标执行环境。以下是一些常用的配置参数： 1、"type" ：指定调试器的类型，例如 "node" 表示 Node.js 调试器&#xff0…...

编程日记 2025/7/30 20:14:00

[已解决] LaTeX “Unicode character“ 报错 (中文字符处理)

问题： 写 LaTeX 文档，特别是包含中文时，经常遇到类似下图的 “Unicode character XXXXXX” 报错 (X) Unicode character 本 (U672C) LaTeX [行 xx, 列 x] (X) Unicode character 报 (U62A5) LaTeX [行 xx, 列 x] ...这通常意味着我们的 LaTe…...

编程日记 2025/8/7 16:36:13

c++成员函数返回类对象引用和直接返回类对象的区别

c成员函数返回类对象引用和直接返回类对象的区别成员函数直接返回类对象（返回临时对象，对象拷贝） #include <iostream> class MyInt { public:int value;//构造函数explicit MyInt(int v0) : value(v){}//加法操作,返回对象副本&…...

编程日记 2025/8/7 16:41:40

python项目参考文献

技术范围：SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：免费功能设计、开题报告、任务书、中期检查PPT、系统功能实现、代码编写、论文编写和辅导、论文…...

编程日记 2025/8/6 12:10:39

Go语言实现链式调用

在 Go 语言中实现链式调用（Method Chaining），可以通过让每个方法返回对象本身（或对象的指针）来实现。这样每次方法调用后可以继续调用其他方法。示例：实现字符串的链式操作假设你想对一个字符串连续执行…...

编程日记 2025/8/1 12:52:10

深入解析SpringMVC：从入门到精通

上文了解到SpingBoot的相关知识，此文开启Sping家族下的新篇章 1. 什么是SpringWebMVC？ 官方对于SpringMVC的描述是这样的： 什么是Servlet呢? Servlet 是⼀种实现动态页面的技术.准确来讲Servlet是⼀套JavaWeb开发的规范，或者说…...

编程日记 2025/8/6 22:44:41

Java-Collections类高效应用的全面指南前言一、Collections 类概述二、Collections 类的基础方法2.1 排序操作2.1.1 sort方法2.1.2 reverse方法2.1.3 shuffle方法 2.2 查找与替换操作2.2.1 binarySearch方法2.2.2 max和min方法2.2.3 replaceAll方法三、Collections 类的高级应…...

编程日记 2025/8/3 5:16:00

微软家各种copilot的AI产品：Github copilot、Microsoft copilot

背景大家可能听到很多copilot，比如 Github Copilot，Microsoft Copilot、Microsoft 365 Copilot，有什么区别 Github Copilot：有网页版、有插件（idea、vscode等的插件），都是面向于程序员的。Mi…...

编程日记 2025/8/3 1:17:05

JAVA EE_HTTP

为什么意气风发的少年，总是听不进去别人的劝解。 ----------陳長生. ❀主页：陳長生.-CSDN博客❀ 📕上一篇：JAVA EE_网络原理_数据链路层-CSDN博客 1.HTTP 1.1.HTTP是什么 H…...

编程日记 2025/8/3 18:31:19

SEO 优化实战：ZKmall模板商城的 B2C商城的 URL 重构与结构化数据

在搜索引擎算法日益复杂的今天，B2C商城想要在海量信息中脱颖而出，仅靠优质商品和营销活动远远不够。ZKmall模板商城以实战为导向，通过URL 重构与结构化数据优化两大核心策略，帮助 B2C 商城实现从底层架构到搜索展示的全面升级&…...

编程日记 2025/8/4 5:43:10

使用HtmlAgilityPack采集墨迹天气中的天气数据

需要解析对应的HTML源码： <div class"left"><div class"wea_alert clearfix"><ul><li><a href "https://tianqi.moji.com/aqi/china/jiangxi/hukou-county" >< span class"level level_2&qu…...

编程日记 2025/7/16 5:41:31

广和通L610模块通过AT指令访问服务器方案：嵌赛使用

实现步骤及关键点： 网络连接配置 ATCGDCONT1,"IP","APN名称" // 设置APN ATCGACT1,1 // 激活PDP上下文 ATCGATT1 // 附着GPRS网络 HTTP协议支持验证 L610支持HTTP客户端功能，关键指…...

编程日记 2025/8/3 21:19:50

nodejs快速入门到精通1

参考 nodejs快速入门到精通菜鸟教程-nodejs nodejs官方文档原因视频免费资料收费笔记还是自己写吧安装 nodejs官网 windows下： #查看nodejs版本 node -v #查看npm版本 npm -v #设置npm为淘宝镜像源 npm config set registry https://registry.npmmirror.…...

编程日记 2025/7/28 20:11:36

Linux下软件安装

一、软件安装方式在 Linux 系统中，常见的软件安装方式有以下几种： 包管理器安装（如 yum、apt） 这是最便捷的安装方式，通过系统自带的包管理器从官方软件源下载并安装软件。 # CentOS/RHEL系统使用yum安装 yum insta…...

编程日记 2025/8/5 1:19:30

React Fiber 架构深度解析：时间切片与性能优化的核心引擎

文章目录前言一、Fiber 架构的诞生背景二、Fiber 架构的核心概念1. Fiber 节点2. Fiber 节点的结构3. 双缓存机制4. 增量渲染与优先级调度三、时间切片技术详解1. 时间切片的定义与原理2. 时间切片与 JavaScript 事件循环3. 时间切片的实现方式4. 时间切片的优势四、Fiber 架…...

编程日记 2025/8/3 20:30:01

mcp学习笔记

MCP（Model Context Protocol）是一种由Anthropic推出的开放协议，旨在统一大型语言模型（LLM）与外部数据源/工具之间的交互。其核心组件包括 MCP Client、MCP Server 和 Function Calling 机制，三者协…...

编程日记 2025/8/5 8:14:54

鸿蒙北向源码开发: 检查应用接口dts文件api规范性

开源鸿蒙5.0.2对应的api版本是14 5.0社区仓有工具检查接口规范性报告工具: interface/sdk-js/build-tools/api_check_plugin api_check_plugin是什么? 在解释api_check_plugin是什么之前得先知道应用调用的api接口都是文件名后缀为.d.ts的文件,这些文件内部声明了arkts的a…...

编程日记 2025/8/6 23:22:42

Redis设计与实现——分布式Redis

Redis Sentinel（哨兵） Sentinel 的工作机制故障检测（Failure Detection） 主观下线（Subjective Down）：单个 Sentinel 实例检测到主节点在30 秒内无响应，标记其为 SDOWN。客观下线…...

编程日记 2025/8/5 16:04:24

【Redis】Hash 哈希

文章目录常用命令hsethgethmgethexistshkeyshvalshgetallhdelhlenhsetnxhincrbyhincrbyfloat 内部编码应用场景 Redis 存储键值对，也就是 key - value，不过同时也允许 value 也为键值对，但此时为了避免冲突，为 field - value PS…...

编程日记 2025/8/7 11:43:55

【matlab技巧】通过手绘的方法设计二维运动轨迹，附MATLAB程序

代码提供了一种直观的方式来使用鼠标在图形窗口中绘制线条，同时能够记录并显示用户绘制的轨迹坐标。用户通过左键点击绘制点，右键点击结束绘制，适合用于简单的图形交互和数据可视化。文章目录代码作用运行MATLAB源代码代码详解代码作用这…...

编程日记 2025/8/4 17:02:52

游戏引擎学习第290天:完成分离渲染

game_sim_region.cpp：在BeginSim中移除EntityOverlapsRectangle调用现在我们接近一个关键点，虽然还没完全结束，但我们已经把所有东西迁移到了一个新概念上——即那些临时创建的控制器结构，称为“脑”（brains&#xf…...

编程日记 2025/8/4 21:54:51

uniapp-商城-61-后台新增商品（添加商品到数据库）

完成商品的布局，完成商品的属性添加，最后的目的还是要完成数据添加，将我们前台的数据添加后台的数据库。 1、界面 2、点击提交完成商品添加点击下方的提交按钮，将数据添加到数据库。 onSubmit 使用该函数---见3 <view cla…...

编程日记 2025/8/4 21:22:28

深入浅出IIC协议 - 从总线原理到FPGA实战开发 -- 第一篇：I2C总线协议深度解剖

第一篇：I2C总线协议深度解剖副标题 : 两根线如何征服千亿设备？详解硬件工程师必须掌握的通信奥义 1. 为什么I2C仍是嵌入式经典？ 1.1 总线拓扑的哲学拓扑对比图 SPI需4线N片选 vs I2C仅2线级联 UART点对点 vs I2C多主从架构成本控制实…...

编程日记 2025/8/2 20:31:12

QT之LayOut布局

文章目录 QFormLayoutQGridLayoutQFormLayout、QGridLayout、QHBoxLayout、QVBoxLayout综合案例用QFormLayout 代替界面左边部分的QGridLayout QFormLayout #include "widget.h"#include <QFormLayout> #include <QLineEdit>Widget::Widget(QWidget *p…...

编程日记 2025/8/3 1:19:39

ubuntu 24.04安装ros1 noetic

为了后续能够找到安装方法，记录一下： 参考如下链接安装： https://www.reddit.com/r/ROS/comments/158icpy/compiling_ros1_noetic_from_source_on_ubuntu_2204/ 安装步骤如下： 1.获取apt 包 sudo apt-get install python3-ros…...

编程日记 2025/8/6 23:04:32

动态规划-64.最小路径和-力扣(LetCode)

一、题目解析从左上角到右下角使得数字总和最小且只能向下或向右移动二、算法原理 1.状态表示我们需要求到达[i,j]位置时数字总和的最小值，所以dp[i][j]表示：到达[i,j]位置时，路径数字总和的最小值。 2.状态转移方程到达[i,j]之前要先…...

编程日记 2025/8/6 19:46:45

Python爬虫（29）Python爬虫高阶：动态页面处理与云原生部署全链路实践（Selenium、Scrapy、K8s）

目录引言：动态爬虫的技术挑战与云原生机遇一、动态页面处理：Selenium与Scrapy的协同作战1.1 Selenium的核心价值与局限1.2 Scrapy-Selenium中间件开发1.3 动态分页处理实战：京东商品爬虫二、云原生部署：Kubernetes架构设计与优化…...

编程日记 2025/7/26 16:55:51

FauxGen：一款由 CodeBuddy 主动构建的假数据生成器

我正在参加CodeBuddy「首席试玩官」内容创作大赛，本文所使用的 CodeBuddy 免费下载链接：腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴在前端开发中，经常需要一些「假数据」来模拟真实接口，便于开发阶段的界面构建和功能测试…...

编程日记 2025/8/4 1:51:03

chrome 浏览器插件 myTools, 日常小工具。

1. 起因， 目的: 比如，chatgpt, google， 打开网页，就能直接输入文字，然后 grok 就不行，必须用鼠标点一下，才能输入文字。对我而言，是个痛点！写个插件，自动点…...

编程日记 2025/8/3 17:36:14

从代码学习深度学习 - 词嵌入（word2vec）PyTorch版

文章目录前言1. 为什么需要词嵌入？2. 早期尝试：独热向量 (One-Hot Vectors)独热向量的局限性3. 自监督的 word2vec4. 跳元模型 (Skip-Gram Model)4.1. 训练5. 连续词袋 (CBOW) 模型5.1. 训练总结前言自然语言处理（NLP）是人工智能领域中一个充满活力和挑战的分支。要让计…...

编程日记 2025/7/31 22:59:43

手写tomcat：基本功能实现（4）

逻辑架构 HTTP 请求与 Socket： 左侧的 “HTTP 请求” 箭头指向 “socket”，表示客户端发送的 HTTP 请求通过 socket 传输到服务器。Socket 负责接收请求，并提取出其中的请求路径（如 /first）和请求方法（如…...

编程日记 2025/8/3 15:52:48