CSS入门之浮动与列表

最新推荐文章于 2021-01-06 18:45:52 发布

这个名字真难起

最新推荐文章于 2021-01-06 18:45:52 发布

阅读量205

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_45949075/article/details/107357051

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

浮动

浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，这是便可以使用float来解决。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="header">
			<img src="img/bg-0017.gif"/>
			<img src="img/bg-0017.gif" />
		</div>
		
		<style>
			.header{
				border: 1px solid red;
			}
		</style>
	</body>
</html>

效果：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="header">
			<img src="img/bg-0017.gif"/>
			<img src="img/bg-0017.gif" />
		</div>
		
		<style>
			.header{
				border: 1px solid red;
			}
			img{
				float: left;/*将所有img元素向左浮动*/
			}
		</style>
	</body>
</html>

效果：
在这里插入图片描述
此时虽然图片之间的空隙没有了，但是因为图片浮上去了，导致其父元素div中没有内容，从而塌陷。
可以在父元素最后加一个空的div子元素，将其样式设置为取消浮动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="header">
			<img src="img/bg-0017.gif"/>
			<img src="img/bg-0017.gif" />
			<div style="clear: left;"></div>
		</div>
		
		<style>
			.header{
				border: 1px solid red;
			}
			img{
				float: left;
			}
		</style>
	</body>
</html>

效果：
在这里插入图片描述
但这种方法已经过时，我们可以用在父元素后添加一个伪元素的方法来代替：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="header">
			<img src="img/bg-0017.gif"/>
			<img src="img/bg-0017.gif" />
		</div>
		
		<style>
			.header{
				border: 1px solid red;
			}
			img{
				float: left;
			}
			.header:after{
				content: "";
				display: block;
				clear: left;
			}
		</style>
	</body>
</html>

效果：
在这里插入图片描述
float不仅可以向左浮动，也可以向右浮动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div class="header">
			<img src="img/bg-0017.gif"/>
			<img src="img/bg-0017.gif" />
		</div>
		
		<style>
			.header{
				border: 1px solid red;
			}
			img{
				float: right;
			}
			.header:after{
				content: "";
				display: block;
				clear: right;
			}
		</style>
	</body>
</html>

效果：
在这里插入图片描述

列表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			ul,li{
				border: 1px solid red;
			}
			ul{
				list-style-type: decimal;/*设置列表序号为阿拉伯数字*/
				list-style-position: inside;/*设置列表序号写在li标签内*/
				list-style-image: url(img/arrow.gif);/*将列表序号替换为指定图片*/
				list-style: decimal inside url(img/arrow.gif);/*简写形式*/
			}
		</style>
	</head>
	<body>
		<ul>
			<li>语文</li>
			<li>英语</li>
			<li>数学</li>
			<li>历史</li>
		</ul>
	</body>
</html>

效果（将列表序号替换为了箭头图片，并且序号在 li 标签内，每个方框代表一个 li 标签）：
在这里插入图片描述

这个名字真难起

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS入门之浮动与列表

浮动浏览器会将换行代码之间多个空格解释为一个空格，但是这一个空格有时会破坏整个页面布局，这是便可以使用float来解决。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="header"> <img src="img/bg-0
复制链接

扫一扫