前端入门学习笔记二十五

最新推荐文章于 2024-07-18 20:18:47 发布

物恰冰可乐

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量64

点赞数

分类专栏：前端文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_65384293/article/details/128141977

版权

前端专栏收录该内容

109 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>cursor属性</title>
		<style type = 'text/css'>
			div{
				width:100px;
				height:100px;
				line-height:90px;
				text-align:center;
				background-color:skyblue;
				color:wheat;
				font-size:25px;
			}
			#div_default{cursor:url(img/cursor/default.cur),default;}
			#div_pointer{cursor:url(img/cursor/pointer.cur),pointer;}
		</style>
	</head>
	<body>
		<div id = 'div_default'>《关山月》
　　作者：李白
　　明月出天山，苍茫云海间。
　　长风几万里，吹度玉门关。
　　汉下白登道，胡窥青海湾。</div>
		<div id = "div_pointer">由来征战地，不见有人还。
　　戍客望边色，思归多苦颜。
　　高楼当此夜，叹息未应闲。</div>
	</body>
</html>

cursor属性
cursor 属性规定要显示的光标的类型（形状）。
该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状（不过 CSS2.1 没有定义由哪个边界确定这个范围）
JavaScript 语法：   object.style.cursor="crosshair"
url
需使用的自定义光标的 URL。
请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default   默认光标（通常是一个箭头）
auto   默认。浏览器设置的光标。
crosshair   光标呈现为十字线。
pointer   光标呈现为指示链接的指针（一只手）
move   此光标指示某对象可被移动。
e-resize   此光标指示矩形框的边缘可被向右（东）移动。
ne-resize   此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize   此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize   此光标指示矩形框的边缘可被向上（北）移动。
se-resize   此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize   此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize   此光标指示矩形框的边缘可被向下移动（南）。
w-resize   此光标指示矩形框的边缘可被向左移动（西）。
text   此光标指示文本。
wait   此光标指示程序正忙（通常是一只表或沙漏）。
help   此光标指示可用的帮助（通常是一个问号或一个气球）。

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>CSS盒子模型实例</title>
		<style type = "text/css">
			div{
				display:inline-block;
				padding:30px;
				margin:50px;
				border:3px solid skyblue;
				background-color:#FFDEAD;
			}
		</style>
	</head>
	<body>
		<div>五月天山雪，无花只有寒。
　　笛中闻折柳，春色未曾看。
　　晓战随金鼓，宵眠抱玉鞍。
　　愿将腰下剑，直为斩楼兰。</div>
	</body>
</html>

CSS盒子模型实例 Box Model
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>width和height的</title>
		<style type = 'text/css'>
			div,span{
				width:100px;
				height:100px;
			}
			div{border:3px solid skyblue;}
			span{border:3px solid plum;}
		</style>
	</head>
	<body>
		<div>峨眉山月半轮秋，影入平羌江水流。</div>
		<span>夜发清溪向三峡，思君不见下渝州。</span>
	</body>
</html>

width和height的
<img> 标签的 height 和 width 属性设置图像的尺寸。
为图像指定 height 和 width 属性是一个好习惯。
如果设置了这些属性，就可以在页面加载时为图像预留空间。
如果没有这些属性，浏览器就无法了解图像的尺寸，也就无法为图像保留合适的空间，因此当图像加载时，页面的布局就会发生变化。（下面的篇幅详细解释了这个观点）。
请不要通过 height 和 width 属性来缩放图像。
如果通过 height 和 width 属性来缩小图像，那么用户就必须下载大容量的图像（即使图像在页面上看上去很小）。
正确的做法是，在网页上使用图像之前，应该通过软件把图像处理为合适的尺寸。

<!DOCTYPE html>
<html>
	<head>
		<meta charset = "UTF-8"/>
		<title>块元素设置width和height</title>
		<style type = 'text/css'>
			#div1{
				width:100px;
				height:100px;
				border:3px solid skyblue;
			}
			#div2{
				width:100px;
				height:100px;
				border:3px solid plum;
			}
		</style>
	</head>
	<body>
		<div id = "div1">危楼高百尺，
　　手可摘星辰。</div>
		<div id = "div2">不敢高声语，
　　恐惊天上人。</div>
	</body>
</html>