html网页布局练习(二): 利用float浮动及HTML5新增标签实现网页布局

阅读量：

设计图

https://s3.bmp.ovh/imgs/2023/02/10/f04eca2ec8533891.jpg

页面构成与设计思路

页面结构由顶部导航栏header、轮播图banner、功能选项卡片section、案例展示case、客户评价client、关于我们及新闻aboutUs&news模块以及底部页脚footer共同构成
- 在头部与底部等区域中引入了h5新增的标签元素
- 通过float浮动技术实现盒模型的水平排列，同时借助内边距padding与外边距margin调整元素间的上下左右间距
- 针对margin:top塌陷问题，采用设置padding:top并相应减少height值的方式加以解决
- 网页在浏览器中实现居中显示效果，是通过将html元素宽度设为100%，而body设置固定宽度后使用margin:0 auto;完成的

完整代码

复制代码

    <!DOCTYPE html>
    <html lang="en">
      <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" conte

全部评论 (0)

还没有任何评论哟~