400-800-9385
网站建设资讯详细

响应式网站制作头部布局

发表日期:2019-04-29 14:25:55   作者来源:方维网络   浏览:387   标签:响应式网站制作    
在简单的响应式网站中头部部分大多数为两部分logo和导航栏,一般情况下是左右分布,在要适配不同的屏幕尺下,logo还好,可以固定宽度,导航栏因为栏目数的不同间距的大小,就需要css媒体查询进行处理;而今天我们不使用css媒体查询的情况下进行适配不同的屏幕尺寸, 使用到的是css宽度的百分比布局。
最终效果图如下:

1.1600分辨率下的:

1600分辨率
2.1440分辨率下的:

1440分辨率

其余的尺寸图我就不一一上传了。
代码如下:

1、html:

代码1

logo和导航栏两部分,logo用div容器logo包裹左浮动,导航栏用div容器nav包裹右浮动,在这里记得父元素要清除浮动。

2、CSS

CSS代码

在父容器div(header-wrap)给定一个宽度左右居中,logo容器可以给个固定宽度,或者不给宽度,或者百分比宽度基本上都不影响右边导航栏的布局;

在这里从CCS上可以看出logo我给了个固定宽度,其他另外两种你们可以自己气尝试,在这里我就不多说了;导航栏我给了个百分比宽度,在设计图上导航栏的宽度占比是百分之多少在这里你就设置多少,导航栏下面标签li我没有设置浮动,设置了行内块级元素,记得父元素(nav-wrap)要设置font-size为0,不然会出现错位,不懂的可以百度了解下,因为我只有5个栏目,所以这里的宽度我设置了20%;靠右对齐。

这样一个百分比布局的网页头部就出来了。
 

如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/5030.html