css页面布局开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情一直在说

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 12 天，点击查看活动详情

一直在说前端，css，html，JavaScript等的知识点，但是知识点和实际应用在我看来还是有区别的，使用我比较推荐通过实例的方式来了解知识点。

下面就用几个小demo来展示一些页面元素的用法吧。

其实就是菜单栏。

布局如图，里面具体数字可以替换

这个布局怎么做？我们可以使用几个div通过定位来做，也可以使用ulli来做，不过一般使用的是ul-li（我在学校学习常用，不知道具体前端是不是常用它）

分析：我们知道导航栏其实是超链接，每一个格子其实是一个li。那么html页面如下

那么看到这里就用一些小细节：

怎么去除超链接下划线：text-decoration: none;

怎么去除小圆点：list-style: none;

css代码第一步：

* {
        margin: 0;
        padding: 0;
    }

因为直接也需要写padding那些，使用可以把页面的这些元素置0.

然后就是对ul设置宽高，设置边框。对li设置宽高，背景颜色

怎么让首页那些横起来？直接添加:display: flex;

在很早很早以前，我做这个用的float，浮动真的好多问题，我哭s。

在访问某些网页时候，是不是遇到这样的问题，把鼠标放在某位置，会出现一个隐藏菜单栏，这玩意应该怎么做呢？

首先是对外层ulli设置宽高。

然后对ul-li下面的li进行隐藏：display: none;

接下来给ul-li下面的ul设置hover：display: block;

总结： disply：

nune元素隐藏

block 把隐藏元素显示、把其他级别元素转换成块元素

inline 把其他级别元素转换成行内元素

inline-block把其他级别元素变成行块元素

table-cell

块元素：默认情况下独占一行的元素如div，p，ul，li，h 它能识别width，height

行内元素：默认情况下挨着一行摆放，放不下再换行如：a，span，b，strong，i，em，font 它不能识别：width和height

行块元素：默认情况挨着一行摆放，行内放不下再换行。它能识别width，height 如：img，表单控件 12个

搜索框比较简单，就是图片和input的布局。

通过display: flex;把竖着排列的元素变成横向。然后去除一部分boder就得到图片样式

虽然现在很多框架在做轮播图，但是手写应该轮播图也算是很棒了。轮播图第一步就是元素定位。（本节不说js部分，单纯是布局）

界面元素：图片列表，上一张下一张按钮，下面的页面图标。

第一步对所有元素设置宽高和背景颜色

第二步对页面图标定位（保持居中）

然后设置一下其他样式，下标定位就欧克了

同理可以对上下页布局。

css页面布局