简单的CSS样式

news2024/11/13 11:52:56

样式分为三种

        内部样式：写在html文件里的样式叫内部样式

        内联样式：写在需要的标签中

        外部样式：写在外部css文件里

可以通过不同的选择器来选择设置指定组件的样式：

		<style>
			/* 写在html文件里的样式叫内部样式 */
			/* 选择器 */
			/* ID选择器 */
			#boxa{
				height: 100px;
				width: 100px;
				background-color: skyblue;
				
				/* 字体颜色 */
				color:green;
				/* 字体大小 */
				font-size: 30px;
				/* 字体加粗 数值达到600或bold*/
				font-weight: 800;
				/* 字体居中 */
				text-align: center;
				/* 单行文本垂直居中  行高等于容器的高度*/
				line-height: 100px;
			}
			/* 标签选择器 元素选择器 */
			div{
				height: 100px;
				width: 100px;
			}
			/* 类选择器 */
			.bgred{
				background-color: red;
				/* 不显示 */
				display: none;
			}
		</style>

选择器

        ID选择器：用井号 # 标识，设置指定 id 的样式

        标签选择器：选择对应的标签类型

        类选择器：用点 . 表示选择指定的 class

	<body>
		<!-- 内联样式 -->
		<div style="width: 100px;height: 100px;background-color: pink"></div>
		<div id="boxa">你好</div>
		<div class="bgred"></div>
		<div class="bgred"></div>
	</body>

创建css文件

在外部css文件中设置几种标签和类的样式：块的宽度和高度；几种背景色

十六进制颜色表示

这里提供一个获取不同颜色十六进制颜色值的网站：ColorDrop

里面有很多好看的颜色搭配，点击即可复制颜色值

div{
	height: 100px;
	width: 100px;
}

.red{
	background-color: red;
}

.blue{
	background-color: #89CFF0;
}

.green{
	background-color: #A7FC00;
}

.pink{
	background-color: #F2B5D4;
}

在html文件中声明引入css样式

	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 声明引入css文件 -->
		<link rel="stylesheet" href="css/float.css" />
	</head>

浮动 float

CSS中的浮动样式（float）是一种布局属性，用于控制元素在页面中的位置。通过设置浮动属性，可以使元素沿着其容器的左侧或右侧浮动，并且其他内容将围绕在该元素的周围。

要使用浮动样式，可以为元素添加以下属性：

  1. float: left; - 元素向左浮动。
  2. float: right; - 元素向右浮动。

浮动属性将元素从正常的文档流中移除，并使其从其容器的左侧或右侧浮动。其他内容将沿着浮动元素之后重新排列。

.float{
	float: left;
}

需要注意的是，浮动元素的父级元素也会受到影响。如果一个父级元素包含一个或多个浮动元素，父级元素的高度将坍塌，导致无法包含浮动元素的高度。为了解决这个问题，可以在父级元素中添加一个属性来清除浮动

/*清空浮动*/
.clear-box:after{
	clear: both;
	content: "";
	display: block;
}
	<body>
		<div class="red float"></div>
		<div class="green float"></div>
		<div class="blue float"></div>
		
		<div class="pink" style="width: 500px;height: 300px;"></div>
	</body>

浮动之后的div悬浮于原本的页面之上，不占据空间，同时实现了横向排列

子代选择器

用 > 表示其内部的组件，其中的 :hover 表示鼠标移入的效果

/* 子代选择器 */
#menu>li:hover{
	background-color: #B5B9F1;
}

同时设置多个标签的样式用逗号

下面的CSS代码中的，list-style: none;将列表项的默认样式（通常是项目符号或数字）设置为无。这意味着列表项将没有任何可见的项目符号或数字。

ul,ol,li{
	list-style: none;
	margin: 0;
	padding: 0;
}

列表浮动可以实现横向展示，注意在浮动之后清空浮动，否则会与下方元素产生重叠

