响应式网站制作头部布局(南京响应式网站制作)
时间: 2022-08-02 08:22:59 浏览次数:225
在简单的响应式网站中头部部分大多数为两部分logo和导航栏,一般情况下是左右分布,在要适配不同的屏幕尺下,logo还好,可以固定宽度,导航栏因为栏目数的不同间距的大小,就需要css媒体查询进行处理;而今天我们不使用css媒体查询的情况下进行适配不同的屏幕尺寸, 使用到的是css宽度的百分比布局。
最终效果图如下:
1.1600分辨率下的:

2.1440分辨率下的:

其余的尺寸图我就不一一上传了。
代码如下:
1、html:
logo和导航栏两部分,logo用div容器logo包裹左浮动,导航栏用div容器nav包裹右浮动,在这里记得父元素要清除浮动。
2、CSS
在父容器div(header-wrap)给定一个宽度左右居中,logo容器可以给个固定宽度,或者不给宽度,或者百分比宽度基本上都不影响右边导航栏的布局;
在这里从CCS上可以看出logo我给了个固定宽度,其他另外两种你们可以自己气尝试,在这里我就不多说了;导航栏我给了个百分比宽度,在设计图上导航栏的宽度占比是百分之多少在这里你就设置多少,导航栏下面标签li我没有设置浮动,设置了行内块级元素,记得父元素(nav-wrap)要设置font-size为0,不然会出现错位,不懂的可以百度了解下,因为我只有5个栏目,所以这里的宽度我设置了20%;靠右对齐。
这样一个百分比布局的网页头部就出来了。
以上就是关于响应式
网站制作头部布局(南京响应式
网站制作),希望对你有帮助,更多内容关注
蓝港网络。
非常感谢您读完蓝港网络的这篇文章:"响应式网站制作头部布局(南京响应式网站制作)",仅为提供更多信息供用户参考使用或为学习交流的方便。我们公司提供:网站建设、网站制作、官网建设、SEO优化、小程序制作等服务,欢迎联系我们提供您的需求。
版权声明:本文内容由互联网用户自发贡献,该文观点及内容相关仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容请联系QQ:396391463 立即清除!
标签: