【前端】网页布局

最新推荐文章于 2024-07-13 04:53:52 发布

辣辣写代码_nanaProgrammer

最新推荐文章于 2024-07-13 04:53:52 发布

阅读量2.3k

点赞数 1

文章标签： html html5 css3 css

本文链接：https://blog.csdn.net/qq_39455275/article/details/108574600

版权

本文介绍了网页布局的基础知识，包括固定布局、流式布局和栅格化布局等。重点讲解了三种传统PC端网页布局方式：1) DIV+CSS布局，优点在于易于维护和SEO友好；2) HTML5语义化标签布局，提升网页质量和SEO效果，但需要注意IE9以下浏览器的兼容性；3) 响应式布局，能够根据浏览器窗口大小调整内容显示。通过案例分析，详细展示了如何实现这些布局方式。

摘要由CSDN通过智能技术生成

前言

之前已经学了：HTML与HTML5常用标签、CSS与CSS3美化页面，已经可以做出来网页的一些局部效果，比如导航栏等。要做出一个完整的网页，还需要学习网页布局。

网页布局介绍

点击查看：
网页布局的几种方式

固定布局
流式布局（Liquid Layout）
栅格化布局
自适应布局（Adaptive Layout）
响应式布局
弹性布局（rem/em布局）
伸缩布局（Flex box）

自适应布局、响应式布局、弹性布局、伸缩布局都为了适应移动端设备（手机端、平板电脑）。

3种传统PC端网页布局方式

三种传统PC端网页布局方式：

传统的DIV+CSS布局
HTML5+CSS3布局
响应式布局

1.DIV+CSS布局：
DIV标签+CSS样式表

优点：

便于维护
有利的SEO（谷歌将网页打开速度作为排名因素及SEO因素）

在这里插入图片描述
2.HTML5语义化标签布局：
用以下标签代替div：

<header> 定义⻚⾯或区段的头部；
<footer> 定义⻚⾯或区段的尾部；
<nav> 定义⻚⾯或区段的导航区域；
<section> ⻚⾯的逻辑区域或内容组合；
<article> 定义正⽂或⼀篇完整的内容；
<aside> 定义补充或相关内容；

优点：
HTML5 可以让很多更语义化的结构化代码标签代替大量无意义的 div 标签。

提升了网页的质量和语义
减少了以前用于CSS 调用的class 和 id 属性
对搜索引擎的友好

注意：
使⽤HTML5 语义化标签的布局模式在IE9以下浏览器不兼容，可使⽤下⾯的代码解决。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"
type="text/javascript"></script>
<![endif]-->

在这里插入图片描述
3.响应式布局：
根据浏览器窗口大小，调整内容的显示。

1.DIV+CSS布局（最常用）案例

观察下边网页的布局，并画出草稿图。
猫眼电影榜单
在这里插入图片描述

从整体看，这个网页分为4个部分，我们创建4个div：头部、导航、主体、页脚。

查看网页各部分的尺寸、颜色：Chrome右键，选择检查，点击下图红框里的按钮，鼠标移到网页中的某个部分，就会显示详细信息。
在这里插入图片描述
观察4个部分（头部、导航、主体、页脚）的颜色、尺寸，在我们的html里进行设置。

Chrome还能查看网页某个部分的盒子模型。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV+CSS传统网页布局</title>
    <style>
        /*公共的css样式*/
        *{
    margin:0px;padding:0px}/*内补白、外补白均为0，消除缝隙*/
        a{
    text-decoration: none;}
        ul{
    list-style:none;}/*列表前边的黑点去掉*/

        /*页面头部样式*/
        #header{
    
            position:fixed;/*不随滚动条的滚动而移动*/
            top:0px;
            width:100%;
            border-bottom:1px solid #46474a;
        }
        #header .header-nav{
    
            height:80px;
            width:1200px;
            background-color: goldenrod;
            margin:0px auto;
        }

        /*页面导航样式*/
        #nav{
    
            height:60px;
            margin-top:81px;
            background-color:#46474a;
        }

        /*页面主体样式*/
        #container{
    
            width:100%;
        }
        #container .content{
    
            width:1200px;
            margin:0px auto;
            margin-top:50px;
        }
        #container .content .main{
    
            width:950px;
            margin:0px auto;
        }

        /*页面主体中的电影排行列表样式*/
        #container .content .main ul li{
    
            display:block;
            height:220px;
            line-height:220px;
            width:100%;
            margin-bottom:20px;
            border:1px dashed #f60;
        }
        .main ul li .info{
    
            height:100%;
            width:680px;
            float:right;
            background-color:snow;
            border-bottom:1px solid #aaa;
        }

        .main ul li .info .info-right{
    
            width:80px;
            height:80px;
            border:1px dashed orange;
            float: right;
            margin-top:70px;
        }

        .main ul li .info .info-left{
    
            width:300px;
            height:120px;
            border:1px dashed orange;
            margin-top:50px;
        }
        .main ul li .ids{
    
            height:50px;
            width:50px;
            margin-top:85px;
            margin-bottom:85px;
            background-color:orange;
            display:inline-block;
        }

        .main ul li .pic{
    
            height:200px;
            width:160px;
            margin:10px 25px;
            border:1px dashed green;
            display: inline-block;
        }

        /*页面尾部样式*/
        #footer{
    
            height:300px;
            background-color:#46474a;
        }
    </style>
</head>
<