Question

所以我是Web开发领域的新手，有一些我想知道的制作方法，这是我要制作的列表

https://i.imgur.com/PAQaJde.png

那个酒吧东西叫什么？以及如何在滚动时使其停留在顶部

https://i.imgur.com/ai0Vf2g.png

这是使用CSS设置样式的卡片或简单列吗？

对不起，傻瓜们，我真的有点迷失了，因为我不知道那些东西怎么称呼

Answer 1

1）它称为导航或navBar，您将其绝对定位在0,0处才能保持顶部：

2）不确定您要问的第二个问题是什么，而是要采用这种风格。您可以使用CSS Grid或FlexBox，它们都是本机浏览器功能。

很高兴回答任何其他问题：）

欢迎社区

Answer 2

第一个是导航栏或导航栏。您可以通过设置position: fixed; top: 0; left:0; z-index:99;

使其停留在顶部

nav {
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  padding: 10px;
  background-color: #ccc;
}

.block {
  display: block;
  height: 1000px;
}

<nav>
 Navbar
</nav>
<div class='block'>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
<p>Lorem ipsum dolor sit amet</p>
</div>

第二个可以通过嵌套一个inst = ide元素来实现，对父元素应用边距，对子元素应用边框半径。它适用于任何布局样式。

div{
  border: solid 1px #ccc;
  border-radius: 5px;
}

.container {
  padding: 20px;
}

.card {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 20px;
}

.card-wide {
  display: inline-block;
  width: 150px;
  height: 50px;
  margin-top: 30px;
  margin-right: 30px;
}

<div class='container'>
  <h1>Content</h1>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <br />
  <div class='card-wide'></div>
  <div class='card-wide'></div>
  <div class='card-wide'></div>
  <div class='card-wide'></div>
</div>

我不知道如何做的事情清单

2 个答案: