模仿微软官网效果
代码语言:html
所属分类:布局界面
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/all.min.css"> <style> * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #fff; color: #000; font-size: 15px; line-height: 1.5; } a { color: #262626; text-decoration: none; } ul { list-style: none; } .container { width: 90%; max-width: 1100px; margin: auto; } /* Nav */ .main-nav { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 20px 0; font-size: 13px; } .main-nav .logo { width: 110px; } .main-nav ul { display: flex; } .main-nav ul li { padding: 0 10px; } .main-nav ul li a { padding-bottom: 2px; } .main-nav ul li a:hover { border-bottom: 2px solid #262626; } .main-nav ul.main-menu { flex: 1; margin-left: 20px; } .menu-btn { cursor: pointer; position: absolute; top: 20px; right: 30px; z-index: 2; display: none; } .btn { cursor: pointer; display: inline-block; border: 0; font-weight: bold; padding: 10px 20px; background: #262626; color: #fff; font-size: 15px;; } .btn:hover { opacity: 0.9; } .dark { color: #fff; } .dark .btn { background: #f4f4f4; color: #333; } /* Showcase */ .showcase { width: 100%; height: 400px; background: url('http://repo.bfw.wiki/bfwrepo/image/5e53149684f26.png') no-repeat center center/cover; display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: flex-end; padding-bottom: 50px; margin-bottom: 20px; } .showcase h2, .showcase p { margin-bottom: 10px; } .showcase .btn { margin-top: 20px; } /* Home cards */ .home-cards { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; margin-bottom: 40px; } .home-cards img { width: 100%; margin-bottom: 20px; } .home-cards h3 { margin-bottom: 5px; } .home-cards a { display: inline-block; padding-top: 10px; color: #0067b8; text-transform: uppercase; font-weight: bold; } .home-cards a:hover i { margin-left: 10px; } /* Xbox */ .xbox { width: 100%; height: 350px; background: url('http://repo.bfw.wiki/bfwrepo/image/5e5314b703e0a.png') no-repeat center center/cover; margin-bottom: 20px; } .xbox .content { width: 40%; padding: 50px 0 0 30px; } .xbox p, .carbon p { margin: 10px 0 20px; } /* Carbon */ .carbon { width: 100%; height: 350px; background: url('http://repo.bfw.wiki/bfwrepo/image/5e5314d9c6386.png') no-repeat center center/cover; } .carbon .content { width: 55%; padding: 100px 0 0 30px; } /* Follow */ .follow { display: flex; align-items: center; justify-content: flex-start; margin: 30px 0 30px; } .follow * { margin-right: 10px; } /* Links */ .links { background: #f2f2f2; color: #616161; font-size: 12px; padding: 35px 0; } .links-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px; display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; align-items: flex-start; justify-content: center; } .links li { line-height: 2.8; } /* Footer */ .footer { background: #f2f2f2; color: #616161; font-size: 12px; padding: 20px 0; } .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 20px 0 20px; display: flex; align-items: center; justify-content: space-between; } .footer div { margin-bottom: 20px; display: flex; align-items: center; } .footer div i { margin-right: 10px; } .footer ul { display: flex; flex-wrap: wrap; } .footer li { margin-right: 30px; margin-bottom: 20px; } @media(max-width: 700px) { .menu-btn { display: block; } .menu-btn:hover { opacity: 0.5; } .main-nav ul.right-menu { margin-right: 50px; } .main-nav ul.main-menu { display: block; position: absolute; top: 0; left: 0; background: #f2f2f2; width: 50%; height: 100%; border-right: #ccc 1px solid; opacity: 0.9; padding: 30px; transform: translateX(-500px); transition: transform 0.5s ease-in-out; } .main-nav ul.main-menu li { padding: 10px; border-bottom: #ccc solid 1px; font-size: 14px; } .main-nav ul.main-menu li:last-child { border-bottom: 0; } .main-nav ul.main-menu.show { transform: translateX(-20px); } .home-cards { grid-template-columns: repeat(2, 1fr); } .xbox .content p { display: none; } .xbox .content h2 { margin-bottom: 20px; } .carbon .content { width: 85%; } .links .links-inner { grid-template-columns: repeat(2, 1fr); } } @media(max-width: 500px) { .home-cards { grid-template-columns: 1fr; } .links .links-inner { grid-template-columns: 1fr; } .links .links-inner ul { margin-bottom: 20px; } } </style> </head> <body translate="no"> <div class="menu-btn"> <i class="fas fa-bars fa-2x"></i> </div> <div class="container"> <nav class="main-nav"> <img src="http://repo.bfw.wiki/bfwrepo/image/5e5314f4598a5.png" alt="Microsoft" class="logo"> <ul class="main-menu"> <li><a href="#">Office</a></li> <li><a href="#">Windows</a></li> <li><a href="#">Surface</a></li> <li><a href="#">Xbox</a></li> <li><a href="#">Deals</a></li> <li><a href="#">Support</a></li> </ul> <ul class="right-menu"> <li> <a href="#"> <i class="fas fa-search"></i> </a> </li> <li> <a href="#"> <i class="fas fa-shopping-cart"></i> </a> </li> </ul> </nav> <header class="showcase"> <h2>Surface Deals</h2> <p> Select Surfaces are on sale now - save while supplies last </p> <a href="#" class="btn"> Shop Now <i class="fas fa-chevron-right"></i> </a> </header> <section class="home-cards"> <div> <img src="http://repo.bfw.wiki/bfwrepo/image/5e53153310958.png" alt=""> <h3>New Surface Pro 7</h3> <p> See how Katie Sowers, Asst. Coach for the 49ers, uses Surface Pro 7 to put her plans into play. </p> <a href="#">Learn More <i class="fas fa-chevron-right"></i></a> </div> <div> <img src="http://repo.bfw.wiki/bfwrepo/image/5e53154fa56da.png" alt="" /> <h3>New Surface Laptop 3</h3> <p> Express y.........完整代码请登录后点击上方下载按钮下载查看
网友评论0