导航条制作方法(用Grid和Flex，十分钟快速制作登陆网页)

我的意中人是盖世英雄认证优质作者

2022-04-20 09:05:36

全文为3787字，预计学习时间为8分钟。

制作登陆指南页面的模板和教程很少，大部分都过于复杂或者添加了过多的设计(比如多页多表等。)，但大多数情况下，一些非常简单的设计就足够了。

本文将介绍如何在不使用旧的CSS库(如bootstrap)的情况下，以CSS(Grid和Flex)为主要工具创建响应式用户界面。

那我们开始吧！

本文所要构建的指南页面的基本布局主要集中在一些基本组件上，以便读者在制作自己的指南页面时，可以直接找到并使用自己想要使用的组件。下面是结果图例:

这个网页有四个主要组成部分:导航栏、封面图片、卡片网格和页脚。

Index.html的代码很简单，主要包括div标签和整体网页结构:

<body> <nav class="zone bluesticky"> <ulclass="main-nav"> <li><ahref="">About</a></li> <li><ahref="">Products</a></li> <li><ahref="">Our Team</a></li> <liclass="push"><ahref="">Contact</a></li> </ul> </nav> <div> <imgsrc="img/cover.jpg"> <divclass="coverText"><h1>Making the world a betterplace</h1></div> </div> <div class="zone bluegrid-wrapper"> <div> <imgsrc="./img/teamplay.jpg"> <divclass="text"> <h1>Teamplay</h1> <p>We work togetherto create impact</p> <button>Learn more</button> </div> </div> <div><img src="./img/strategy.jpg"> <divclass="text"> <h1>Strategy</h1> <p>Every goal is partof our strategy</p> <button>Learn more</button> </div> </div> <div><img src="./img/innovation.jpg"> <divclass="text"> <h1>Innovation</h1> <p>We're focused onthinking different</p> <button>Learnmore</button> </div> </div> </div> <footerclass="zone"><p> 2019 Assaf Elovic All right reserved. Formore articles visit <ahref="www.assafelovic.com"> www.assafelovic.com</a></p></footer> </div> </body>

& ltbody & gt & lt；nav class="zone bluesticky " > & lt；ulclass="main-nav " > & lt；李& gt& ltahref = " " & gt关于& lt/a & gt；& lt/李& gt & lt；李& gt& ltahref = " " & gt产品& lt/a & gt；& lt/李& gt & lt；李& gt& ltahref = " " & gt我们的团队& lt/a & gt；& lt/李& gt & lt；liclass = " push " & gt& ltahref = " " & gt联系人& lt/a & gt；& lt/李& gt & lt；/ul & gt； & lt；/nav & gt； & lt；div & gt & lt；img src = " img/cover . jpg " & gt； & lt；divclass="coverText " >& lth1 & gt让世界变得更美好& lt/h1 & gt；& lt/div & gt； & lt；/div & gt； & lt；div class="zone bluegrid-wrapper " > & lt；div & gt & lt；imgsrc= "。/img/teamplay . jpg " & gt； & lt；divclass="text " > & lt；h1 & gt团队精神& lt/h1 & gt； & lt；p & gt我们一起努力创造影响<。/p & gt； & lt；button & gt了解更多信息& lt/button & gt； & lt；/div & gt； & lt；/div & gt； & lt；div & gt& ltimg src= "。/img/strategy . jpg " & gt； & lt；divclass="text " > & lt；h1 & gt战略& lt/h1 & gt； & lt；p & gt每个目标都是我们战略的一部分。/p & gt； & lt；button & gt了解更多信息& lt/button & gt； & lt；/div & gt； & lt；/div & gt； & lt；div & gt& ltimg src= "。/img/innovation . jpg " & gt； & lt；divclass="text " > & lt；h1 & gt创新& lt/h1 & gt； & lt；p & gt我们专注于思考不同的问题& lt/p & gt； & lt；button & gtLearnmore & lt/button & gt； & lt；/div & gt； & lt；/div & gt； & lt；/div & gt； & lt；footerclass="zone " >& ltp & gt 2019 Assaf Elovic版权所有。更多文章请访问 & lt；ah ref = " www . assafelovic . com " & gt； www . assafelovic . com & lt；/a & gt；& lt/p & gt；& lt/footer & gt； & lt；/div & gt； & lt；/body & gt；

