前端路线--HTML篇（day05）

最新推荐文章于 2024-09-14 15:26:51 发布
最新推荐文章于 2024-09-14 15:26:51 发布
阅读量77 收藏
点赞数
分类专栏： 前端 文章标签： html 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yan9_9/article/details/122315612
版权
本文详细介绍了CSS中的背景属性，包括背景颜色、背景图片、背景平铺、背景定位、背景附着、精灵图、背景图片大小、背景简写、背景透明以及列表样式和盒模型的边框、内边距和外边距。通过实例代码展示了如何实现各种效果，帮助开发者更好地理解和运用这些属性。
摘要由CSDN通过智能技术生成

背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 200px;

			/*背景颜色三种表示方式，同颜色*/
			background-color: red;
			background-color: #f00;
			background-color: rgb(255,0,0);
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>
</body>
</html>

背景图片

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 600px;
			height: 600px;
			border:1px solid #000;
			float: left;
		}
		.box2{
			width: 600px;
			height: 600px;
			border:1px solid #000;
			float: left;

			background-image: url(img/aa.jpeg);
			/*背景图片*/
			/*背景图片不占用盒子空间*/
		}
	</style>
</head>
<body>
	<div class="box1">
		<img src="img/aa.jpeg" alt="">Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus nisi explicabo dolor porro enim, eum maiores aperiam, corrupti doloremque voluptatem assumenda est veritatis, illo quaerat eius? Nihil animi quis, saepe?
	</div>
	<div class="box2">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat unde quibusdam nisi, quas qui dignissimos magnam, deserunt a voluptatem asperiores hic, vel necessitatibus quis sequi quisquam. Vero eius itaque est.
	</div>
</body>
</html>

背景平铺

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box2{
			width: 600px;
			height: 600px;
			border:1px solid #000;

			background-image: url(img/aa.jpeg);
			/*背景图片*/
			/*背景图片不占用盒子空间*/

			background-repeat: no-repeat;
			/*背景图片是否平铺：不平铺*/
		}
	</style>
</head>
<body>
	<div class="box2">
		
	</div>
</body>
</html>

背景定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box2{
			width: 600px;
			height: 600px;
			border:1px solid #000;

			background-image: url(img/aa.jpeg);
			/*背景图片*/
			/*背景图片不占用盒子空间*/

			background-repeat: no-repeat;
			/*背景图片是否平铺：不平铺*/


			background-position: 0px 0px;
			/*背景图片定位：x轴坐标、Y轴坐标*/
			background-position: 100% 50%;
							/*支持百分比*/
			background-position: center bottom;
							/*支持单词坐标：top、left、right、bottom、center*/

			background-position: 100px;
			/*如果只写一个值，表示X轴坐标，Y轴默认上下居中*/
		}
	</style>
</head>
<body>
	<div class="box2">
		
	</div>
</body>
</html>

背景附着

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 800px;
			height: 400px;
			margin: 100px auto;
			background-color: #f00;
		}
		.box2{
			width: 800px;
			height: 400px;
			margin: 100px auto;
			background-color: #f0f;
		}
		.box3{
			width: 800px;
			height: 400px;
			margin: 100px auto;
			background-color: #ff0;
		}

		body{
			background-image: url(img/banner.jpg);

			background-attachment: fixed;
			/*背景图片附着*/
		}
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

精灵图

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 16px;
			height: 16px;
			border:1px solid #000;
			background-image: url(img/spirit.png);
			background-position: -19px -44px;
		}
		.box2{
			width: 160px;
			height: 160px;
			border:1px solid #000;
			background-image: url(img/abcd.jpg);
			background-position: -366px -270px;
		}
		.box1:hover{
			background-position: -19px -65px;
		}
		/*为什么使用精灵图？*/
		/*为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度*/
	</style>
</head>
<body>
	<div class="box1"></div>
	<div class="box2"></div>
</body>
</html>

背景图片大小

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 700px;
			height: 700px;
			border:1px solid #000;

			background-image: url(img/aa.jpeg);
			background-repeat: no-repeat;
			
			background-size: 300px;
			/*背景图片大小:宽度、高度*/
			/*一般只调整宽度、高度等比例自动缩放*/
			background-size: 100%;
			background-size: contain;
			/*等比例放大图片。只有一个边铺满就停止*/
			background-size: cover;
			/*等比例放大图片。必须两个边都铺满才停止*/
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

背景简写

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box1{
			width: 700px;
			height: 700px;
			border:1px solid #000;

			/*背景简写：背景图片 背景平铺 背景定位*/
			background: url(img/aa.jpeg) no-repeat 100px 100px;

			/*background-image: url(img/aa.jpeg);
			background-repeat: no-repeat;
			background-position: 100px 100px;*/
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

背景透明

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		body{
			background-image: url(img/banner.jpg);
		}
		.box1{
			width: 200px;
			height: 200px;
			background-color: #f00;

			opacity: 0.5;
			/*透明度:取值范围0-1*/
			/*背景以及内容区域一起透明*/
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: rgba(255,0,0,0.5);
			/*只透明背景，不透明内容*/
		}
	</style>
</head>
<body>
	<div class="box1">hello world</div>
	<div class="box2">hello world</div>
</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		ul{
			list-style-image: url(img/icon.jpg);
			/*把列表前面的小黑点替换成图片*/

			list-style-position: inside;
			/*把列表前面的小黑点移动到内容区域*/

			list-style-type: none;
			/*把列表前面的小黑点清除*/

		}
		ul li{
			border-bottom: 1px solid #000;
		}
	</style>
</head>
<body>
	<ul>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
</body>
</html>

盒模型–边框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*盒子模型：content内容、padding内边距、border边框、margin外边距*/

		/*内容区域：由宽高撑开*/


		.box{
			width: 200px;
			height: 200px;

			/*边框总写*/

			/*边框三要素：粗细、风格、颜色*/
			/*border: 10px dotted red;*/
			/*solid 实线 、 dashed 虚线 、 dotted 点线 、 double 双实线*/

			/*边框分写：单独指定某一个边*/
			border-left: 10px solid #f00;
			border-top: 10px dashed #ff0;
			border-right: 10px dotted #0f0;
			border-bottom: 10px double #0ff;
		}
	</style>
</head>
<body>
	<div class="box">
		
	</div>	
</body>
</html>

盒模型–内边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*盒子模型：content内容、padding内边距、border边框、margin外边距*/

		/*内容区域：由宽高撑开*/


		/*内边距:内容和边框之间的距离*/
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #000;

			/*缺点：会撑大盒子模型*/
			/*内边距*/
			padding-top: 20px;
			padding-right: 30px;
			padding-bottom: 40px;
			padding-left: 50px;

			/*内边距简写*/
			padding: 20px 30px 40px 50px;
					/*上   右   下   左*/
			padding: 20px 30px 40px;
					/*上  左右  下*/
			padding: 20px 30px;
					/*上下  左右*/
			padding: 20px;
					/*上下左右*/
		}
	</style>
</head>
<body>
	<div class="box">
		hello world
	</div>	
</body>
</html>

盒模型–外边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*盒子模型：content内容、padding内边距、border边框、margin外边距*/

		/*内容区域：由宽高撑开*/


		/*外边距:边框以外的距离*/
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #000;

			/*外边距*/
			margin-left: 50px;
			margin-top: 100px;
			margin-bottom: 100px;

			/*外边距简写*/
			margin: 20px 30px 40px 50px;
					/*上   右   下   左*/
			margin: 20px 30px 40px;
					/*上  左右  下*/
			margin: 20px 30px;
					/*上下  左右*/
			margin: 20px;
					/*上下左右*/
		}



		.box1{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<div class="box">
		hello world
	</div>	
	<div class="box1">
		
	</div>
</body>
</html>

盒模型–快速居中

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*盒子模型：content内容、padding内边距、border边框、margin外边距*/

		/*内容区域：由宽高撑开*/

		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #000;


			margin: 20px auto 40px;
			/*左右可以替换成auto*/
		}



		.box1{
			width: 200px;
			height: 200px;
			background-color: #f00;

			margin: 20px auto;
					/*上下  左右*/
		}
	</style>
</head>
<body>
	<div class="box">
		hello world
	</div>	
	<div class="box1">
		
	</div>
</body>
</html>

清除浏览器默认的内外边距

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		/*清除浏览器默认样式*/
		*{
			/*公共样式*/
			margin: 0px;
			padding: 0px;
			list-style-type: none;
			text-decoration: none;
			color: #000;
		}
		ul{
			margin-left: 100px;
		}
	</style>
</head>
<body>
	<h1>hello world</h1>
	<p>hello world</p>
	<a href="">hello world</a>
	<ul>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
		<li>无序列表</li>
	</ul>
</body>
</html>
喝西瓜汁的兔叽Yan
关注
专栏目录
练习前端-HTML标签进阶篇-day02-03
08-19
练习前端-HTML标签进阶篇-day02-03
学习前端-HTML-day01
08-17
学习前端-HTML-day01
前端学习day01-HTML标签01
06-21
本教程“前端学习day01-HTML标签01”着重讲解HTML的基本概念和常用的HTML标签，旨在帮助初学者入门HTML，了解其在网页设计中的重要作用。 HTML由一系列元素组成，这些元素通过标签来表示。标签通常成对出现，比如`...
day05-Elasticsearch01
12-13
在这个“day05-Elasticsearch01”的学习资料中，我们将深入探讨Elasticsearch的核心概念和关键功能。 1. **Elasticsearch核心概念** - **节点(Node)**：Elasticsearch是以节点为基础构建的分布式系统，每个节点都...
day05-Elasticsearch01day05-Elasticsearch01
10-25
在“day05-Elasticsearch01day05-Elasticsearch01”这个主题中，我们可以深入探讨Elasticsearch的基础概念、核心特性以及常见应用场景。 一、Elasticsearch基础 1. 数据模型：Elasticsearch基于Lucene构建，使用倒...
前端用html写excel文件直接打开
全易
09-10 558
html文件直接用excel打开
富文本中去掉 HTML 和 CSS 样式，只保留纯文本
S筱潇S四维Smile
09-11 329
要从富文本中去掉 HTML 和 CSS 样式，只保留纯文本，可以使用以下几种方法：1. 纯 JavaScript 方法你可以使用 JavaScript 的innerText或来提取文本，而忽略 HTML 标签和样式。
水平垂直居中的几种方法（总结）
致未来的你。的博客
09-11 1096
水平垂直居中的几种方法（总结）
HTML中的文字与分区标记
qq_74861982的博客
09-11 426
HTML中的文字与分区标记
使用HTML
nice66660的博客
09-09 869
a>
《HTML 与 CSS—— 响应式设计》
asd4353012的博客
09-11 1471
HTML 和 CSS 在响应式设计中起着至关重要的作用。通过使用语义化标签、响应式图像、媒体查询、弹性布局和响应式网格系统等技术，可以实现网页在不同设备上的自适应显示，提供最佳的用户体验。在进行响应式设计时，要遵循移动优先设计、内容优先和测试优化等最佳实践，不断提高网页的质量和性能。随着移动设备的普及和技术的不断发展，响应式设计将变得越来越重要，开发者需要不断学习和掌握新的技术和方法，以满足用户的需求。
水平居中的几种方法（总结）
致未来的你。的博客
09-11 687
水平居中的几种方法（总结）
打造民国风格炫酷个人网页：用HTML和CSS3传递民国风韵
最新发布
m0_61118741的博客
09-14 1001
这个示例展示了如何结合民国风格和现代网页设计元素，创造一个既古典又炫酷的网页。通过细致的CSS样式和动画效果，我们实现了古典美学与现代技术的完美融合。这种设计不仅在视觉上吸引人，也在功能上提供了良好的用户体验。希望这个示例对你在网页设计方面有所启发！
requests-html的详细使用方法
2301_79698214的博客
09-11 285
requests-html是一个Python库，用于发送HTTP请求并解析HTML。它基于 requests 和 pyquery 库，提供了一种更简单和更方便的方式来获取和处理网页内容。以上是requests-html的一些常用使用方法，可以根据实际需求灵活使用。
html 关于select动态加载数据以及动态分组
lfl18326162160的博客
09-10 579
muloptions[i].setAttribute("selected",true)//遍历字符串数组和复选框选择项，当有匹配的，就把该选项设置成已选择。//自定义下标放在最后新增，防止添加option时id增加。//获取复选框的选择项。//以,将selected字符创切割成字符串数组。//把创建optgroup新增到select下。//针对optgroup标签，添加它的option标签。//设置optgroup标签的label和id值。//js创建option标签。//js创建optgroup标签。
Requests-HTML模块怎样安装和使用？
2301_79698214的博客
09-11 518
上述代码中，首先创建了一个HTMLSession对象，然后使用get()方法发送GET请求，获取网页的HTML内容。最后，使用response.html.text属性获取HTML文本，并将其打印输出。以上就是使用Requests-HTML模块的基本步骤。在Python脚本中导入Requests-HTML模块。使用Requests-HTML模块发送HTTP请求和解析HTML内容。使用pip命令安装Requests-HTML模块。系统会自动下载并安装Requests-HTML模块及其依赖项。
前端：HTML、CSS、JS、Vue
云扬的博客
09-04 4724
本文主要介绍了HTML、CSS、JavaScript、Vue的基本语法和使用。供个人学习使用
炫酷HTML蜘蛛侠登录页面
bjjgff的博客
09-14 385
全篇使用HTML、CSS、JavaScript，建议有过基础的进行阅读。
python使用xpath获取html中的所有链接
2201_75821470的博客
09-10 322
函数将HTML字符串解析为HTML文档对象，然后你可以在这个对象上应用XPath表达式来查找你感兴趣的信息。在这个例子中，我们查找了所有的链接（即。如果你想使用XPath来实现从HTML中提取所有链接的功能，你可以使用。是一个更方便的选择，因为它能够更好地处理HTML中的错误和不规则之处。模块来解析HTML并应用XPath表达式来查找所有。库，因为它支持XPath表达式。如果你需要处理的是XML文档而不是HTML，那么。是XPath表达式，它意味着选择所有。表示选择文档中所有位置的元素，而。
day--和--day区别
04-18
"day--"和"day"是两种不同的操作符，它们在编程中有着不同的含义和用法。 1. "day--"是一个后缀自减操作符，用于将变量的值减1，并返回减1之前的值。例如，如果有一个变量day的值为5，执行day--操作后，day的值将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值