Web前端学习:二

news2025/7/19 11:15:12

二一:文字font-size样式

font-size:**px
控制文字大小,可精准控制大小
默认样式medium,中等的
large,大一号
x-large,再大一号
xx-large,再大一号
small,小一号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.myb{
				color: aqua;
				font-size: 20px;
			}
			.myc{
				color: darksalmon;
				font-size: 50px;
			}
			.myd{
				color: olive;
				font-size: large;
			}
		</style>
	</head>
	<body>
		<p class="mya">文字一</p>
		<p class="myb">文字二</p>
		<p class="myc">文字三</p>
		<p class="myd">文字四</p>
	</body>
</html>

二二:文字Fong-weight样式

fong-weight:
控制字体粗细,支持1-1000
bold-粗一号
bolder-在粗一号
light-细一点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p{
				color: maroon;
				font-size: 20px;
			}
			.mya{
				font-weight: bold;
			}
			.myb{
				font-weight: bolder;
			}
			.myc{
				font-weight: lighter;
			}
			.myd{
				font-weight: 900;
			}
		</style>
	</head>
	<body>
		<p class="mya">文字一</p>
		<p class="myb">文字二</p>
		<p class="myc">文字三</p>
		<p class="myd">文字四</p>
	</body>
</html>

二三:文字font-family样式

font-family:“SimSun”
给予字体类型
电脑上右相应字体才会显示出来,没有就无法显示
eg:
宋体(SimSun)
微软雅黑(“Microsoft Yahei”)
Arial
Tahoma
Verdana
华文黑体(STHeiti)、华文细黑(STXihei)
黑体-简(Heiti SC)

写法:

普通写法:
.mya{
	font-family: "SimSun";
	}
特殊写法:
如果没有STHeiti,就PingFang SC,
PingFang SC也没有就SimSun,可无限叠加
.myd{
	font-family:"STHeiti","PingFang SC","SimSun" ;
	}

二四:文字line-height样式

html中,有些元素有默认样式
*号:通配符,选取所有元素,层级最低

line-height:
设定内容在内部的高度位置
当line-height的大小为元素大小时,内容在中心

