3、CSS布局

发布于：2023-01-17 ⋅ 阅读:(169) ⋅ 点赞:(0)

网页布局

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

在这里插入图片描述

Div+css布局：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0Oeyyze-1660489090136)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210810064104511.png)]

div布局样式：

1.默认情况下每个div都会重启一行

2.设置大小：width和height

3.Position样式：绝对位置和相对位置

4.Float样式：浮动设置

5.Clear样式

堆叠顺序z-index:
在这里插入图片描述

居中：
在这里插入图片描述

•盒子属性：

–margin（外边距/边界）

•可统一设置或四边分开设置

•margin属性

–margin

–margin-top

–margin-right

–margin-bottom

–margin-left

–border（边框）

–padding（内边距/填充 ）

•padding属性

–padding

–padding-top

–padding-right

–padding-bottom

–padding-left

•各属性又分为

四个方向

在这里插入图片描述

div+css布局的优缺点：

在这里插入图片描述

表格布局方式：

表格可以用来做页面布局，但是table布局存在代码冗余过长、不符合HTML规范、搜索引擎不友好等问题

在这里插入图片描述

头部区域

头部区域位于整个网页的顶部，一般用于设置网页的标题或者网页的 logo：
在这里插入图片描述

<style>
body {
/* body的默认margin=8 */
  margin: 0;
}

/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>

<div class="header">
  <h1>头部区域</h1>
</div>

在这里插入图片描述

菜单导航区域

菜单导航条包含了一些链接，可以引导用户浏览其他页面：

在这里插入图片描述

/* 导航条 */
.topnav {
  overflow: hidden;/* 当子元素浮动时，它的父元素不是不在了，因为父元素的高height：auto为自动值，就是根据里面的内容自动设置高度，由于子元素设置了左浮动，已经浮动起来了属于浮动流，不在普通流中，因此父元素普通流中的内容为空，所以没有高度。解决方法就为给浮动块的父元素设置overflow：hidden；当然还有其他方法，这个最为简便。 */
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}


3

在这里插入图片描述

内容区域

内容区域一般有三种形式:

  • 1 列：一般用于移动端
  • 2 列：一般用于平板设备
  • 3 列：一般用于 PC 桌面设备

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vCJqm7vo-1660489090150)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210823061055601.png)]

<style>
        * {
            box-sizing: border-box;
        }
       /* box-sizing：content-box | border-box
		默认值：content-box
		1、content-box：
            padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即width + border + padding，表现为标准模式下的盒模型。box-sizing默认值为content-box，可以不写。
		2、border-box：
            padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义border和padding也不会改变对象的实际宽度，表现为怪异模式下的盒模型。
		3、box-sizing: border-box的典型应用：
        创建一个width为100%，border为10px的div。
        问题：不设置box-sizing的情况下，div会溢出。
        解决方法：设置box-sizing: border-box。
		*/

        /* 创建三个相等的列 */
        .column {
            float: left;
            width: 33.33%;
        }

        /* 列后清除浮动 */
        .row:after {
            content: "";
            display: block;
            clear: both;
        }

        /* 响应式布局 - 小于 600 px 时改为上下布局 */
        @media screen and (max-width: 600px) {
            .column {
                width: 100%;
            }
        }
    </style>

<div class="row">
    <div class="column">
        <h2>第一列</h2>
        <p>网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。</p>
    </div>

    <div class="column">
        <h2>第二列</h2>
        <p>网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。</p>
    </div>

    <div class="column">
        <h2>第三列</h2>
        <p>网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。</p>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ccu126NT-1660489090150)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210823061502826.png)]

不相等的列

不相等的列一般是在中间部分设置内容区域，这块也是最大最主要的，左右两次侧可以作为一些导航等相关内容，这三列加起来的宽度是 100％。


        /* 左右两侧宽度 */
        .column.side {
            width: 25%;
        }

        /* 中间区域宽度 */
        .column.middle {
            width: 50%;
        }



        <div class="row">
            <div class="column side">
                <h2>左侧栏</h2>
                <p>左侧栏</p>
            </div>

            <div class="column middle">
                <h2>主区域内容</h2>
                <p>网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。</p>
                <p>网页布局有很多种方式，一般分为以下几个部分：**头部区域、菜单导航区域、内容区域、底部区域**。</p>
            </div>

            <div class="column side">
                <h2>右侧栏</h2>
                <p>右侧栏</p>
            </div>
        </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u1BatrZh-1660489090152)(C:\Users\66496\AppData\Roaming\Typora\typora-user-images\image-20210823061825130.png)]

底部区域

底部区域在网页的最下方，一般包含版权信息和联系方式等。

在这里插入图片描述

/* 底部样式 */
.footer {
  background-color: #f1f1f1;
  padding: 10px;
  text-align: center;
}

<div class="footer">
  <p>底部区域</p>
</div>

iframe布局（后台布局）

<a href="information.html" class="link" target="frame">页面管理</a>

<iframe name="frame" src="information.html" width="1087" height="450" frameborder="0"></iframe>

在这里插入图片描述

弹出框布局

在这里插入图片描述

响应式网页布局

@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时，两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时，导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>

<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>

<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>

<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>2019 年 4 月 17日</h5>
      <div class="fakeimg" style="height:200px;">图片</div>
      <p>一些文本...</p>
      <p>响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。响应式布局页面，页面的布局会根据屏幕的大小来调整。</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;">图片</div>
      <p>关于我的一些信息..</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
      <div class="fakeimg"><p>图片</p></div>
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>一些文本...</p>
    </div>
  </div>
</div>

<div class="footer">
  <h2>底部区域</h2>
</div>

</body>
</html>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布