bootstrap-material-design实现响应式个人主页及作品集页面代码
代码语言:html
所属分类:响应式
代码描述:bootstrap-material-design实现响应式个人主页及作品集页面代码
代码标签: bootstrap-material-design响应式 个人主页 作品集
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html *{ -webkit-font-smoothing: antialiased; } .h6, h6 { font-size: .75rem !important; font-weight: 500; font-family: Roboto,Helvetica,Arial,sans-serif; line-height: 1.5em; text-transform: uppercase; } .name h6 { margin-top: 10px; margin-bottom: 10px; } .navbar { border: 0; border-radius: 3px; padding: .625rem 0; margin-bottom: 20px; color: #555; background-color: #fff!important; box-shadow: 0 4px 18px 0 rgba(0,0,0,.12), 0 7px 10px -5px rgba(0,0,0,.15) !important; z-index: 1000 !important; transition: all 150ms ease 0s; } .navbar.navbar-transparent { z-index: 1030; background-color: transparent!important; box-shadow: none !important; padding-top: 25px; color: #fff; } .navbar .navbar-brand { position: relative; color: inherit; height: 50px; font-size: 1.125rem; line-height: 30px; padding: .625rem 0; font-weight: 300; -webkit-font-smoothing: antialiased; } .navbar .navbar-nav .nav-item .nav-link:not(.btn) .material-icons { margin-top: -7px; top: 3px; position: relative; margin-right: 3px; } .navbar .navbar-nav .nav-item .nav-link .material-icons { font-size: 1.25rem; max-width: 24px; margin-top: -1.1em; } .navbar .navbar-nav .nav-item .nav-link .fa, .navbar .navbar-nav .nav-item .nav-link .material-icons { font-size: 1.25rem; max-width: 24px; margin-top: 0px; } .navbar .navbar-nav .nav-item .nav-link { position: relative; color: inherit; padding: .9375rem; font-weight: 400; font-size: 12px; border-radius: 3px; line-height: 20px; } a .material-icons { vertical-align: middle; } .fixed-top { position: fixed; z-index: 1030; left: 0; right: 0; } .profile-page .page-header { height: 380px; background-position:center; } .page-header { height: 100vh; background-size: cover; margin: 0; padding: 0; border: 0; display: flex; align-items: center; } .header-filter:after, .header-filter:before { position: absolute; z-index: 1; width: 100%; height: 100%; display: block; left: 0; top: 0; content: ""; } .header-filter::before { background: rgba(0,0,0,.5); } .main-raised { margin: -60px 30px 0; border-radius: 6px; box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2); } .main { background: #FFF; position: relative; z-index: 3; } .profile-page .profile { text-align: center; } .profile-page .profile img { max-width: 160px; width: 100%; margin: 0 auto; -webkit-transform: translate3d(0,-50%,0); -moz-transform: translate3d(0,-50%,0); -o-transform: translate3d(0,-50%,0); -ms-transform: translate3d(0,-50%,0); transform: translate3d(0,-50%,0); } .img-raised { box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2); } .rounded-circle { border-radius: 50%!important; } .img-fluid, .img-thumbnail { max-width: 100%; height: auto; } .title { margin-top: 30px; margin-bottom: 25px; min-height: 32px; color: #3C4858; font-weight: 700; font-family: "Roboto Slab","Times New Roman",serif; } .profile-page .description { margin: 1.071rem auto 0; max-width: 600px; color: #999; font-weight: 300; } p { font-size: 14px; margin: 0 0 10px; } .profile-page .profile-tabs { margin-top: 4.284rem; } .nav-pills, .nav-tabs { border: 0; border-radius: 3px; padding: 0 15px; } .nav .nav-item { position: relative; margin: 0 2px; } .nav-pills.nav-pil.........完整代码请登录后点击上方下载按钮下载查看
网友评论0