web-03

news/2024/11/27 18:41:56/

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.ppmy.cn/news/1550414.html

相关文章

鸿蒙多线程开发——sendable共享容器

1、异步锁机制 在介绍共享容器之前&#xff0c;先介绍异步锁机制。 为了解决多线程并发任务间的数据竞争问题&#xff0c;ArkTS引入了异步锁能力。异步锁可能会被类对象持有&#xff0c;因此为了更方便地在并发实例间获取同一个异步锁对象&#xff0c;AsyncLock对象支持跨线程…

docker-compose部署java服务

文章目录 一、下载安装docker-compose二、编写Dockerfile文件三、编写docker-compose.yml文件配置说明 四、服务启动五、测试与验证 一、下载安装docker-compose 在安装docker时&#xff0c;并不会同时把docker-compose安装好&#xff0c;需要额外安装一下 下载docker-compos…

C语言超详细教程

系列文章目录 文章目录 系列文章目录1 运算符1.1 算术运算符:2 控制语句2.1 条件语句:2.2 循环语句:3 函数3.1 函数的定义与声明:3.2 递归函数:4 指针4.1 指针的定义与使用函数指针:5. 数组与字符串5.1 数组一维数组:相同类型元素的集合(如:多维数组:数组的数组(如:…

道路机器人识别交通灯,马路,左右转,黄线,人行道,机器人等路面导航标志识别-使用YOLO标记

数据集分割 train组66% 268图片 validation集22% 91图片 test集12&#xff05; 48图片 预处理 没有采用任何预处理步骤。 增强 未应用任何增强。 数据集图片&#xff1a; 交通灯 马路 右转 向右掉头 机器人识别 人行横道 黄线 直行或右转 数据集下载&#xff1a; 道路…

React第七节 组件三大属性之 refs 的用法注意事项

1、定义 React 中refs 是允许我们操作DOM 访问组件实例的一种方案。开发人员可以直接使用 refs 访问操作DOM&#xff0c;而不用自身的数据状态&#xff0c;这种方案在实际开发过程中是有必要的&#xff0c;但是不建议通篇使用refs操作DOM&#xff0c;如果是这样&#xff0c;那…

webrtc支持h265

Webrtc播放H265的技术探索(datachannelwasm) - 飞翔天空energy - 博客园 https://github.com/ZLMediaKit/ZLMediaKit/issues/3589 [技术咨询]addStreamProxy 添加拉流代理之后&#xff0c;webrtc协议无法播放&#xff0c;其它协议正常 Issue #1808 ZLMediaKit/ZLMediaKit G…

Python学习——猜拳小游戏

import random player int(input(“请输入&#xff1a;剪刀 0&#xff0c;石头 1&#xff0c;布2”)) computer random.randint(0,2)# print(“玩家输入的是%d&#xff0c;电脑输入的是%d” %(player,computer)) 用于测试 if (player 0) and (computer 0) or (player 1) a…

vue3 发送 axios 请求时没有接受到响应数据

<script setup> import Edit from ./components/Edit.vue import axios from axios import { onMounted,ref } from vue// TODO: 列表渲染 //装数据的列表 const list ref([]) const count ref(0) const getList async () > {//通过发送 /list 请求从后端拿到列表数…