2020-12-02

wzx_2725259197

于 2020-12-02 14:02:42 发布

阅读量89

点赞数

文章标签： html

本文链接：https://blog.csdn.net/wzx_2725259197/article/details/110477774

版权

对网页中的文字添加下划线

<div style="border-bottom: 1px solid black;">小米十周年</div>

div中的p标签浮动时将不会支撑起div的边框

浮动时能消掉两个换行p标签中间的空格

清除浮动用clear，但清除之后空格任然已经消失

<div id=test1>
		  <span style="float: left;">小米</span>
		  <span style="float: left;">华为</span>
		</div>

<div id=test1>
		  <span style="float: left;">小米</span>
		  <span style="float: left;">华为</span>
		  <div style="clear: left;"></div>
		</div>

<style>
			#test1:after{
				content: "";
				display: block;
				clear: left;
			}
		</style>

有序列表可以使用decimal变为无序，也可以更改头标为图片

也可以简写成一行

<style>
			ul{
				list-style-type: decimal;
				list-style-image: url(img/QQ图片20201112191808.png);
			}
			li{
				border: 1px solid red;
			}
		</style>

list-style: square url(img/QQ图片20201112191808.png) inside;

消掉头标

list-style: none;

模仿新浪

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			ul{
				list-style: none;
				border-bottom: 1px solid black;
				height: 49px;
				line-height: 49px;
			}
			a{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<ul>
			<li><a href="https://www.mi.com">首页</a></li>
			<li><a href="https://www.mi.com/p/1915.html">手机 电话卡</a></li>
			<li><a href="/https://www.mi.com/a/h/9819.html">电视 盒子</a></li>
			<li><a href="https://www.mi.com/a/h/7529.html">笔记本 显示器</a></li>
			<li><a href="https://www.mi.com/p/9285.html">家电 插线板</a></li>
		</ul>
	</body>
</html>