所以，笔者只着重介绍网页风格的设计(使用CSS)。

用Grid和Flex设置布局样式

体验:有些元素需要网格风格的样式，比如桌子、卡片、媒体相册(比如Instagram上的内容)等。在这种情况下，请使用网格。其他的都用Flex。强烈建议深入学习这两个工具，因为要做出漂亮的响应式网页，只要掌握Grid和Flex，不需要学习其他工具。

导航栏

应该用Flex制作导航条，这样就可以制作导航条需要的单向线条。因为使用了

。main-nav { 显示:flex 列表样式:无； margin:0； font-size:0.7 em； }

更改浏览器宽度时，一些导航栏将被删除，因此当宽度减小时，请调整导航栏的大小:

@媒体专用屏幕和(最大宽度:600像素){ 。main-nav { font-size:0.5 em；填充:0； } }

要将选项“联系人信息”右对齐，请将左边距设置为“自动”，以便超链接的左边距可以自动设置为最大值:

。push { margin-left:auto； }

最后，使导航栏固定并始终出现在页面顶部，同时使导航栏覆盖所有其他元素(z-index):

。粘性{ 位置:固定； z-index:1； top:0；宽度:100%； }

封面

为了保持画面简洁(即只保留中心内容)，制作封面时要使用Flex。在Flex中设置好界面后，将内容水平居中(X轴)，将布局容器和对齐项垂直居中(Y轴)。图像大小应该适合整个屏幕，因此将高度设置为100vh，这意味着图像高度为100%:

导航条制作

。集装箱{ 高度:100vh 显示:flex align-items:center； justify-content:center； }

封面文字也应该居中并覆盖在图像上:

。coverText { position:绝对；左:50%； top:50%； transform: translate(-50%，-50%)；颜色:白色； font-weight:bold； }

其他微调方法请参考完整的CSS样式表:https://github . com/assafelovic/basic-landing-page-layout/blob/master/style . CSS。

卡片网格

如上所述，制作指南页需要创建卡片网格，此时就需要网格。Grid-template-columns可以定义每一列的样式(或div)。仅供参考:如果宽度设置为1fr，则每列只有一个块。将重复功能设置为(与反复输入1fr的效果相同)，那么它可以从最小350个像素自动填充全屏(1fr)。最后，将网格间隔(即网格对象之间的填充间隔)设置为20像素:

。grid-wrapper { display:grid； grid-template-columns:repeat(自动填充，minmax(350px，1fr))； grid-gap:10px； }

接下来，设置网格中每张卡片的样式。如下图所示，定义每张卡片的边距和背景色非常简单:

。卡片{ 背景色:# 444；边距:50px }

每张卡片都应该包含一张适合整个顶部区域的图片、一个标题和相应的文本段落，以及位于下方的“了解更多”按钮。而且卡片里面的图片、标题、段落都要可控可调，代码如下:

.card > img { max-width: 100%; height: auto; }.card h1 { font-size: 1.5rem; }.card p { font-size: 1rem; }

。卡片& gtimg { 最大宽度:100%；高度:自动； }。卡h1 { font-size:1.5 rem； }。卡p { font-size:1 rem； }

此时，图片已经100%适应了卡片的宽度，但我们也可以在卡片的文字区域添加一些填充间隔:

。卡片& gt。text { padding:0 20px 20px； }

最后，在每张卡内添加一个按键设计。将边框设置为0(因为默认会添加边框)，然后设置一些间隔、颜色等等:

button { cursor:指针；背景:灰色； border:0； font-size:1 rem；颜色:白色；填充:10px 宽度:100%； }按钮:悬停{ 背景色:# e0d27b }

页脚

最后，页脚也很重要。页脚的设置非常简单。将内部文本的大小调整为小于默认值，然后为页脚设置一些间隔和颜色: