利用CSS3实现红色网站左侧边菜单代码



55 216 73



特效描述:利用CSS3实现 红色网站 左侧边 菜单代码,利用CSS3实现红色网站左侧边菜单代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.0/css/all.min.css'>
<link rel="stylesheet" href="css/style.css">

2. HTML代码

<div class="page">
	<!--左侧导航-->
	<div class="navbar">
		<div class="user">
			<div class="user__pic"></div>
			<div class="user__name">Jane Santigold</div>
		</div>
		<div class="bar">
			<div class="options">
				<ul>
					<li class="active">Homepage</li>
					<span class="options__division">Your Books</span>
					<li>Read Books</li>
					<li>Currently Reading</li>
					<li>Want To Read</li>
					<li>Owned Books</li>
					<li>Borrowed Books</li>
					<li>Reviewed Books</li>
				</ul>
			</div>
			<div class="settings">
				<ul>
					<li class="acc-settings"><i class="fas fa-cog"></i> Account Settings</li>
					<li><i class="fas fa-sign-out-alt"></i> Logout</li>
				</ul>
			</div>
		</div>
	</div>
	<!--主要内容部分-->
	<div class="content"></div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 滑动导航菜单 浮动导航菜单 导航切换 右键菜单 收缩导航菜单 html5动画导航菜单 flash导航菜单 滑动星星打分 导航菜单 其他 侧边导航菜单 鼠标滑过

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到