响应式网站制作头部布局

在简单的响应式网站中头部部分大多数为两部分logo和导航栏，一般情况下是左右分布，在要适配不同的屏幕尺下，logo还好，可以固定宽度，导航栏因为栏目数的不同间距的大小，就需要css媒体查询进行处理；而今天我们不使用css媒体查询的情况下进行适配不同的屏幕尺寸，使用到的是css宽度的百分比布局。
最终效果图如下：

1.1600分辨率下的：

2.1440分辨率下的：
其余的尺寸图我就不一一上传了。
代码如下：

代码1

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

CSS代码
2、CSS
在父容器div（header-wrap）给定一个宽度左右居中，logo容器可以给个固定宽度，或者不给宽度，或者百分比宽度基本上都不影响右边导航栏的布局；
在这里从CCS上可以看出logo我给了个固定宽度，其他另外两种你们可以自己气尝试，在这里我就不多说了；导航栏我给了个百分比宽度，在设计图上导航栏的宽度占比是百分之多少在这里你就设置多少，导航栏下面标签li我没有设置浮动，设置了行内块级元素，记得父元素（nav-wrap）要设置font-size为0，不然会出现错位，不懂的可以百度了解下，因为我只有5个栏目，所以这里的宽度我设置了20%；靠右对齐。
这样一个百分比布局的网页头部就出来了。

当前题目：响应式网站制作头部布局
URL分享：http://lszwz.com/view/242503.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

绵阳服务器托管 LOGO设计注册域名成都商城网站建设公司西云机房成都移动主机托管移动手机网站制作网站seo 四川盐亭做网站网站推广公司

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25