CSS笔记9：小米侧边栏案例

最新推荐文章于 2023-07-05 14:03:45 发布

惹尘

最新推荐文章于 2023-07-05 14:03:45 发布

阅读量561

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/weixin_46037153/article/details/109811182

版权

css 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>小米侧边栏案例</title>
	</head>
	<style>
		a {
			/* 1.把a转换成块级元素 */
			display: block;
			width: 230px;
			height: 40px;
			background-color: #666666;
			font-size: 14px;
			color: white;
			text-decoration: none;
			text-indent: 2em;
			/* 让单行文字垂直居中的小技巧:让文字的行高等于盒子的高度 height=line-height*/
			line-height: 40px;/* line-height<height文字偏上,大于偏下 */
		}
		/* 2.鼠标经过a 链接,变换背景颜色 */
		a:hover {
			
			background-color: orangered;
		}
	</style>
	<body>


		<a href="#">手机 电话卡</a>
		<a href="#">电视 盒子</a>
		<a href="#">笔记本 平板</a>
		<a href="#">出行 穿戴</a>
		<a href="#">智能 路由器</a>
		<a href="#">健康 儿童</a>
		<a href="#">耳机 音响</a>


	</body>
</html>

在这里插入图片描述

让单行文字垂直居中的小技巧:让文字的行高等于盒子的高度 height=line-height

line-height<height文字偏上,大于偏下

在这里插入图片描述

惹尘

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
CSS笔记9：小米侧边栏案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>小米侧边栏案例</title> </head> <style> a { /* 1.把a转换成块级元素 */ display: block; width: 230px; height: 40px; background-color: #666666;
复制链接

扫一扫