这几天也几个人关注了我,我开心到起飞。哈哈哈哈,那今天我们就更新一下如何标准的写一个网页结构。
我们先分析导航栏的布局
这里的布局是大盒子然后分成三部分,然后两边固定,中间居中且·搜索框大小不变。两边做
然后我们先来个大盒子里面三个盒子
然后大盒子设置flex布局 宽度百分百 高度48px 获取浏览器像素还有白色背景,记得先给boby来个浅灰色背景然后效果如下
Css:如下图
*号这个部分是每次写网站必须写的,代表a标签没有下划线,li标签没有前面的样式效果(一般都会有个点,所以这个可以消除),margin:0 paddding:0这两个的作用就是重置)浏览器默认样式,对于各浏览器样式统一的话有着简单粗暴的效果。这东西叫“通配符”(就是我们经常说的盒子之前有东西,边框不能紧挨)用来匹配页面上所有元素。
大盒子弄好了,现在我们来弄小盒子,三个小盒子刚刚分析了,两边大小不变,中间变化,然后两端对齐就可以得到
接下来就是在盒子里面加东西了,这里我就直接发我的css吧
下面是左边盒子的效果,用到一点float布局方式,
接下来就是中间这部分了,那个输入框比较难,因为我之前没有和你们说过构图。
看css
最后的盒子,其实和第一个盒子差不多,直接上css
基本教程就是这些,有空我再模仿下面的内容吧,时间不早了,,,
最后请求点赞关注加收藏,好的作品来自粉丝的惠赠