列表元素中嵌套列表可实现二级菜单的效果

		<ul id="menu" class="clear-box">
			<li class="float">首页</li>
			<li>新闻</li>
			<li>娱乐</li>
			<li>学习
				<ul class="child">
					<li>Java</li>
					<li>Python</li>
					<li>C++</li>
				</ul>
			</li>
			<li>奥运</li>
		</ul>

将二级菜单设置为隐藏，并在鼠标移入时显示

.child{
	display: none;
	position: absolute;
	left: 0;
}
.child>li{
	padding: 10px 25px;
	width: 60px;
}

.child>li:hover{
	background-color: #89CFF0;
}


#menu>li:hover .child{
	display: block;
}

定位 position

四个属性含义参照物是否占空间
absolute绝对定位参照物是第一个非static定位的父组件，如果找不到，参照物就是html/body；不占空间
relative相对定位参照物是自身原来的位置；占据原来的空间
fixed窗口定位参考物是窗口；不占空间
static流布局不定位
		<div class="red"></div>
		<div class="green" style="position: fixed;bottom: 0px;right: 100px;"></div>
		<div class="pink" style="position: relative;left: 20px;top: 20px;"></div>
		<div class="blue" style="position: absolute;left: 50px;top: 10px;"></div>
		<div class="red"></div>

盒模型

CSS的盒模型是用于描述HTML元素在页面中的布局和尺寸的模型。它将每个HTML元素看作一个矩形盒子，由四个部分组成：内容区域、内边距、边框和外边距。

padding 内边距

margin 外边距

border 边框

    padding: 10px 20px 30px 40px;        四个参数：上、右、下、左
    padding: 10px 20px 40px;       三个参数： 上、左右、下
    padding: 10px 25px;        两个参数：上下、左右

    padding: 10px;        一个参数：四周

注：两个相邻盒子的纵向 外边距 会合并，取最大值

没有任何内容的div计算外边距时只保留一侧

		<div style="margin:100px ;height: 100px; background-color: #F2B5D4;"></div>
		<div style="margin: 40px; background-color: #89CFF0;">
			<div style="margin: 20px;background-color: #A7FC00" ></div>
		</div>
		<div style="margin:100px ;height: 100px; background-color: #F4CBAA;"></div>

练习：登录界面

包含组件：背景图、大标题、用户名输入框、密码框、记住密码复选框、登录按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/login.css" />
	</head>
	<body>
		<div class="background"></div>
		<div class="loginbox" >
			<div class="title">Easy管理系统</div>
			<div class="item">
				<label class="float" for="username">用户名</label>
				<div class="line float">
					<input name="username" type="text" id="username"/>
				</div>
			</div>
			<div class="item">
				<label class="float" for="userpass">密码</label>
				<div class="line float">
					<input name="userpass" type="password" id="userpass"/>
				</div>
			</div>
			<div class="rememberbox">
				<input type="checkbox" name="remember" id="remember" value="true"/>
				<label for="remember">记住密码</label>
			</div>
			
			<div class="btnbox">
				<a href="./index.html">
					<button type="button">登录</button>
				</a>
			</div>
		</div>
	</body>
</html>

CSS文件样式大致包含以下内容：

文本 字体 font-family: 微软雅黑;

        字号大小 font-size: 30px;

        文本居中 text-align: center;

        字体加粗 font-weight: bold;

        颜色 color: #457B9D;

组件 高度 height: 30px;

        宽度 width: 60px;

        背景色 background-color: #89CFF0;

        边界 border: 4px solid #3B89C7;

        圆角 border-radius: 8px;

        隐藏边框 outline: none;

定位 绝对定位 position: absolute;

        距左侧 left: 50%;

        距顶部 top: 30%;

        移动自身单位 transform: translate(-50%,-50%); 可实现绝对居中

        内边距 padding: 5px;

        外边距 margin: 10px 0px;

图片 导入背景图 background-image: url("../image/background.jpeg");

        背景窗口占比 background-size: 100%;

