模仿微软官网效果
代码语言: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 */ ..........完整代码请登录后点击上方下载按钮下载查看
网友评论0