<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>WCB cofe</title> <meta name="description" content="提供综合咖啡与健康有机食物的咖啡店" /> <link rel="icon" type="image/png" href="images/favicon.png"/> <link href="https://unpkg.com/ress/dist/ress.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div id="home" class="big-bg"> <header class="page-header wrapper"> <h1> <a href="index.html"><img src="images/logo.svg" alt="WCB cafe 首页" class="logo" /></a> </h1> <nav> <ul class="main-nav"> <li><a href="news.html">News</a></li> <li><a href="menu.html">Menu</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div class="home-content wrapper"> <h2 class="page-title">We'll Make Your Day</h2> <p>想不想待在时尚咖啡店裡放鬆身心?用无人工添加物的食材让身体由内而外焕然一新。</p> <a class="button" href="menu.html">菜单介绍</a> </div><!-- /.home-content --> </div> <!-- / #home --> </body> </html>
代码清单:css/style.css
@charset "UTF-8"; /* 公共部分 ---------------------------------------*/ html { font-size: 100%; /* 根据浏览器预设的文字大小,设置相对值*/ } body { font-family: "Yu Gothic Medium", YuGothic, sans-serif; line-height: 1.7; /* 行高 */ color: #432; } a { text-decoration: none; /* 去掉底部的下划线 */ } img { max-width: 100%; /* 宽度为父元素的100% */ } /* HEADER ------------------------------- */ .logo { width: 210px; margin-top: 14px; } .main-nav { display: flex; font-size: 1.25rem; text-transform: uppercase; /* 英文字母全部大写*/ margin-top: 36px; list-style: none; /* 无列表图标*/ } .main-nav li { margin-left: 36px; } .main-nav a { color: #432; } .page-header { display: flex; justify-content: space-between; /* 水平对齐方式:左右对齐 */ } .wrapper { max-width: 1100px; /* 设定最大宽度 */ margin: 0 auto; /* 居中对齐 */ padding: 0 4%; /* 设定内侧留白空间,以配合窄界面*/ } .home-content { text-align: center; margin-top: 10%; } .home-content p { font-size: 1.125rem; margin: 10px 0 42px; } /*标题*/ .page-title { font-size: 5rem; font-family: 'Philosopher', serif; text-transform: uppercase; font-weight: normal; } /* 按钮 */ .button { font-size: 1.375rem; background: #0bd; color: #fff; border-radius: 5px; padding: 18px 32px; } .button:hover { background: #0090aa; } .big-bg { background-size: cover; /* 图片铺面界面 */ background-position: center top; background-repeat: no-repeat; } #home { background-image: url(../images/main-bg.jpg); min-height: 100vh; } #home .page-title { text-transform: none; }
logo:
网站图标:
首页背景:
网站图标制作:https://realfavicongenerator.net