实训小项目5：百度侧边栏

DANEHONG

已于 2024-01-15 22:54:19 修改

阅读量598

点赞数 10

文章标签：前端 html

于 2024-01-15 22:52:46 首次发布

本文链接：https://blog.csdn.net/DANEHONG/article/details/135613089

版权

实现以下效果：

所需图片如下：

实现代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.baidu {
				width: 100%;
				height: 1200px;
			}
			.sidebar{
				position: fixed;
				right: 10%;
				bottom: 50px;
			}
			.sidebar ul{
				list-style-type: none;
			}
			.sidebar ul li {
				margin-bottom: 3px;
				width: 48px;
				height: 48px;
				background-color: beige;
				border-radius: 3px;
				background-image: url(img/baidu_jingling.png);
				background-repeat: no-repeat;
				position: relative;
				overflow: hidden;
			}
			.sidebar ul li:nth-child(1){
				background-image: url(img/baidu_yaoyan.png);
				height: 92px;
				background-size: 48px;
				background-repeat: no-repeat;
			}
			.sidebar ul li:nth-child(2){
				background-image: url(img/baidu_jubao.png);
				height: 92px;
				background-size: 48px;
				background-repeat: no-repeat;
			}
			.sidebar ul li:nth-child(3){
				background-position-y: -51px;
			}
			.sidebar ul li:nth-child(4){
				background-position-y: -204px;
			}
			.sidebar ul li:nth-child(5){
				background-position-y: -255px;
			}
			.sidebar ul li:nth-child(6){
				background-position-y: -306px;
			}
			.sidebar ul li a{
				text-decoration: none;
				color: white;
				display: block;
				width: 100%;
				height: 100%;
				font-weight: bold;
				font-size: 12px;
				text-align: center;
				line-height: 48px;
				background-color: royalblue;
				border-radius: 3px;
				position: absolute;
				transform: rotateZ(90deg);
				transform-origin: -50% 50%;
				transition: all 0.3s;
			}
			.sidebar ul li:nth-child(1) a,
			.sidebar ul li:nth-child(2) a{
				transform-origin: -100% 50%;
				line-height: 92px;
			}
			.sidebar ul li:hover a{
				transform: rotateZ(0deg);
				
			}
		</style>
	</head>
	<body>
		<div class="baidu">
			<div class="sidebar">
				<ul>
					<li><a href="">辟谣</a></li>
					<li><a href="">举报</a></li>
					<li><a href="">收藏网站</a></li>
					<li><a href="">搜索</a></li>
					<li><a href="">用户反馈</a></li>
					<li><a href="">返回顶部</a></li>
				</ul>
			</div>
		</div>
	</body>
</html>