【网页设计】32：溢出&列表声明

hello world 999

已于 2023-04-18 22:20:59 修改

阅读量242

点赞数 1

分类专栏：网页设计文章标签：前端

于 2021-03-12 19:10:34 首次发布

本文链接：https://blog.csdn.net/weixin_49167174/article/details/114703139

版权

网页设计专栏收录该内容

39 篇文章 8 订阅

订阅专栏

第32节：溢出&列表声明

在这里插入图片描述

1.溢出：

在这里插入图片描述

（1）容器溢出：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第32节：溢出和列表声明</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<div class="box">
			<img src="img/img15.jpg" >
			<p>一个人真正的魅力，不是你给对方留下了美好的第一印象；而是对方认识你多年后，仍喜欢和你在一起。也不是你瞬间吸引了对方的目光；而是对方熟悉你以后，依然欣赏你。更不是初次见面后，就有相见恨晚的感觉；而是历尽沧桑后，由衷倾诉说：认识你真好！认识你真好，虽然你不在我身边，却一直在心间。有一种目光不远不近，却一直守望；有一种朋友不惊不扰，却一直陪同。</p>
		</div>
		
	</body>
</html>

.box{
	width: 500px;
	height: 300px;
	border: 2px solid black;
	margin: 0 auto;
	/* 容器溢出 */
	/* 1.对溢出部分直接进行隐藏 */
	overflow: hidden;
	/* 2.溢出部分以滚动条形式展现 */
	overflow: auto;
}

在这里插入图片描述

（2）文本溢出：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第32节：溢出和列表声明</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body style="background-color:#fffae8;">
		<p class="text">一个人真正的魅力，不是你给对方留下了美好的第一印象；而是对方认识你多年后，仍喜欢和你在一起。也不是你瞬间吸引了对方的目光；而是对方熟悉你以后，依然欣赏你。更不是初次见面后，就有相见恨晚的感觉；而是历尽沧桑后，由衷倾诉说：认识你真好！认识你真好，虽然你不在我身边，却一直在心间。有一种目光不远不近，却一直守望；有一种朋友不惊不扰，却一直陪同。</p>
		
	</body>
</html>

.text{
	/* 文本溢出 */
	/* 1.明确的宽度 */
	width: 300px;
	/* 2.限定文本不换行 */
	white-space: nowrap;
	/* 3.文本溢出也是容器溢出 */
	overflow: hidden;
	/* 4.设置文本溢出显示形式 */
	/* 以省略号的形式展示ellipsis */
	text-overflow: ellipsis;
	/* 直接裁剪clip */
	/* text-overflow: clip; */
}

在这里插入图片描述

2.列表声明：

在这里插入图片描述

（1）列表符号类型：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第32节：溢出和列表声明</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body style="background-color:#fffae8;">
		<ul>我喜欢的动物
			<li>狗子</li>
			<li>小猪</li>
			<li>地松鼠</li>
		</ul>
		
	</body>
</html>

/* css列表声明 */
ul{
	width: 300px;
	height: 500px;
	border: 2px solid pink;
	margin: 0 auto;
}
ul li{
	/* 1.列表符号类型 */
	list-style: none;/* none取消列表符号 */
	list-style-type: square;/* square方形 */
	list-style-type: circle;/* circle空心圆 */
	list-style-type: disc;/* disc实心圆 */
}

在这里插入图片描述

（2）列表符号显示位置：

/* css列表声明 */
ul{
	width: 300px;
	height: 500px;
	border: 2px solid pink;
	margin: 0 auto;
}
ul li{
	/* 1.列表符号类型 */
	list-style: none;/* none取消列表符号 */
	list-style-type: square;/* square方形 */
	list-style-type: circle;/* circle空心圆 */
	list-style-type: disc;/* disc实心圆 */
	/* 2.列表符号显示位置 */
	list-style-position: inside;/* 列表符号显示在内部 */
	list-style-position: outside;/* 列表符号显示在外部 */
    
}

内部显示

外部显示

（3）列表符号以图片形式展现：

/* css列表声明 */
ul{
	width: 300px;
	height: 500px;
	border: 2px solid pink;
	margin: 0 auto;
}
ul li{
	/* 1.列表符号类型 */
	list-style: none;/* none取消列表符号 */
	list-style-type: square;/* square方形 */
	list-style-type: circle;/* circle空心圆 */
	list-style-type: disc;/* disc实心圆 */
	/* 2.列表符号显示位置 */
	list-style-position: inside;/* 列表符号显示在内部 */
	list-style-position: outside;/* 列表符号显示在外部 */
	
	/* 3.列表符号以图片形式展现 */
	list-style-image: url(../img/爱心.png);
}

在这里插入图片描述

hello world 999

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【网页设计】32：溢出&列表声明

第32节：溢出&列表声明1.溢出：（1）容器溢出：<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>第32节：溢出和列表声明</title> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body&gt
复制链接

扫一扫