前端样式完成

css/style.css

@@ -55,12 +55,31 @@
 	justify-content: flex-end;
 	align-items: center;
 	width: 212px;
+	position: relative;
 }
 /* 通知 */
 .notice{
 	margin-right: 14%;
+	position: relative;
+}
+.notice img{
+	height: 20px;
+}
+.notice>em{
+	display: block;
+	width: 20px;
+	height: 20px;
+	background-color: rgba(255, 255, 255, .8);
+	border-radius: 100%;
+	font-size: 12px;
+	color: #ff0000;
+	transform: scale(.85);
+	line-height: 20px;
+	text-align: center;
+	position: absolute;
+	right: -16px;
+	top: -6px;
 }
-
 /* 登录/注册 */
 .login-registration{
 	display: flex;
@@ -90,7 +109,32 @@
 	border-right: 6px solid transparent;
 	border-bottom: 6px solid transparent;
 	border-left: 6px solid transparent;
+	cursor: pointer;
+	transition: all .6s;
 }
+.icon-arrow.cur{
+	transform: rotateX(180deg);
+	margin-top: -6px;
+}
+
+/* 退出登录 */
+.open-more{
+	display: none;
+	max-width: 100%;
+	background-color: rgba(255, 255, 255, .8);
+	padding: 5px 15px;
+	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	user-select: none;
+	position: absolute;
+	top: 37px;
+	right: 0;
+}
+.open-more>a{
+	display: flex;
+	font-size: 15px;
+	line-height: 2.5;
+}
+
 /* 整屏半透明背景 */
 .nav-bg{
 	display: none;
@@ -1389,7 +1433,13 @@
 		height: 36px;
 	}
 	.notice{
-		margin-right: 5%;
+		margin-right: 10%;
+	}
+	.notice img{
+		height: 18px;
+	}
+	.notice>em{
+		background-color: rgba(0, 0, 0, 0);
 	}
 
 	.head .head-btn {
@@ -1434,6 +1484,11 @@
 		font-weight: normal;
 		border: 0;
 	}
+	.open-more{
+		position: fixed;
+		top: 50px;
+		right: 2%;
+	}
 	
 	/* 首页 */
 	.main{

js/my-site.js

@@ -57,6 +57,12 @@ jQuery(function($){
 		autoplay:false,
 	})
 	
+	// 快捷菜单
+	$('.top-right .icon-arrow').click(function() {
+		$(this).toggleClass('cur');
+		$('.top-right .open-more').toggle();
+	});
+	
 	// 登录
 	if($('.login-btn').length > 0){
 		$('.login-btn').click(function() {

login.html

@@ -41,13 +41,18 @@
 				<!-- 顶部右侧 -->
 				<div class="top-right">
 					<!-- 通知 -->
-					<div class="notice"><a href="">通知</a></div>
+					<div class="notice"><a href=""><img src="images/icon/icon-notice.png" alt="通知"></a><em>15</em></div>
 					<!-- 登录/注册 -->
 					<div class="login-registration">
 						<!-- <ins><img src="images/icon/icon-user.png" alt="登录/注册"></ins> -->
 						<span><em><a href="login.html">登录</a>/<a href="register.html">注册</a></em></span>
 						<em class="icon-arrow"></em>
 					</div>
+					<div class="open-more">
+						<a href="">个人中心</a>
+						<a href="">修改密码</a>
+						<a href="">退出登录</a>
+					</div>
 				</div>
 				<!-- 导航按钮 -->
 				<div class="nav-bg"></div>