div{
	height: 200px;
	line-height: 200px;
			}`

可以控制行内元素,但是控制不了块状元素。
支持%比,继承父级的高度来控制
支持数字,但不支持负数

二五:文字font-style样式

italic:使用字体的斜体
oblique:让字体倾斜
在这里插入图片描述

二六:文字font-variant样式及font缩写手法

font-variant:small-caps
把段落设置为小型字体大写字母形式
在这里插入图片描述

二七:相对定位

position: relative;
相对定位:
1、相对自己进行定位
2、不会影响原来的位置,显示的元素会改变位置
left:从左往右移动
right
top
bottom
左右2选1,上下2选1
z-index:z轴,代表层级,支持负数
在这里插入图片描述

二八:绝对定位

position:absolute
绝对定位:
1、脱离标准流
2、元素的位置被后续元素占据,元素显示在后续元素上方
3、根据有定位的父元素进行定位
4、如果父元素没有定位,就会找外层元素直到html
在这里插入图片描述

二九:窗口定位(固定定位)

position: fixed;
根据窗口进行定位
只看窗口,不看父级(页面窗口)
跟着窗口走
在这里插入图片描述

三十:继承定位及默认定位

position: inherit;
继承父级的定位

static:
默认值,即没有定位

三一:元素的display的显示与隐藏

display: none;
让原来的元素消失,位置不会保留
display:block;
让人任何元素变成块状元素的样子
float也可以把元素变成块状元素

三二:display样式深入,inline属性

display:inline;
让任何元素转成行内元素
在这里插入图片描述

三三:display样式深入inline-block属性

display:
显示,控制元素的显示
none – 隐藏
block – 以块状元素进行显示
inline – 以行内元素进行显示
inline-block:行内块元素

行内元素:横着放
块状元素:支持宽高,独占一行
行内块元素:支持宽高设置,可以横着放
在这里插入图片描述

三四:元素百分比单位

单位:
px – 像素 – 绝对单位
% – 百分比 – 相对单位(根据浏览器宽高不一样,显示大小也不一样),常用于全屏,有拉升情况时

%如何计算:
看父级元素,最后会计算折合成像素显示
eg:
设置父级宽度300px,子级宽度50%,则子级宽度为150px
在这里插入图片描述

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

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

相关文章

自定义View练习题目整理

一、动态音频播放柱形图 1、效果图&#xff1a; 2、步骤 &#xff08;1&#xff09;、新建自定义View类&#xff0c;继承View &#xff08;2&#xff09;、重写onDraw()方法&#xff0c;使用画笔和画布循环画一定数量的柱形 Overrideprotected void onDraw(Canvas canvas) {s…

npm install vue2-ace-editor 安装报错

npm install vue2-ace-editor 安装报错&#xff0c;如下图 目录 npm install vue2-ace-editor 安装报错&#xff0c;如下图 &#x1f9e8;&#x1f9e8;&#x1f9e8;解决方法&#xff1a;在命令后面加上 神秘代码 npm install vue2-ace-editor --save --legacy-peer-deps &a…

该抛弃 x86 Linux,改用 64 位的了

如果你想获得安全的体验&#xff0c;你可能不会再继续使用 32 位 Linux 内核。我们有很多 为 32 位系统定制的 Linux 发行版。那么&#xff0c;为什么我想要不鼓励使用 32 位&#xff0c;而升级到 64 位 Linux 呢&#xff1f;有几个原因&#xff0c;其中一个最大的原因&#xf…

【JavaScript】前端实现电子签名:

文章目录一、效果:二、实现:三、扩展一、效果: 二、实现: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"vie…

57 - 深入解析任务调度

---- 整理自狄泰软件唐佐林老师课程 文章目录1. 问题1.1 思考1.2 实例分析&#xff1a;问题分析及解决2. 深入讨论2.1 任务调度的定义2.2 关于调度算法的分类2.3 什么时候进行任务调度2.4 任务的分类2.5 关于优先级调度2.6 问题2.7 调度算法的终极目标2.8 课后扩展1. 问题 系统…

MySQL(二)索引和SQL优化

MySQL进阶MySQL体系结构存储引擎存储引擎特点InnoDB逻辑存储结构MyISAMMemory存储引擎选择索引索引结构二叉树B-TreeBTreeHash索引分类索引语法SQL性能分析工具SQL执行频率慢查询日志profile详情explain索引使用联合索引索引失效情况SQL提示覆盖索引前缀索引单列索引与联合索引…

2023年网红营销10大趋势解读:品牌出海必看

前不久influencermarketinghub发布了《2023年影响者营销基准报告》&#xff0c;报告总结了3500多家营销机构、品牌和其他相关专业人士对当前网红营销现状的看法&#xff0c;以及预测了未来网红营销的一个发展趋势。本期Nox聚星就带领大家详细解读关于2023年网红营销的10大趋势。…

MyBatis学习笔记(三) —— MyBatis核心配置文件详解

3、核心配置文件详解 id是唯一标识&#xff0c;不能重复&#xff0c;但是在真正开发过程中&#xff0c;不可能一个项目中同时使用两个环境&#xff0c;肯定会使用其中的某一个&#xff0c;这时候它的default就比较重要了。 default是设置我们当前使用的默认环境的id <?x…

投票点赞链接制作投票链接在线制作投票图文链接制作点赞

用户在使用微信投票的时候&#xff0c;需要功能齐全&#xff0c;又快捷方便的投票小程序。而“活动星投票”这款软件使用非常的方便&#xff0c;用户可以随时使用手机微信小程序获得线上投票服务&#xff0c;很多用户都很喜欢“活动星投票”这款软件。“活动星投票”小程序在使…

webpack打包基本原理——实现webpack打包核心功能

webpack打包的基本原理 核心功能就是把我们写的模块化代码转换成浏览器能够识别运行的代码&#xff0c;话不多说我们一起来了解它 首先我们建一个空项目用 npm init -y 创建一个初始化的&#xff0c;在跟目录下创建src文件夹&#xff0c;src下创建index.js&#xff0c;add.js…

日本公派访问学者的具体申请流程

公派日本访问学者的具体申请流程&#xff0c;知识人网整理了相关的资料以供大家参考。第一、申请材料一般申请CSC日本访问学者&#xff0c;截止日是每年的1月15号左右&#xff0c;但是学院在1月10号之前就审查材料了。材料包括&#xff1a;CSC网页的报名表&#xff0c;教授邀请…

Stream——集合数据按照某一字段排序

文章目录前言假设业务场景排序前的准备正序排序1、数据集合的判空 Optional.isPresent()2、使用sort排序3、将排序后的数据流转换为list你以为这样就完了&#xff1f;倒序排序前言 之前&#xff0c;针对Stream链式编程中的几个方法做了大致的说明。详情可以参考&#xff1a; J…

限制Linux指定用户访问某个文件夹,禁止其访问指定文件夹

默认情况下用户本身就只能读写执行自己目录下自己创建的文件&#xff0c;自己主目录以外的文件都没有写权限、执行权限&#xff1b;自己主目录以外的目录&#xff0c;则只有r和x权限&#xff0c;没有w权限&#xff0c;对于合法的ssh用户&#xff0c;这样的权限就已经足够了。 否…

Springboot 整合Flowable工作流框架搭建

我们在开发自动化办公软件时经常会遇到各种审批流程功能&#xff0c;这个使用就需要使用到工作流引擎。目前主流的工作流引擎有Activiti、Flowable、camunda&#xff0c;其中Flowable是在Activiti的基础上开发出来的&#xff0c;基于BPMN2.0协议&#xff0c;它包括 BPMN&#x…

Convolutional Neural Networks for Sentence Classification

摘要 We report on a series of experiments with convolutional neural networks (CNN) trained on top of pre-trained word vectors for sentence-level classification tasks. We show that a simple CNN with little hyperparameter tuning and static vectors achieves e…

安装ROS+ROS命令行工具的使用

1.添加ROS软件源 $ sudosh -c echo "deb http;/packages.ros.org/ros/ubuntu $(sb_release -sc) main">/etc/apt/sources.list.d/ros-latest.list 2.添加密钥 $ sudo apt-key adv --keyserver hkp:/ keyserver.ubuntu.com:80 --recv-key C1CF6E31E6BADE8868B17…

我希望在 26 岁时知道的 36 岁时知道的职业作弊代码

当您开始抓住您不具备资格的机会时&#xff0c;您的职业生涯就会发展。我像关在笼子里的狮子一样被困在金融事业中。然后通过一系列离奇的事件&#xff0c;我发明了自己的工作。这使我获得了难得的机会&#xff0c;并建立了最终取代我工作的在线业务。这些作弊码让一些人称之为…

I/O 多路复用:select/poll/epoll

url&#xff1a;9.2 I/O 多路复用&#xff1a;select/poll/epoll | 小林coding &#xff08;仅供自己学习使用&#xff09; 为什么要使用I/O多路复用技术 TCP Socket 调用流程是最简单、最基本的&#xff0c;它基本只能一对一通信&#xff0c;因为使用的是同步阻塞的方…

Linux作为主力机--Manjaro 22.0.4

1、对操作系统的看法 个人是做软件开发的&#xff0c;已经使用Manjaro作为主力机两年多了&#xff0c;真的是特别喜欢这个操作系统。经过两年的打磨&#xff0c;个人16年的惠普老电脑加上这个Manjaro 22.0.4操作系统完全可以再战五年&#xff0c;完全满足日常的办公使用&#…

ctf pwn基础-3

学习pwn的第三天&#xff0c;今天是ret2text。 目录 基础 实例讲解 实例讲解2 基础 ret2text就是ROP中最简单的&#xff0c;然后的意思就是我们利用栈溢出&#xff0c;来修改eip的值&#xff0c;让他输出的时候&#xff0c;输出我们想要执行的本身已有的代码&#xff0c;通常…