溢出&列表声明

搬砖老金牛

已于 2022-03-29 00:16:11 修改

阅读量564

点赞数

分类专栏： html和css 文章标签： css html5

于 2022-03-28 23:41:05 首次发布

本文链接：https://blog.csdn.net/qq_48968230/article/details/123806538

版权

html和css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

一、容器溢出

1、overflow：hidden；（超出容器的文本内容，进行隐藏）

2、overflow：scroll；（超出容器，则出现纵向+横向的滚动条）

3、overflow：auto；（超出容器，只出现纵向的滚动条）

二、文本溢出

四个属性，超出范围，则隐藏为省略号。

1、控制文本不换行

white-space：nowrap；

2、必须要有一个确定的宽度

例如：width：360px；

3、溢出处理，超出部分隐藏

overflow：hidden;

4、文本处理，用省略号代替

text-overflow: ellipsis;

补充：文字竖向排版

writing-mode:vertical-rl（文字竖向排版，从右往左），vertical-lr(从左往右)

实操：

test3.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>溢出</title>
		<link rel="stylesheet" type="text/css" href="css/test3.css"/>
	</head>
	<body>
		<div class="box">
			<p>
				此曲只应天上有，人间难得几回闻。
				命里有时终须有，命里无时莫强求。
			</p>
			<p>
				我是谁，我从何处来，未来又将到何处去？我是谁，我从何处来，未来又将到何处去？我是谁，我从何处来，未来又将到何处去？我是谁，我从何处来，未来又将到何处去？
			</p>
			<p>
				此曲只应天上有，人间难得几回闻。
				命里有时终须有，命里无时莫强求。
			</p>
			<p>
				我是谁，我从何处来，未来又将到何处去？我是谁，我从何处来，未来又将到何处去？我是谁，我从何处来，未来又将到何处去？我是谁，我从何处来，未来又将到何处去？
			</p>
			<p>
				此曲只应天上有，人间难得几回闻。
				命里有时终须有，命里无时莫强求。
			</p>

		</div>
		<div class="box1">
			
		</div>
	</body>
</html>

test3.css

*{
	padding:0;
	margin:0;
}

.box{
/*  height:300px;
	border:5px solid #f0f;*/
    width: 1200px;
	/* margin:0 auto; */   
	margin-right:300px;
	margin-top:60px;
	
	
	/* 容器溢出 */
	/* overflow:hidden(隐藏)/scroll(滚动条) /auto(自动)*/
	/* overflow:auto; */ /* 横向滚动条*/
}


/* 文本溢出 */
.box p{
	/* line-height:1.5em; */  /* 行高 */
	/* 4个属性*/
	/*控制文本不换行 */
	/* white-space: nowrap; */
	/* 必须要有一个确定的宽度 */
	/* width:360px; */
	/* 溢出处理 */
   /* overflow:hidden; */
	/* 文本处理 */
	/* text-overflow: ellipsis; */
	
	
	/* 文字竖向排版 */
	/* writing-mode:vertical-rl（文字竖向排版，从右往左），vertical-lr(从左往右) */
	height:200px;
	float:right;  /* 向右浮动 */
	writing-mode:vertical-rl;
	line-height: 3em;   /* 行高 */
	/* margin-right:200px; */  /* 每个p标签外边距 */
	
}
.box1{
	width:100%;
	height:300px;
	background-color:aquamarine;
	padding-top: 20px;   /* 内边距 */
}

运行效果：

三、列表声明

1、列表符号样式

list-style-type: circle; （空心圆）

2、列表图片

例如：list-style-image: url(../img/夜景.png);

3、列表符号的位置

list-style-position: inside(列表内部) /outside（列表外部）

4、取消列表符号

list-style: none;

test4.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表</title>
		<!-- 样式链接 -->
		<link rel="stylesheet" type="text/css" href="css/test4.css"/>
	</head>
	<body>
		<ul class="list">
			<li>首页</li>
			<li>体育</li>
			<li>电竞</li>
			<li>音乐</li>
		</ul>

		
	</body>
</html>

test4.css

.list li{
	/* 列表符号 */
	list-style-type: circle;
	/* 列表图片 */
	list-style-image: url(../img/夜景.png);
	/* 列表符号的位置list-style-position: inside(列表内部) 、outside（外部）*/
	list-style-position: inside;
	/* 取消列表符号 */
	/* list-style: none; */
	
	
	background-color: #2E8B57;  /* 背景颜色 */
	float: left;   /* 列表横着排列 */
	margin-right: 30px;  /* 每列与右边一列间距 */
	
}

运行效果：

练习：

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<!-- top -->
		<div class="top_wrap">
			<div class="top">
				<!-- 左边 -->
				<div class="top_left">
					<p>【股票代码：22565】</p>
				</div>
				
				<!-- 右边 -->
				<div class="top_right">
					<a href="#" class="com_email">企业邮箱</a>
					<div class="lan">
						<span>中文</span>|
						<span>English</span>
					</div>
					<div class="top_search">
						<input type="text" value="-集团相关信息-">
						<button><img src="img/搜索.png" alt=""></button>	
					</div>

				</div>
			</div>
		</div>
	</body>
</html>

index.css

*{
	padding: 0;
	margin: 0;
}

.top_wrap{
	width: 100%;
	height:30px;
	background-color: #333;
}

.top{
	width:1200px;
	margin:0 auto;   /* 元素居中 */
}

.top .top_left p{
	float:left;   /* 向左浮动 */
	color:#fff;     /* 字体颜色 */
	font-size:12px;    /* 字体大小 */
	line-height: 30px;    /* 行高 */
}

.top .top_right{
	float:right;     
}

.top_right .com_email{
	/* 行元素转为块元素，方便设置宽高 */
	display:block;   
	float:left;
	color:#fff;
	font-size: 12px;
	line-height: 30px;
}

.top_right .lan{
	float:left;
	color:#fff;
	font-size: 12px;
	line-height: 30px;
	margin-left:20px;
}

/* 搜索 */
.top_right .top_search{
	float: left;
	width:160px;
	height:18px;
	margin-left:20px;
	margin-top:6px;
}

/* 搜索--文本框 */
.top_search input{
	display: block;
	float:left;
	border:none;
	width: 120px;
	height: 100%;
	background-color: #4d4d4d;
	color: #fff;
	padding-left:10px; 
	font-size:12px;
}

/* 搜索--按钮 */
.top_right button{
	display: block;
	float: left;
	height: 100%;
	width:30px;
	border:none;
	background-color: #808080;
}

/* 搜索--图标居中 */
.top_right button img{
	display: block;
	margin:0 auto;
}

运行效果：