上QQ阅读APP看书，第一时间看更新

Main files

Open thevuebnb-prototypedirectory in your IDE. Note that the followingindex.htmlfile is included. It's mostly comprised of boilerplate code, but also has some structural markup included in thebodytag.

Also note that this file links tostyle.css, where our CSS rules will be added, andapp.js,where our JavaScript will be added.

index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Vuebnb</title>
  <link href="node_modules/open-sans-all/css/open-sans.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<p id="toolbar">
  <img class="icon" src="logo.png">
  <h1>vuebnb</h1>
</p>
<p id="app">
  <p class="container"></p>
</p>
<script src="app.js"></script>
</body>
</html>

Currentlyapp.jsis an empty file, but I have included some CSS rules instyle.cssto get us started.

style.css:

body {
  font-family: 'Open Sans', sans-serif;
  color: #484848;
  font-size: 17px;
  margin: 0;
}

.container {
  margin: 0 auto;
  padding: 0 12px;
}

@media (min-width: 744px) {
  .container {
      width: 696px;
  }
}

#toolbar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e4e4e4;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

#toolbar .icon {
  height: 34px;
  padding: 16px 12px 16px 24px;
  display: inline-block;
}

#toolbar h1 {
  color: #4fc08d;
  display: inline-block;
  font-size: 28px;
  margin: 0;
}