网页结构之模仿导航栏

这几天也几个人关注了我，我开心到起飞。哈哈哈哈，那今天我们就更新一下如何标准的写一个网页结构。

我们先分析导航栏的布局

这里的布局是大盒子然后分成三部分，然后两边固定，中间居中且·搜索框大小不变。两边做

然后我们先来个大盒子里面三个盒子

然后大盒子设置flex布局  宽度百分百  高度48px  获取浏览器像素还有白色背景，记得先给boby来个浅灰色背景然后效果如下

Css:如下图

*号这个部分是每次写网站必须写的，代表a标签没有下划线，li标签没有前面的样式效果（一般都会有个点，所以这个可以消除），margin:0  paddding：0这两个的作用就是重置）浏览器默认样式，对于各浏览器样式统一的话有着简单粗暴的效果。这东西叫“通配符”（就是我们经常说的盒子之前有东西，边框不能紧挨）用来匹配页面上所有元素。

大盒子弄好了，现在我们来弄小盒子，三个小盒子刚刚分析了，两边大小不变，中间变化，然后两端对齐就可以得到

接下来就是在盒子里面加东西了，这里我就直接发我的css吧

下面是左边盒子的效果，用到一点float布局方式，

接下来就是中间这部分了，那个输入框比较难，因为我之前没有和你们说过构图。

看css

最后的盒子，其实和第一个盒子差不多，直接上css

基本教程就是这些，有空我再模仿下面的内容吧，时间不早了，，，

最后请求点赞关注加收藏，好的作品来自粉丝的惠赠