web-03

CSS回顾

选择器

标签选择器

标签{}

ID选择器

标签中定义ID属性。

#ID值{}

类选择器

标签中使用class属性

.类名{}

关于DIV/span

div任意的大小的长方形,大小css: width, height控制。—换行

span-- 一行内

CSS常用属性

width/height

宽度/高度

定义: xxxpx(固定好的) , xx%(与容器大小比例有关)

image-20241117091353450

font-

字体样式

font-size
  • 54px
  • 2em; --倍数
font-family

宋体/华文行楷

font-weight

字体加粗—bold

color

字体颜色

  • 英文单词
  • #十六进制
  • rgb(red, green ,blue) 0~255

background-

背景

-color

颜色

-image

背景图片

-repeat

背景图片是否重复

  • x-repeat
  • y-repeat
  • no-repeat
-size

背景图片大小

  • cover
  • 100% 100%
-position

背景图片位置

border-

边框

-top
-right
-bottom
-left
-width
-color
-style

solid/dash

简写
border :  4px red solid;
border-colapse

边框是否合并,表格–默认分离

margin-

与边(浏览器)的距离

-top
-right
-bottom
-left
居中
margin-left: auto;
margin-right: auto;margin: 0 auto 0 auto;

text-

文本处理

text-decoration
text-decoration: none;
text-align
  • left
  • right
  • center

CSS的引入方式

项目结构

image-20241117094036781

内部引用

本页面有效

<head><style>选择器{}</style>
</head>

image-20241117094715171

image-20241117094745377

image-20241117095252155

内嵌式

	<body><div><h1 style="color: yellow;">今天天气蓝天白云???</h1><h1>下雨了</h1></div></body>

外部引用

image-20241117100059595

image-20241117100302183

盒子模型

页面布局问题

image-20241117110537948

image-20241117110659900

image-20241117110923217

image-20241117111326226

CSS其它属性

border-radius

有弧度的图像

image-20241117114232085
#outId{width: 400px;height: 400px;border: 5px blue solid;margin: 0 auto 0 auto;border-radius: 200px 200px 200px 200px;
}

伪类

选择器:hover

#inId:hover{background-image: url('../img/libai_bk.jpg');background-size: 100% 100%;}

CSS布局

绝对位置

多个平面

#inId{width: 200px;height: 200px;border: 3px blue solid;position: fixed; /*只和浏览器有关*/z-index: 999;/* left: 100px;top: 0px; */right: 100px;/* left: 100px; */bottom: 100px;/* top:100px; */
}

image-20241117141925528

鼠标样式

image-20241117142616084

水平方向左右布局

float

float: left; 朝左浮动

clear: left:

image-20241117160257980

flex

display

justify-content

flex-wrap

#div01{width: 300px;height: 200px;background-color: blue;
}#div02{width: 300px;height: 200px;background-color: red;
}
#div03{width: 300px;height: 200px;background-color: yellow;
}.main{display: flex;justify-content: flex-start;flex-wrap: nowrap;
}

flex-wrap

#div01{width: 300px;height: 200px;background-color: blue;
}#div02{width: 300px;height: 200px;background-color: red;
}
#div03{width: 300px;height: 200px;background-color: yellow;
}.main{display: flex;justify-content: flex-start;flex-wrap: nowrap;
}

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

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

相关文章

Excel求和如何过滤错误值

一、问题的提出 平时&#xff0c;我们在使用Excel时&#xff0c;最常用的功能就是求和了&#xff0c;一说到求和你可能想到用sum函数&#xff0c;但是如果sum的求和区域有#value #Div等错误值怎么办&#xff1f;如下图&#xff0c;记算C列中工资的总和。 直接用肯定会报错&…

蓝桥杯每日真题 - 第22天

题目&#xff1a;&#xff08;卡片&#xff09; 题目描述&#xff08;12届 C&C B组B题&#xff09; 解题思路&#xff1a; 该问题要求用数字卡片从 1 开始拼出整数&#xff0c;直到某一时刻不能拼出时停止。要确定拼到哪个最大整数&#xff0c;需要统计 每个数字“1”被用…

Ubuntu20.04 Rk3588 交叉编译ffmpeg7.0

firefly 公司出的rk3588的设备&#xff0c;其中已经安装了gcc 交叉编译工具&#xff0c;系统版本是Ubuntu20.04。 使用Ubuntu20.04 交叉编译ffmpeg_ubuntu下配置ffmpeg交叉编译器为arm-linux-gnueabihf-gcc-CSDN博客文章浏览阅读541次。ubuntu20.04 交叉编译ffmpeg_ubuntu下配…

python代码制作数据集的测试和数据质量检测思路

前言 本文指的数据集为通用数据集&#xff0c;并不单是给机器学习领域使用。包含科研和工业领域需要自己制作数据集的。 首先&#xff0c;在制作大型数据集时&#xff0c;代码错误和数据问题可能会非常复杂。 前期逻辑总是简单的&#xff0c;库库一顿写&#xff0c;等排查的时…

Windows系统编程 - 进程遍历

文章目录 前言进程的遍历CreateToolhelp32SnapshotProcess32FirstProcess32Next进程遍历 总结 前言 各位师傅好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解进程遍历的相关知识点 进程的遍历 快照&#xff1a;使用vmware虚拟机的时候&#xff0c;经常需要配置环境服务…

【GD32】(三) ISP基本使用

