CSS（十）：案例2-小米侧边栏

实现下面效果

核心思路
- 把链接a转换为块级元素，这样链接就可以单独占一行，并且有宽度和高度
- 鼠标经过a时设置背景颜色

代码

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例二-侧边栏</title>
		<style>
			/* 把a标签转换为块级元素 */
			a {
				display: block;
				width: 230px;
				height: 40px;
				background-color: #A2A0A0;
				color: #fff;
				text-decoration: none;
				text-indent: 2em;
				/* 单行文字垂直居中 */
				line-height: 40px;
			}	
			/* 鼠标经过连接变换背景颜色 */
			a:hover {
				background-color: #ff6700;
			}
		</style>
	</head>
	<body>
		
			<a href="#"> 手机 </a>
			<a href="#"> 电视 </a>
			<a href="#"> 笔记本 平板</a>
			<a href="#"> 出行 穿戴</a>
			<a href="#"> 耳机 音响</a>
			<a href="#"> 家电</a>
			<a href="#"> 智能 路由器</a>
			<a href="#"> 电源 配件</a>
			<a href="#"> 健康 儿童</a>
			<a href="#"> 生活 箱包</a>
	</body>
</html>

posted @ 2022-06-08 16:16 pure3417 阅读(127) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· CSS（十五）：盒子模型案例

· CSS（十二）：案例3-五彩导航栏

· CSS练习题

· 简约侧边栏

· HTML——day12

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？

公告

昵称： pure3417
园龄： 3年11个月
粉丝： 31
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

pure3417

CSS（十）：案例2-小米侧边栏

公告

搜索

积分与排名

随笔分类 (150)

个人blog网址

阅读排行榜

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>案例二-侧边栏</title>
	<style>
	/* 把a标签转换为块级元素 */
	a {
	display: block;
	width: 230px;
	height: 40px;
	background-color: #A2A0A0;
	color: #fff;
	text-decoration: none;
	text-indent: 2em;
	/* 单行文字垂直居中 */
	line-height: 40px;
	}
	/* 鼠标经过连接变换背景颜色 */
	a:hover {
	background-color: #ff6700;
	}
	</style>
	</head>
	<body>

	<a href="#"> 手机 </a>
	<a href="#"> 电视 </a>
	<a href="#"> 笔记本平板</a>
	<a href="#"> 出行穿戴</a>
	<a href="#"> 耳机音响</a>
	<a href="#"> 家电</a>
	<a href="#"> 智能路由器</a>
	<a href="#"> 电源配件</a>
	<a href="#"> 健康儿童</a>
	<a href="#"> 生活箱包</a>
	</body>
	</html>