.loginbox{
	border: 2px solid #89CFF0;
	border-radius: 8px;
	position: absolute;
	left: 50%;
	top: 30%;
	/* 绝对居中 */
	transform: translate(-50%,-50%);
	background-color: #F1FAEE;
}

.background{
	width: 100%;
	height: 100%;
	position: absolute;
	background-image: url("../image/background.jpeg");
	background-size: 100%;
}

.float{
	float: left;
}

.clear-box:after{
	clear: both;
	content: "";
}

.loginbox>.title{
	color: #457B9D;
	font-weight: bold;
	font-size: 30px;
	text-align: center;
	padding: 20px 0px;
}

.loginbox label{
	color: #3B89C7;
	font-family: 微软雅黑;
	width: 60px;
	text-align: center;
	display: inline-block;
	padding: 10px;
	margin: 10px 0px;
}

.loginbox input{
	position: relative;
	height: 30px;
	width: 200px;
	font-size: 20px;
	border: none;
	outline: none;
}

.line{
	border: 4px solid #3B89C7;
	border-radius: 5px;
	padding: 5px;
	margin: 10px 0px;
}

.loginbox>.item{
	margin: 10px 40px 0px;
}

.rememberbox{
	margin: 5px 40px;
}

.rememberbox>input{
	transform: translate(20%,20%);
	width: 20px;
	height: 15px;
}

.rememberbox>label{
	font-size: 15px;
	padding: 10px 0px;
}

.loginbox button{
	width: 100px;
	height: 50px;
	text-align: center;
	font-size: 20px;
	border: none;
	background-color: #89CFF0;
	border-radius: 5px;
}

.loginbox button:hover{
	background-color: #457B9D;
}

.loginbox .btnbox{
	text-align: center;
	padding: 0px 0px 30px 0px;
}

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

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

相关文章

PEFT LoRA 介绍（LoRA微调使用的参数及方法）

PEFT LoRA 介绍（LoRA微调使用的参数及方法）

一 PEFT LoRA 介绍 官网简介如下图&#xff1a; 翻译过来是&#xff1a;低秩自适应(LoRA)是一种PEFT方法&#xff0c;它将一个大矩阵在注意层分解成两个较小的低秩矩阵。这大大减少了需要微调的参数数量。 说的只是针对注意力层&#xff0c;其实我自己平时微调操作注意力层多…
阅读更多...
一款功能强大的视频编辑软件会声会影2023

一款功能强大的视频编辑软件会声会影2023

会声会影2023是一款功能强大的视频编辑软件&#xff0c;由加拿大Corel公司制作&#xff0c;正版英文名称为‌Corel VideoStudio。它具备图像抓取和编修功能&#xff0c;可以处理和转换多种视频格式&#xff0c;如‌MV、‌DV、‌V8、‌TV和实时记录抓取画面文件。会声会影提供了…
阅读更多...
微服务上（黑马）

微服务上（黑马）

文章目录 微服务011 认识微服务1.1 单体架构1.2 微服务1.3 SpringCloud 2 微服务拆分2.1 熟悉黑马商城2.2 服务拆分原则2.2.1.什么时候拆2.2.2.怎么拆 2.3 拆分服务2.3.1 拆分商品管理功能模块2.3.2 拆分购物车功能模块 2.4 远程调用2.4.1 RestTemplate2.4.2.远程调用 2.5 总结…
阅读更多...
SpringBoot-21 SpringBoot微服务的发布与部署（3种方式）

SpringBoot-21 SpringBoot微服务的发布与部署（3种方式）

基于 SpringBoot 的微服务开发完成之后&#xff0c;现在到了把它们发布并部署到相应的环境去运行的时候了。 SpringBoot 框架只提供了一套基于可执行 jar 包&#xff08;executable jar&#xff09;格式的标准发布形式&#xff0c;但并没有对部署做过多的界定&#xff0c;而且为…
阅读更多...
25届最近5年广东工业大学自动化考研院校分析