0 前言 有一块GD32的板子不知道为啥用着用着就下载不了程序了&#xff0c;没办法&#xff0c;只能另寻他法。作为STM32的平替&#xff0c;GD32的功能和STM32基本是一致的&#xff0c;所以也可以使用ISP来下载程序。于是就开始复活这块板子。 1 BOOT模式 对于熟悉STM32开发的人…

【SKFramework框架核心模块】3-2、音频管理模块

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享QQ群&#xff1a;398291828小红书小破站 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 【Unity3D框架】SKFramework框架完全教程《全…

开源项目-如何更好的参与开源项目开发

开源之谜-提升自我核心竞争力 一、寻找适合自己的开源项目二、像坐牢一样闭关修炼三、最后的实践 开源代码对所有人开放&#xff0c;开发者可以基于现有代码进行扩展和创新&#xff0c;而不是从零开始&#xff0c;参与开源项目可以提升自我的技术能力&#xff0c;丰富个人的经历…

利用c语言详细介绍下插入排序

插入排序&#xff0c;被称为直接插入排序。它的基本思想是将一个记录插入到已经排好序的有序表中&#xff0c;从而一个新的、记录数增 1 的有序表。 一、图文介绍 我们还是使用数组【10&#xff0c;5&#xff0c;3&#xff0c;20&#xff0c;1]&#xff0c;排序使用升序的方式&…

STL——string类常用接口说明

目录 一、string类的介绍 二、string类常用接口的使用说明 1.成员函数 ​编辑 2.迭代器 3.容量 一、string类的介绍 下面是string类的文档对string类的介绍 1.string类是表示字符序列的对象 2.标准字符串类通过类似于标准字符容器的接口为此类对象提供支持&#xff0c…

Excel的图表使用和导出准备

目的 导出Excel图表是很多软件要求的功能之一&#xff0c;那如何导出Excel图表呢&#xff1f;或者说如何使用Excel图表。 一种方法是软件生成图片&#xff0c;然后把图片写到Excel上&#xff0c;这种方式&#xff0c;因为格式种种原因&#xff0c;导出的图片不漂亮&#xff0c…

2024年亚太地区数学建模大赛A题-复杂场景下水下图像增强技术的研究

复杂场景下水下图像增强技术的研究 对于海洋勘探来说&#xff0c;清晰、高质量的水下图像是深海地形测量和海底资源调查的关键。然而&#xff0c;在复杂的水下环境中&#xff0c;由于光在水中传播过程中的吸收、散射等现象&#xff0c;导致图像质量下降&#xff0c;导致模糊、…

【数据分享】2024年我国省市县三级的住宿服务设施数量(8类住宿设施/Excel/Shp格式)

宾馆酒店、旅馆招待所等住宿服务设施的配置情况是一个城市公共基础设施完善程度的重要体现&#xff0c;一个城市住宿服务设施种类越丰富&#xff0c;数量越多&#xff0c;通常能表示这个城市的公共服务水平越高&#xff01; 本次我们为大家带来的是我国各省份、各地级市、各区…

一文学习Android系统核心服务ServiceManager

ServiceManager 是 Android 系统中核心的系统服务注册与发现机制&#xff0c;它在 Android Framework 层扮演服务注册中心的角色。它允许进程通过它注册、查询和使用系统服务&#xff0c;实现进程间通信 (IPC) 的基础架构。 ServiceManager 的作用 服务注册&#xff1a;应用程…

DMA理论篇

DMA理论篇 简介 传统的数据传输都是需要CPU来实现&#xff0c;从一个地方拷贝到另一个地方&#xff1b;而DMA(Direct Memory Access)则不完全依赖CPU&#xff0c;DMA更新芯片SOC的一个控制器&#xff0c;他可以控制数据从内存中传输到另一个地方(外设、soc其它模块)&#xff…

SpringBoot 集成 html2Pdf

一、概述&#xff1a; 1. springboot如何生成pdf&#xff0c;接口可以预览可以下载 2. vue下载通过bold如何下载 3. 一些细节&#xff1a;页脚、页眉、水印、每一页得样式添加 二、直接上代码【主要是一个记录下次开发更快】 模板位置 1. 导入pom包 <dependency><g…

IDEA怎么定位java类所用maven依赖版本及引用位置

在实际开发中&#xff0c;我们可能会遇到需要搞清楚代码所用依赖版本号及引用位置的场景&#xff0c;便于排查问题&#xff0c;怎么通过IDEA实现呢&#xff1f; 可以在IDEA中打开项目&#xff0c;右键点击maven的pom.xml文件&#xff0c;或者在maven窗口下选中项目&#xff0c;…

webStorm安装

一、webStorm安装 简介 Webstorm是一款非常受欢迎的优秀开发工具&#xff0c;跟vscode同誉为卧龙凤雏编辑器&#xff0c;是97%开发人员的理想编辑器&#xff0c; 尤其是webstorm&#xff0c;焕然一新的外观&#xff0c;新的导航功能&#xff0c;githob拉取等&#xff0c;更是备…

案例研究|阿特斯的JumpServer分布式部署和多组织管理实践

苏州阿特斯阳光电力科技有限公司&#xff08;以下简称为阿特斯&#xff09;是一家集太阳能光伏组件制造和为全球客户提供太阳能应用产品研发、设计、制造、销售的专业公司。 阿特斯集团总部位于加拿大&#xff0c;中国区总部位于江苏省苏州市。通过全球战略和多元化的市场布局…