bootstrap布局产品服务页面自适应首页效果代码
代码语言:html
所属分类:布局界面
代码描述:bootstrap布局产品服务页面自适应首页效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <style> .mr-1 { margin-right: 5px !important; } .ml-1 { margin-left: 5px !important; } body { font-family: 'Microsoft Yahei', Arial, sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #4b4d4e; background-color: #fff; margin: 0; line-height: 1.7em; } a { text-decoration: none; color: #34495e; } img { border: none; } h1, h2, h4 { font-weight: 600; color: #2c3e50; } p { word-spacing: 0.05em; } .text-center { text-align: center; } #header { padding: 10px 30px; position: relative; z-index: 2; background: #222; } #header ul li a { color: #fff; } #header ul li a:hover { color: #2c79c5; text-decoration: none; } #nav { list-style-type: none; margin: 0; padding: 0; position: absolute; right: 60px; top: 10px; height: 40px; line-height: 40px; } #nav > li { display: inline-block; position: relative; margin: 0 0.6em; } .search-query { height: 30px; line-height: 30px; box-sizing: border-box; padding: 0 15px 0 30px; border: 1px solid #e3e3e3; color: #2c3e50; outline: none; border-radius: 15px; margin-right: 10px; transition: border-color 0.2s ease; background: #fff url("//repo.bfw.wiki/bfwrepo/image/60adfd751ea68.png") 8px 5px no-repeat; background-size: 20px; vertical-align: middle !important; } #logo { display: inline-block; font-size: 1.4em; line-height: 40px; font-weight: 500; } #logo img { vertical-align: middle; margin-right: 6px; max-width: 200px; height: 40px; } .sidebar { position: absolute; z-index: 10; top: 60px; left: 0; bottom: 0; padding: 40px 0 30px 40px; width: 260px; margin-right: 20px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none; } .sidebar ul { list-style-type: none; margin: 0; line-height: 1.9em; padding-left: 1em; } .sidebar .main-menu { margin-bottom: 20px; display: none; padding-left: 0; } @media screen and (max-width: 900px) { .sidebar.open { -webkit-transform: translate(0, 0); transform: translate(0, 0); } .sidebar { z-index: 8; background-color: #f9f9f9; height: 100%; top: 0; left: 0; padding: 60px 30px 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); box-sizing: border-box; transition: all 0.4s cubic-bezier(0.4, 0, 0, 1); -webkit-transform: translate(-280px, 0); transform: translate(-280px, 0); } .sidebar .search-query { width: 200px; margin-bottom: 10px; } .sidebar .main-menu { display: block; } } #header { box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1); transition: background-color 0.3s ease-in-out; } @media screen and (max-width: 900px) { body { -webkit-text-size-adjust: none; font-size: 14px; } #header { position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #222; z-index: 9; box-shadow: 0 0 2px rgba(0, 0, 0, 0.25); padding: 0; } #header #nav { display: none; } #header .menu-button { position: absolute; width: 24px; height: 24px; top: 12px; right: 12px; background: url("//repo.bfw.wiki/bfwrepo/icon/5d835254a1dd1.png") center center no-repeat; background-size: 24px; } #header #logo { font-size: 1.5em; padding: 6px 0 6px 15px; color: #2c79c5; display: block; line-height: 100%; } #header #logo > a { display: inline-block; vertical-align: middle; } #header #logo > a:first-child { width: 40px; overflow: hidden; } #header #logo img { height: 40px; margin-top: 0px; max-width: 200px; } } @media screen and (max-width: 560px) { #about { padding: 0 15px; } #about .links a.btn.btn-lg { padding: 12px 25px; margin-bottom: 5px; } } body.index { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body.index #header { background-color: #2c79c5; box-shadow: none; background: none; position: fixed; top: 0; left: 0; width: 100%; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 10px 0; } body.index #header a { color: #fff; } body.index #header #logo { margin-left: 60px; } #about { background-color: #2c79c5; text-align: center; min-height: 350px; height: 100vh; display: flex; align-items: center; position: relative; background-image: linear-gradient(rgba(54, 63, 72, 0.8), rgba(54, 63, 72, 0.8)), url(//repo.bfw.wiki/bfwrepo/image/5e5ef040f1ffc.png); background-size: cover; background-attachment: fixed; } #about .inner { max-width: 900px; margin: 0 auto; margin-top: 30px; } #about h1 { font-weight: 400; font-size: 6em; color: #fff; line-height: 100%; } #about h2 { color: #fff; font-weight: 400; font-size: 2.4em; } #about .links { margin-top: 30px; } #about .links a { margin: 0 5px; } @media screen and (max-width: 900px) { #about { height: calc(100vh - 40px); } #about h1 { font-size: 2em; } #about h2 { display: block; } body.index #header #logo { padding: 0px 15px; margin-top: -4px; margin-left: 0; } body.index #header #logo > a:first-child { width: inherit; } } @keyframes mouseanimation { 0% { transform: translateY(0); opacity: 1; } 25% { opacity: 1; } 75% { transform: translateY(0.75em); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } .viewmore { width: 100%; display: block; clear: both; margin-top: -80px; text-align: center; height: 100px; } .viewmore-dot { display: block; position: absolute; left: 50%; background: #fff; height: .4em; width: .4em; top: .6em; margin-left: -0.2em; border-radius: 50%; transform-origin: top center; backface-visibility: hidden; animation: mouseanimation 2s ease-out infinite; } .viewmore-icon { display: block; position: relative; height: 40px; width: 26px; border: 2px solid #fff; border-radius: 1em; margin: 0 auto; } #addons .addon-list { text-align: left; } #addons .addon-item { padding: 0px; background: #fbfbfb; border-radius: 3px; overflow: hidden; text-align: left; margin: 0 -5px; margin-bottom: 15px; display: inline-block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #addons .addon-item:hover, #addons .addon-item:focus { transform: translateY(-6px); -webkit-transform: translateY(-6px); -moz-transform: translateY(-6px); -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3); -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3); box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } #addons .addon-item .addon-img { width: 100%; position: relative; text-align: center; overflow: hidden; } #addons .addon-item .addon-img img { width: 100%; } #addons .addon-item .addon-info { padding: 15px; } #addons .addon-item h4 { margin: 6px 0; line-height: 30px; color: #444; padding: 0; font-size: 18px; text-align: center; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 1; } #addons .addon-item .addon-intro { overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; color: #888; height: 48px; font-size: 14px; } #addons .addon-item .addon-action { padding: 10px 0; text-align: center; } #addons .addon-item .addon-action a { font-size: 12px; } #footer { padding: 25px 0; color: #999; } #footer a { color: #777; } #footer a:hover { color: #0092db; } @media (max-width: 1366px) and (min-width: 901px) { #header { padding-left: 20px; padding-right: 20px; } #nav { right: 20px; } .sidebar { padding-left: 20px; } } .sidebar::-webkit-scrollbar { width: 5px; border-right: 1px solid rgba(0, 0, 0, 0.07); } .sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; } .sidebar:hover::-webkit-scrollbar-thumb { background: #c8c8c8; } .sidebar:hover::-webkit-scrollbar-track { background: #f4f4f4; } .mr-1 { margin-right: 5px !important; } .ml-1 { margin-left: 5px !important; } .btn-lg { border-radius: 4px; font-size: 14px; } a:hover, a:focus { text-decoration: none; } .big-text { font-size: 16px; line-height: 26px; } /* Colors */ .white-bg { background: #fff; } .blue-bg { background: #59a3fc; } .green-bg { background: #82b541; } .yellow-bg { background: #fdbd10; } .dark-red-bg { background: #ff7243; } .pix-white { color: #fff; } .pix-navy-blue { color: #363F48; } .pix-navy-blue-2 { color: #818e9b; } /* line Buttons Color */ /* Padding */ .pix-padding-v-50 { padding-top: 50px; padding-bottom: 50px; } /* Margin */ .pix-margin-top-50 { margin-top: 50px; } .pix-margin-bottom-50 { margin-bottom: 50px; } .pix-no-margin-top { margin-top: 0px; } /* Negative margin */ /* shadow */ /* Shapes */ /* Buttons */ .btn { border-radius: 3px; padding: 8px 18px; border: 0px; } .btn.btn-lg { padding: 14px 30px; } .btn.btn-sm { padding: 6px 14px; } .btn:not(.pix-line):not(.btn-flat):not(.btn-link):hover { box-shadow: 0 0 3rem 3rem rgba(0, 0, 0, 0.08) inset; } .btn.pix-white:hover { color: #fff; } .btn-round-lg { border-radius: 30px; } .btn.wide { padding-left: 34px; padding-right: 34px; } .btn-lg.wide { padding-left: 40px; padding-right: 40px; } /* featured boxes */ /* top border colors */ /* Arrow Animation */ /* Boxes */ /* Form */ /* float */ /* Backgrounds */ /* Misc */ .pix-white:hover, .pix-white:focus { color: #fff; } /* Typography */ h1 { font-size: 48px; line-height: 77px; } h2 { font-size: 36px; line-height: 58px; } h4 { font-size: 24px; line-height: 38px; } p { font-size: 14px; line-height: 22px; } @media screen and (max-width: 768px) { /* Mobile Misc */ } @media screen and (min-width: 768px) { /* Misc */ /*.dropdown:hover .dropdown-menu, .btn-group:hover .dropdown-menu{*/ } /* Slider */ /* Modals */ /* IE fix */ *::-ms-backdrop { position: relative; display: inline-block; height: 100%; width: auto; max-width: inherit; left: 0; top: 0; -webkit-transform: translateY(0%) translateX(0%); } .floating { -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px) !important; background-color: #222222 !important; } </style> </head> <body class="index "> <div id="header"> <div id="logo"> <a href="/"><img src="//repo.bfw.wiki/bfwrepo/icon/60ecf359eb0c5.png"></a> </div> <ul id="nav"> <li> <form id="search-form" action="https://ask.example.com/search.html" method="get" target="_blank"> <input type="text" name="q" id="search-query-" class="search-query local-search-input st-default-search-input"> </form> <div class="local-search-result"></div> </li> <li><a href="https://www.example.com" class="">首页</a></li> <li><a href="" class="">文档</a></li> <li><a href="" class="">关于我们</a></li> </ul> <a class="menu-button"></a> </div> <div> <div class="sidebar"> <ul class="main-menu"> <li> <form id="search-form" action="https://ask.example.com/search.html" method="get" target="_blank"> <input type="text" name="q" id="search-query-" class="search-query local-search-input st-defau.........完整代码请登录后点击上方下载按钮下载查看
网友评论0