25届最近5年广东工业大学自动化考研院校分析

广东工业大学 目录 一、学校学院专业简介 二、考试科目指定教材 三、近5年考研分数情况 四、近5年招生录取情况 五、最新一年分数段图表 六、初试大纲复试大纲 七、学费&奖学金&就业方向 一、学校学院专业简介 二、考试科目指定教材 1、考试科目介绍 2、指定教…
阅读更多...
【在排序数组中查找元素的第一个和最后一个位置】python刷题记录

【在排序数组中查找元素的第一个和最后一个位置】python刷题记录

R2-分治 有点easy的感觉&#xff0c;感觉能用哈希表 class Solution:def searchRange(self, nums: List[int], target: int) -> List[int]:nlen(nums)dictdefaultdict(list)#初始赋值哈希表&#xff0c;记录出现次数for num in nums:if not dict[num]:dict[num]1else:dict[…
阅读更多...
（深层与双向）循环神经网络

（深层与双向）循环神经网络

一、深层循环神经网络 1、对于循环神经网络 2、对于深层&#xff0c;要得到更多的非线性&#xff0c;就像多层感知机&#xff08;MLP&#xff09;。 &#xff08;1&#xff09;浅层与深层对比 这是具有&#x1d43f;个隐藏层的深度循环神经网络&#xff0c; 每个隐状态都连续…
阅读更多...
【QT】QT 系统相关（事件、文件、多线程、网络、音视频）

【QT】QT 系统相关（事件、文件、多线程、网络、音视频）

一、Qt 事件 1、事件介绍 事件是应用程序内部或者外部产生的事情或者动作的统称。在 Qt 中使用一个对象来表示一个事件。所有的 Qt 事件均继承于抽象类 QEvent。事件是由系统或者 Qt 平台本身在不同的时刻发出的。当用户按下鼠标、敲下键盘&#xff0c;或者是窗口需要重新绘制…
阅读更多...
《python程序语言设计》第6章14题 估算派值 类似莱布尼茨函数。但是我看不明白

《python程序语言设计》第6章14题 估算派值 类似莱布尼茨函数。但是我看不明白

这个题提供的公式我没看明白&#xff0c;后来在网上找到了莱布尼茨函数 c 0 for i in range(1, 902, 100):a (-1) ** (i 1)b 2 * i - 1c a / bprint(i, round(4 / c, 3))结果 #按题里的信息&#xff0c;但是结果不对&#xff0c;莱布尼茨函数到底怎么算呀。
阅读更多...
【计算机网络】TCP协议详解

【计算机网络】TCP协议详解

欢迎来到 破晓的历程的 博客 ⛺️不负时光&#xff0c;不负己✈️ 文章目录 1、引言2、udp和tcp协议的异同3、tcp服务器3.1、接口认识3.2、服务器设计 4、tcp客户端4.1、客户端设计4.2、说明 5、再研Tcp服务端5.1、多进程版5.2、多线程版 5、守护进程化5.1、什么是守护进程5.2…
阅读更多...
Javascript面试基础6（下）

Javascript面试基础6（下）

获取页面所有checkbox 怎样添加、移除、移动、复制、创建和查找节点 在JavaScript中&#xff0c;操作DOM&#xff08;文档对象模型&#xff09;是常见的任务&#xff0c;包括添加、移除、移动、复制、创建和查找节点。以下是一些基本的示例&#xff0c;说明如何执行这些操作&a…
阅读更多...
【网络世界】HTTP协议

【网络世界】HTTP协议

目录 &#x1f308;前言&#x1f308; &#x1f4c1; 概念 &#x1f4c1; URL &#x1f4c2; urlencode 和 urldecode &#x1f4c1; 协议格式 &#x1f4c1; 方法 &#x1f4c2; GET/get &#x1f4c2; POST/post &#x1f4c1; 常见的报头 &#x1f4c1; 状态码 &…
阅读更多...
Web3 职场新手指南：从技能到素养，求职者如何脱颖而出？

