css+jquery实现个人信息选项卡效果代码
代码语言:html
所属分类:选项卡
代码描述:css+jquery实现个人信息选项卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.6.1.css"> <style> @import url("https://fonts.googleapis.com/css?family=Nunito:400,900|Montserrat|Roboto"); body { background: linear-gradient(to right, #3FB6A8, #7ED386); } .container { background: #FFFFFF; width: 540px; height: 420px; margin: 0 auto; position: relative; margin-top: 10%; box-shadow: 2px 5px 20px rgba(119, 119, 119, 0.5); } .logo { float: right; margin-right: 12px; margin-top: 12px; font-family: "Nunito Sans", sans-serif; color: #3DBB3D; font-weight: 900; font-size: 1.5em; letter-spacing: 1px; } .CTA { width: 80px; height: 40px; right: -20px; bottom: 0; margin-bottom: 90px; position: absolute; z-index: 1; background: #7ED386; font-size: 1em; transform: rotate(-90deg); transition: all 0.5s ease-in-out; cursor: pointer; } .CTA h1 { color: #FFFFFF; margin-top: 10px; margin-left: 9px; } .CTA:hover { background: #3FB6A8; transform: scale(1.1); } .leftbox { float: left; top: -5%; left: 5%; position: absolute; width: 15%; height: 110%; background: #7ED386; box-shadow: 3px 3px 10px rgba(119, 119, 119, 0.5); } nav a { list-style: none; padding: 35px; color: #FFFFFF; font-size: 1.1em; display: block; transition: all 0.3s ease-in-out; } nav a:hover { color: #3FB6A8; transform: scale(1.2); cursor: pointer; } nav a:first-child { margin-top: 7px; } .active { color: #3FB6A8; } .rightbox { float: right; width: 60%; height: 100%; } .profile, .payment, .subscription, .privacy, .settings { transition: opacity 0.5s ease-in; position: absolute; width: 70%; } h1 { font-family: "Montserrat", sans-serif; color: #7ED386; font-size: 1em; margin-top: 40px; margin-bottom: 35px; } h2 { color: #777777; font-family: "Roboto", sans-serif; width: 80%; text-transform: uppercase; font-size: 8px; letter-spacing: 1px; margin-left: 2px; } p { border-width: 1px; border-style: solid; border-image: linear-gradient(to right, #3FB6A8, rgba(126, 211, 134, 0.5)) 1 0%; border-top: 0; width: 80%; font-family: "Montserrat", sans-serif; font-size: 0.7em; padding: 7px 0; color: #070707; } span { font-size: 0.5em; color: #777777; } .btn { float: right; font-family: "Roboto", sans-serif; text-transform: uppercase; font-size: 10px; border: none; color: #3FB6A8; } .btn:hover { text-decoration: underline; font-weight: 900; } input { border: 1px solid #dddddd; font-family: "Roboto", sans-serif; padding: 2px; margin: 0; } .privacy h2 { margin-top: 25px; } .settings h2 { margin-top: 25px; } .noshow { opacity: 0; } footer { position: absolute; width: 20%; bottom: 0; right: -20px; text-align: right; font-size: 0.8em; text-transform: uppercase; letter-spacing: 2px; font-family: "Roboto", sans-serif; } footer p { border: none; padding: 0; } footer a { color: #ffffff; text-decoration: none; } footer a:hover { color: #7d7d7d; } </style> </head> <body> <!-- partial:index.partial.html --> <div class="container"> <div id="logo"> <h1 class="logo">Smith</h1> <div class="CTA"> <h1>Get $10</h1> </div> </div> <div class="leftbox"> <nav> <a id="profile" class="active"><i class="fa fa-user"></i></a> <a id="payment"><i class="fa fa-credit-card"></i></a> <a id="subscription"><i class="fa fa-tv"></i></a> <a id="privacy"><i class="fa fa-tasks"></i></a> <a id="settings"><i class="fa fa-cog"></i></a> </nav> </div> <div class="rightbox"> <div class="profile"> <h1>Personal Info</h1> <h2>Full Name</h2> <p>Julie Park <button class="btn">update</button></p> <h2>Birthday</h2> <p>July 21</p> <h2>Gender</h2> <p>Female</p> <h2&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0