Web3 职场新手指南：从技能到素养，求职者如何脱颖而出？

随着 2024 年步入下半年&#xff0c;Web3 行业正在经历一系列技术革新。通过改进的跨链交互机制和兼容性&#xff0c;逐步消除市场碎片化的问题。技术的进步为开发者和用户都打开了新的前景。然而&#xff0c;复杂的技术和快速变化的市场环境也让许多新人望而却步。求职者如何找…
阅读更多...
编译固件 -- 自用

编译固件 -- 自用

编译环境 先安装编译环境 git clone <编译仓库路径> git checkout <编译主分支> 更新/下载 然后就是一样的更新下载 ./scripts/feeds update -a ./scripts/feeds install -a 然后直接编译 feeds/puppies/rom/scripts/make.sh 对应型号 make Vs 这里的对应型号可…
阅读更多...
gitee的fork

gitee的fork

通过fork操作&#xff0c;可以复制小组队长的库。通过复制出一模一样的库&#xff0c;先在自己的库修改&#xff0c;最后提交给队长&#xff0c;队长审核通过就可以把你做的那一份也添加入库 在这fork复制一份到你自己的仓库&#xff0c;一般和这个项目同名 现在你有了自己的库…
阅读更多...
Footprint Analytics 助力 Core 区块链实现数据效率突破

Footprint Analytics 助力 Core 区块链实现数据效率突破

Core 是一个基于比特币并兼容 EVM 的 Layer 1 区块链&#xff0c;正通过其创新解决方案引革新特币金融。作为首个引入非托管 BTC 质押协议及全球首个发行收益型 BTC ETP 产品的区块链&#xff0c;Core 站在了区块链技术的最前沿。通过利用超过 50% 的比特币挖矿哈希算力&#x…
阅读更多...
24暑假算法刷题 | Day22 | LeetCode 77. 组合，216. 组合总和 III，17. 电话号码的字母组合

24暑假算法刷题 | Day22 | LeetCode 77. 组合，216. 组合总和 III，17. 电话号码的字母组合

目录 77. 组合题目描述题解 216. 组合总和 III题目描述题解 17. 电话号码的字母组合题目描述题解 77. 组合 点此跳转题目链接 题目描述 给定两个整数 n 和 k&#xff0c;返回范围 [1, n] 中所有可能的 k 个数的组合。 你可以按 任何顺序 返回答案。 示例 1&#xff1a; 输…
阅读更多...
python爬虫入门小案例

python爬虫入门小案例

python爬虫 以下内容仅供学习交流,请勿用作其他用途,若涉及隐私和版权问题,请及时联系我删除 闲来无事,学了学爬虫小知识,适合入门,文笔拙劣,还望见谅 爬虫是什么: 爬取网页上的文字,图片,视频,音频 自动化操作浏览器,比如填写表单,打卡,提高工作效率爬虫的注意事项: 爬虫…
阅读更多...
lua 游戏架构 之 游戏 AI （九）ai_mgr Ai管理

lua 游戏架构 之 游戏 AI （九）ai_mgr Ai管理

定义ai_mgr的类&#xff0c;用于管理游戏中实体的AI组件。 先定义 AI行为枚举和优先级&#xff1a; lua 游戏架构 之 游戏 AI &#xff08;八&#xff09;ai_tbl 行为和优先级-CSDN博客https://blog.csdn.net/heyuchang666/article/details/140712839?spm1001.2014.3001.55…
阅读更多...
MySQL环境的配置文件json

MySQL环境的配置文件json

突然了解到&#xff0c;使用json文件去进行环境的配置&#xff0c;这样修改参数的时候就只需要去改json文件中的内容&#xff0c;不需要去修改代码中的内容&#xff0c;其他人的MySQL和我的MySQL也不同&#xff0c;这时其他人只需要修改json文件中的内容&#xff0c;清晰明了&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023