文字放在图片的下面 web前端网页布局

千次阅读

2021-05-31 12:06:30

效果图：

源代码：

<!DOCTYPE html>
<html>
<head>
<style>
    div.box{
        width:800px;
        height:300px;
        border:deeppink 3px dashed;
        border-radius:30px;
        background-color:mediumturquoise;
        margin-top:100px;
        margin-left:250px;
    }
div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  float: left;
  width: 180px;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=KJbcuxTk_lJZm33HdOwKrg2Jg2MJg6gXdWE2Quwe6-7Tl9vbTd3_6tyf08hDtsVidzAuwxLWjUkR9bfileIkeembFBgDPcWBUR_YO3oPfa1vA6PimWV3REnck5S6-AM61_KH9LBdt1gSj8_RmnLd5-fHo-VRXEiyhnTg5ppIYQPpmItSRwLk98DneP48csmszmrG0bQBSnA-qK2In0H6-eQeCxaBwPiH4yuuXfRPmRLEzkmnDHI8geD_NNiW_u1R&click_t=1622433596013&s_info=1263_660&wd=&eqid=eb81931a000008620000000360b45f37">
      <img src="images/flower-1.jpg" alt="Cinque Terre" width="600" height="400">
    </a>
    <div class="desc">花花草草</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=KJbcuxTk_lJZm33HdOwKrg2Jg2MJg6gXdWE2Quwe6-7Tl9vbTd3_6tyf08hDtsVidzAuwxLWjUkR9bfileIkeembFBgDPcWBUR_YO3oPfa1vA6PimWV3REnck5S6-AM61_KH9LBdt1gSj8_RmnLd5-fHo-VRXEiyhnTg5ppIYQPpmItSRwLk98DneP48csmszmrG0bQBSnA-qK2In0H6-eQeCxaBwPiH4yuuXfRPmRLEzkmnDHI8geD_NNiW_u1R&click_t=1622433596013&s_info=1263_660&wd=&eqid=eb81931a000008620000000360b45f37">
      <img src="images/flower-2.jpg" alt="Forest" width="600" height="400">
    </a>
    <div class="desc">花花草草</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=hDLr_7jI5Jj6SD0tCCGgnpkSKu_u5ejxKr4tUPNXPLfM_qE0sx-hy-5Gpw-kPBIMjL7qO2buC8j2JThs1YsUjtQ98Lqay4Gida5ZZgCECpG04-oUQ0YPm352UOCMyWknWA1pK5vAc51gW4kPD5UrKf5kzvJkk3OTo2lNmUvmDSHKqNB1nqoQZhuongo8RWebXaUtA0EXWDJoqZWed71LgnI5QeU41tGJ-KiStdbCEsCh5ftWYQjBXWOSmLZTgCMs&click_t=1622433409093&s_info=1263_660&wd=&eqid=b5d0f41000003f7c0000000360b45e7d">
      <img src="images/flower-3.jpg" alt="Northern Lights" width="600" height="400">
    </a>
    <div class="desc">红色郁金香</div>
  </div>
  
  <div class="gallery">
    <a target="_blank" href="https://www.baidu.com/link?url=Bm_ASbzcX8dbNgIUnBOxZ2nbfQVXKnBWbt0DCA-1jP75cvblUJTuRolKxw6cKZ4CjfG-vPG6_SbdGEDaao2E0wo3PIvF1gN_zc4nKh_xqYXN_IosYNTzTJlQTzJJsMIpMFgo4WN5pkU8TmqvhJtzxMWyvte4NEGPB6aP3AAXTbdX0ooHAhIwuih4KRjTJzBeTuU7QsNlSqXNICjHxdhSLuDtj4dQb-EGa-KdlSchz3CUsuHtTd4ZCJTqiWnUmRoD&click_t=1622433545002&s_info=1263_660&wd=&eqid=f084bbd900003e1b0000000360b45f03">
      <img src="images/flower-4.jpg" alt="Mountains" width="600" height="400">
    </a>
    <div class="desc">黄色郁金香</div>
  </div>
</div>
</body>
</html>

再附上一张原图

更多相关内容

移动端手机点餐前端网页
2017-09-06 10:46:17

手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页手机点餐前端网页

收起

总结了42种前端常用布局方案，值得看看

千次阅读 2021-12-09 14:21:08

这是【从头学前端】系列文章的第三十七篇-《四十二种前端布局方案》本系列文章在掘金首发，编写不易转载请获得允许对CSS布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的...

大家好，我是一碗周，一个不想被喝(内卷)的前端。如果写的文章有幸可以得到你的青睐，万分有幸~

这是【从头学前端】系列文章的第三十七篇-《四十二种前端布局方案》

对CSS布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

本篇文章总结了四十二种CSS的常见布局，这四十二种布局可以细分为如下几类：

水平居中
垂直居中
水平垂直居中
两列布局
三列布局
等分布局
Sticky Footer布局
全屏布局

这些内容也正是本篇文章的目录。

水平居中

实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的CSS代码如下所示：

.parent { background: #ff8787; }
.child { height: 300px; width: 300px; background: #e599f7; }

其HTML结构也是固定的，就是一个父级，其宽度继承了<body>的宽度，还有一个子级，这里是固定的300px*300px，代码如下：

<div class="parent">
  <div class="child"></div>
</div>

最终的实现效果如下：

01_居中布局.png

上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。

1. 使用text-align属性

若元素为行内块级元素，也就是display: inline-block的元素，可以通过为其父元素设置text-align: center实现水平居中。实现的CSS代码如下：

.parent {
  /* 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中 */
  text-align: center;
}

.child {
  display: inline-block;
}

2. 定宽块级元素水平居中(方法一)

对于定宽的的块级元素实现水平居中，最简单的一种方式就是margin: 0 auto;，但是值得注意的是一定需要设置宽度。

实现CSS代码如下：

.child {
  /* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */
  margin: 0 auto;
}

3. 定宽块级元素水平居中(方法二)

对于开启定位的元素，可以通过left属性和margin实现。

实现CSS代码如下：

.child {
  /* 开启定位 */
  position: relative;
  left: 50%;
  /* margin-left 为 负的宽度的一半 */
  margin-left: -150px;
}

4. 定宽块级元素水平居中(方法三)

当元素开启决定定位或者固定定位时，left属性和right属性一起设置就会拉伸元素的宽度，在配合width属性与margin属性就可以实现水平居中。

实现CSS代码如下：

.parent {
  position: relative;
  height: 300px;
}

.child {
  /* 开启定位 父相子绝 */
  position: absolute;
  /* 水平拉满屏幕 */
  left: 0;
  right: 0;
  width: 300px;
  /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */
  margin: auto;
}

5. 定宽块级元素水平居中(方法四)

当元素开启决定定位或者固定定位时，left属性和transform属性即可实现水平居中。

实现CSS代码如下：

.parent {
  position: relative;
}

.child {
  /* 开启定位 */
  position: absolute;
  /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
  left: 50%;
  transform: translateX(-50%);
}

6. Flex方案

通过Flex可以有很多方式实现这个居中布局的效果。

实现CSS代码如下：

.parent {
  height: 300px;
  /* 开启 Flex 布局 */
  display: flex;
  /* 通过 justify-content 属性实现居中 */
  justify-content: center;
}

.child {
  /* 或者 子元素 margin: auto*/
  margin: auto;
}

7. Grid方案

通过Grid实现居中布局比通过Flex实现的方式更多一些。

实现CSS代码如下：

.parent {
  height: 300px;
  /* 开启 Grid 布局 */
  display: grid;
  /* 方法一 */
  justify-items: center;
  /* 方法二 */
  justify-content: center;
}

.child {
  /* 方法三 子元素 margin: auto*/
  margin: auto;
}

以上就是水平居中布局常用的几种方式。

垂直居中

实现垂直布局也是比较简单的，方法也比较多，这里总结了6种常用的布局方法，其公共的CSS代码如下所示：

.parent {
  height: 500px;
  width: 300px;
  margin: 0 auto;
  background-color: #ff8787;
}
.child {
  width: 300px;
  height: 300px;
  background-color: #91a7ff;
}

其HTML结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下：

<div class="parent">
  <div class="child"></div>
</div>

最终的实现效果如下：

02_垂直居中.png

1. 行内块级元素垂直居中

若元素是行内块级元素, 基本思想是子元素使用display: inline-block, vertical-align: middle;并让父元素行高等同于高度。

实现CSS代码如下：

.parent {
  /* 为父级容器设置行高 */
  line-height: 500px;
}

.child {
  /* 将子级元素设置为 inline-block 元素 */
  display: inline-block;
  /* 通过 vertical-align: middle; 实现居中 */
  vertical-align: middle;
}

2. 定位方式实现(方法一)

第一种通过定位的方式实现就比较简单，实际就是通过top: 50%; margin-top: 等于负的高度的一半就可以实现垂直居中。

实现CSS代码如下：

.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  /* margin-top: 等于负高度的一半 */
  margin-top: -150px;
}

3. 定位方式实现(方法二)

第二种通过定位的方式实现实现思路：top和bottom将子元素拉伸至100%，设置指定的高度，通过margin:auto;即可实现垂直居中。

实现CSS代码如下：

.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  height: 300px;
  position: absolute;
  /* 垂直拉满 */
  top: 0;
  bottom: 0;
  /* margin: auto 即可实现 */
  margin: auto;
}

4. 定位方式实现(方法三)

第三种通过定位的方式就比较灵活，适用于多种场合，使用top配合tansform即可。

实现CSS代码如下：

.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

5. Flex方案

通过Flex可以有很多方式实现这个垂直居中布局的效果。

实现CSS代码如下：

.parent {
  /* 开启 flex 布局 */
  display: flex;
  /* 方法一 */
  /* align-items: center; */
}

.child {
  /* 方法二 */
  margin: auto;
}

通过Flex布局实现不仅仅只有上面两种，这里只介绍最简单的方式

6. Grid方案

通过Grid实现居中布局比通过Flex实现的方式更多一些。

实现CSS代码如下：

.parent {
  display: grid;
  /* 方法一 */
  /* align-items: center; */
  /* 方法二 */
  /* align-content: center; */
}

.child {
  /* 方法三 */
  /* margin: auto; */
  /* 方法四 */
  align-self: center;
}

以上就是垂直居中布局常用的几种方式。

水平垂直居中

实现水平垂直布局基本就是将上面几种方式结合使用，这里总结了7种常用的布局方法，其公共的CSS代码如下所示：

body {
  margin: 0;
}
.parent {
  height: 500px;
  width: 500px;
  background-color: #eebefa;
  margin: 0 auto;
}
.child {
  height: 300px;
  width: 300px;
  background-color: #f783ac;
}

其HTML结构也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下：

<div class="parent">
  <div class="child"></div>
</div>

最终的实现效果如下：

03_水平垂直布局.png

1. 行内块级水平垂直居中方案

步骤如下：

容器元素行高等于容器高度
通过text-align: center;实现水平居中
将子级元素设置为水平块级元素
通过vertical-align: middle;实现垂直居中

实现CSS代码如下：

.parent {
  /* 1. 设置行高等于容器高度 */
  line-height: 500px;
  /* 通过 text-align: center; 实现水平居中 */
  text-align: center;
}
.child {
  /* 将子级元素设置为水平块级元素 */
  display: inline-block;
  /* 通过 vertical-align: middle; 实现垂直居中 */
  vertical-align: middle;
}

2. 定位实现水平垂直居中方案(一)

步骤如下：

使子元素相对于容器元素定位
子元素开启绝对定位
设置该元素的偏移量，值为50% 减去宽度/高度的一半

实现CSS代码如下：

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}

3. 定位实现水平垂直居中方案(二)

步骤如下：

使子元素相对于容器元素定位
子元素开启绝对定位
设置该元素的偏移量，值为50%
通过外边距-值的方式将元素移动回去

实现CSS代码如下：

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50% */
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
}

4. 定位实现水平垂直居中方案(三)

步骤如下：

使子元素相对于容器元素定位
子元素开启绝对定位
将子元素拉满整个容器
通过margin:auto实现水平垂直居中

实现CSS代码如下：

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 将子元素拉满整个容器 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 4. 通过 margin:auto 实现水平垂直居中 */
  margin: auto;
}

5. 定位实现水平垂直居中方案(四)

步骤如下：

使子元素相对于容器元素定位
子元素开启绝对定位
设置该元素的偏移量，值为50%
通过translate反向偏移的方式，实现居中

实现CSS代码如下：

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%*/
  left: 50%;
  top: 50%;
  /* 通过translate反向偏移的方式，实现居中 */
  transform: translate(-50%, -50%);
}

6. Flex方案

步骤如下：

将元素设置为 Flex 布局
通过justify-content: center以及align-items: center实现或者margin: auto;实现。

实现CSS代码如下：

.parent {
  /* 1. 将元素设置为 Flex 布局 */
  display: flex;
  /* 2. 通过 justify-content 以及 align-items: center 实现 */
  /* justify-content: center;
  align-items: center; */
}
.child {
  /* 或者通过 margin auto 实现 */
  margin: auto;
}

7. Grid方案

Grid方案的实现方式相对来说比较简单，方式也较多。

实现CSS代码如下：

.parent {
  /* 1. 元素设置为Grid 元素 */
  display: grid;
  /* 通过 items 属性实现*/
  /* align-items: center; */
  /* justify-items: center; */
  /* items 的缩写 */
  /* place-items: center; */

  /* 或者通过 content 属性 */
  /* align-content: center; */
  /* justify-content: center; */
  /* content 的缩写 */
  /* place-content: center; */
}
.child {
  /* 或者通过 margin auto 实现 */
  /* margin: auto; */
  /* 或者通过 self 属性 */
  /* align-self: center;
  justify-self: center; */
  /* self 的缩写 */
  place-self: center;
}

实现水平垂直居中布局的方式大多是通过上面两种布局的方式相结合。

两列布局

所谓的两列布局就是一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。最终效果如下所示：

04_两列布局.gif

这里用到的HTML结构如下：

<!-- 解决高度塌陷 -->
<div class="container clearfix">
  <div class="left">定宽</div>
  <div class="right">自适应</div>
</div>

公共的CSS代码如下：

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
.right {
  height: 400px;
  background-color: #c0eb75;
  font-size: 70px;
  line-height: 400px;
}
/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

1. float+calc()函数完成左列定宽右列自适应

步骤如下：

左边列开启浮动
右边列开启浮动
右边列宽度为父级 100%减去左列的宽度

实现CSS代码如下：

.left {
  /* 左边列开启浮动 */
  float: left;
}
.right {
  /* 右边列开启浮动 */
  float: left;
  /* 宽度减去左列的宽度 */
  width: calc(100% - 200px);
}

2. float+margin-left完成左列定宽右列自适应

步骤如下：

左边列开启浮动
通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

实现CSS代码如下：

.left {
  /* 左边列开启浮动 */
  float: left;
}
.right {
  /* 通过外边距的方式使该容器的左边有200px */
  margin-left: 200px;
}

3. absolute+margin-left完成左列定宽右列自适应

步骤如下：

开启定位脱离文档流
通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

实现CSS代码如下：

.left {
  /* 开启定位脱离文档流 */
  position: absolute;
}
.right {
  /* 通过外边距的方式使该容器的左边有200px */
  margin-left: 200px;
}

值得注意的是 以上几种方案左边列必须定宽，才可以实现，下面这几种方案左边列可以由子级撑起。

4. float+overflow完成左列定宽右列自适应

步骤如下：

左侧元素开始浮动
右侧自适应元素设置overflow会创建一个BFC完成自适应

实现CSS代码如下：

.left {
  /* 1. 左侧元素开始浮动 */
  float: left;
}
.right {
  /* 2. 右侧自适应元素设置 overflow 会创建一个BFC 完成自适应 */
  overflow: hidden;
}

5. Flex方案

通过Flex布局实现该功能主要是通过 flex 属性来实现示例代码如下：

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */
}

6. Grid方案

通过 Grid 布局实现该功能主要是通过template属性实现，具体代码如下所示：

.container {
  display: grid;
  /* 将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度*/
  grid-template-columns: auto 1fr;
}

三列布局

三列布局主要分为两种：

第一种是前两列定宽，最后一列自适应，这一种本质上与两列布局没有什么区别，可以参照两列布局实现。
第二种是前后两列定宽，中间自适应，最终效果图如下

05_三列布局.gif

公共CSS如下：

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.left {
  height: 400px;
  width: 200px;
  background-color: #f783ac;
}
.content {
  height: 400px;
  background-color: #d9480f;
}
.right {
  height: 400px;
  width: 200px;
  background-color: #c0eb75;
}
.left,
.content,
.right {
  font-size: 70px;
  line-height: 400px;
  text-align: center;
}
/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

HTML 结构如下：

<!-- 解决高度塌陷 -->
<div class="container clearfix">
  <div class="left">左</div>
  <div class="content">内容</div>
  <div class="right">右</div>
</div>

1. 通过float实现(一)

实现步骤：

为了完成效果需要调整HTML结构，调整后如下：

<!-- 解决高度塌陷 -->
<div class="container clearfix">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="content">内容</div>
</div>

左列容器开启左浮动
右列容器开启右浮动
自适应元素设置overflow会创建一个BFC完成自适应

实现CSS代码如下：

.left {
  /* 1. 左列容器开启左浮动 */
  float: left;
}
.content {
  /* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */
  overflow: hidden;
}
.right {
  /* 2. 右列容器开启右浮动 */
  float: right;
}

2. 通过float实现(二)

实现步骤：

为了完成效果需要调整 HTML 结构，调整后如下：

<!-- 解决高度塌陷 -->
<div class="container clearfix">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="content">内容</div>
</div>

左列容器开启左浮动
右列容器开启右浮动
使中间自适应的宽度为父级容器减去两个定宽的列

实现CSS代码如下：

.left {
  /* 1. 左列容器开启左浮动 */
  float: left;
}
.content {
  /* 3. 使中间自适应的宽度为父级容器减去两个定宽的列 */
  width: calc(100%-400px);
}
.right {
  /* 2. 右列容器开启右浮动 */
  float: right;
}

3. 通过position实现

实现步骤

左右两列脱离文档流，并通过偏移的方式到达自己的区域
使中间自适应的宽度为父级容器减去两个定宽的列
通过外边距将容器往内缩小

实现CSS代码如下：

.left {
  /* 1. 左右两列脱离文档流，并通过偏移的方式到达自己的区域 */
  position: absolute;
  left: 0;
  top: 0;
}
.content {
  /* 2. 使中间自适应的宽度为父级容器减去两个定宽的列 */
  width: calc(100%-400px);
  /* 3. 通过外边距将容器往内缩小 */
  margin-right: 200px;
  margin-left: 200px;
}
.right {
  position: absolute;
  right: 0;
  top: 0;
}

4. Flex方案

通过 Flex 布局实现该功能主要是通过 flex 属性来实现。

实现CSS代码如下：

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */
}

5. Grid方案

通过 Grid 布局实现该功能主要是通过 template 属性实现。

实现CSS代码如下：

.container {
  display: grid;
  /* 将其划分为两行，其中一列有本身宽度决定， 一列占剩余宽度*/
  grid-template-columns: auto 1fr auto;
}

等分布局

等分布局就是将一个容器平均分成几等份，这里以 4 等分为例，主要介绍4种方法。

公共CSS部分如下：

body {
  margin: 0;
}
.container {
  height: 400px;
  background-color: #eebefa;
}
.item {
  height: 100%;
}
.item1 {
  background-color: #eccc68;
}
.item2 {
  background-color: #a6c1fa;
}
.item3 {
  background-color: #fa7d90;
}
.item4 {
  background-color: #b0ff70;
}
/* 清除浮动 */
.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

公共HTML代码如下：

<!-- 父元素清除浮动 -->
<div class="container clearfix">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

最终的效果如下图所示：

06_等分布局.png

1. 浮动+百分比方式

这种方式比较简单，开启浮动，使每个元素占25%的宽度。

实现CSS代码如下：

.item {
  /* 开启浮动，每个元素占 25% 的宽度 */
  width: 25%;
  float: left;
}

2. 行内块级+百分比方式

这种方式与上面那种方式类似，不过需要注意的是行内块级元素有一些类似于边距的几个像素，导致各25%会超出容器。

实现CSS代码如下：

.item {
  /* 设置每个元素为行内块级元素，每个元素占 24.5% 的宽度 */
  width: 24.5%;
  /* 因为行内块级元素有一些类似于边距的几个像素，导致各占25会超出容器 */
  display: inline-block;
}

3. Flex方案

通过 Flex 布局实现该功能主要是通过flex属性来实现。

实现CSS代码如下：

.container {
  /* 开启 flex 布局 */
  display: flex;
}
.item {
  /* 每个元素占相同的宽度 */
  flex: 1;
}

4. Grid方案

通过 Grid 布局实现该功能主要是通过template属性实现。

实现CSS代码如下：

.container {
  /* 开启 grid 布局 */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 使用 repeat 函数生成如下代码 */
  /* grid-template-columns: 1fr 1fr 1fr 1fr; */
}

Sticky Footer布局

所谓的Sticky Footer 布局并不是一种新的前端技术和概念，它就是一种网页布局。如果页面内容不够长时，底部栏就会固定到浏览器的底部；如果足够长时，底部栏就后跟随在内容的后面。如下图所示：

07_Sticky Footer布局.png

这里来介绍实现该布局的4种方式

公共的CSS代码如下：

body {
    margin: 0;
}
.container {
    height: 400px;
    display: flex;
}
.left {
    height: 400px;
    width: 200px;
    background-color: #f759ab;
}
.content {
    height: 400px;
    background-color: #52c41a;
    flex: 1;
}
.right {
    height: 400px;
    width: 200px;
    background-color: #f759ab;
}
.left,
.content,
.right {
    font-size: 70px;
    line-height: 400px;
    text-align: center;
}
.header {
    height: 100px;
    background-color: #70a1ff;
}
.footer {
    height: 100px;
    background-color: #ff7a45;
}
.header,
.footer {
    line-height: 100px;
    font-size: 52px;
    text-align: center;
}

公共的HTML如下：

<div class="main">
    <div class="header">header</div>
    <div class="container">
        <div class="left">left</div>
        <div class="content">content</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</div>

1. 绝对定位的方式

通过绝对定位的方式实现Sticky Footer布局的步骤如下：

设置最外层容器高度为100%；
让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%；
在中间区域设置padding-bottom为footer的高度；
底部栏绝对定位，并一直吸附在底部即可实现。

实现CSS代码如下：

/* 1. 设置最外层容器为100% */
html,
body {
    height: 100%;
}
/* 2. 让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100% */
.main {
    position: relative;
    min-height: 100%;
}
/* 3. 在中间区域设置 padding-bottom 为footer 的高度 */
.container {
    padding-bottom: 100px;
}
/* 由于开启了绝对定位，宽度成了自适应，设置为100% bottom:0 始终保持底部 */
.footer {
    position: absolute;
    width: 100%;
    bottom: 0;
}

2. 使用calc函数实现

使用calc函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。

实现CSS代码如下：

.container {
    /* 这里的 中间 部分的容器最少为视口宽度的 100% - 头部和底部两部分的高度即可完成该功能 */
    min-height: calc(100vh - 200px);
}

3. Flex方案

实现步骤如下

开启flex布局
将子元素布局方向修改为垂直排列
设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部
设置中间部分容器高度为自适应

实现CSS代码如下：

.main {
    /* 开启flex布局 */
    display: flex;
    /* 将子元素布局方向修改为垂直排列 */
    flex-flow: column;
    /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */
    min-height: 100vh;
}
.container {
    /* 设置 中间 部分自适应 */
    flex: 1;
}

4. Grid方案

实现步骤如下

开启grid布局
置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部

实现CSS代码如下：

.main {
    /* 开启grid布局 */
    display: grid;
    grid-template-rows: auto 1fr auto;
    /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */
    min-height: 100vh;
}

全屏布局

全部布局主要应用在后台，主要效果如下所示：

08_全屏布局.png

这里介绍三种全屏布局的实现方法。

公共的CSS代码如下：

body {
  margin: 0;
}
body,
html,
.container {
  height: 100vh;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
}
.content {
  background-color: #52c41a;
  /* * 中间部门的布局可以参考 两列 三列 布局 */
  display: grid;
  grid-template-columns: auto 1fr;
}
.left {
  width: 240px;
  background-color: #52c41a;
  font-size: 80px;
  line-height: calc(100vh - 200px);
}
.right {
  background-color: #f759ab;
  font-size: 60px;
}
.header {
  height: 100px;
  background-color: #70a1ff;
}
.footer {
  height: 100px;
  background-color: #ff7a45;
}
.header,
.footer {
  line-height: 100px;
  font-size: 52px;
}

HTML结构如下：

<div class="container">
    <div class="header">header</div>
    <div class="content">
        <div class="left">导航</div>
        <div class="right">
            <div class="right-in">自适应，超出高度出现滚动条</div>
        </div>
    </div>
    <div class="footer">footer</div>
</div>

1. 使用calc函数实现

实现步骤如下：

通过calc函数计算出中间容器的高度。
中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。

实现CSS代码如下：

.content {
    overflow: hidden;
    /* 通过 calc 计算容器的高度 */
    height: calc(100vh - 200px);
}
.left {
    height: 100%;
}
.right {
    /* 如果超出出现滚动条 */
    overflow: auto;
    height: 100%;
}
.right-in {
    /* 假设容器内有500px的元素 */
    height: 500px;
}

2. Flex 方案

使用Flex方式实现该布局比较简单。

实现CSS代码如下：

.container {
    /* 开启flex布局 */
    display: flex;
    /* 将子元素布局方向修改为垂直排列 */
    flex-flow: column;
}
.content {
    /* 如果超出出现滚动条 */
    overflow: auto;
    /* 设置 中间 部分自适应 */
    flex: 1;
}
.right-in {
    /* 假设容器内有500px的元素 */
    height: 500px;
}

3. Grid 方案

grid布局对于这种布局来说，实现起来是非常得心应手的，通过template属性即可实现。

实现CSS代码如下：

.container {
    /* 开启grid布局 */
    display: grid;
    grid-template-rows: auto 1fr auto;
}
.content {
    /* 如果超出出现滚动条 */
    overflow: auto;
}
.right-in {
    /* 假设容器内有500px的元素 */
    height: 500px;
}

{完}

写在最后

你如果看到这里，我感到很荣幸，如果你喜欢这篇文章，你可以为这篇文章点上一个小赞；你如果喜欢这个专栏，我会一直更新到百篇以上，可以点一下后面的链接从头学前端 - 一碗周的专栏进入之后给个关注。

最后也可以给我点个关注，万分荣庆。

往期推荐

关于v-model语法糖的知识点，这次应该说全了

收起

展开全文

css css3

Web前端页面设计毕业论文.pdf
2021-01-07 00:49:10

Web前端页面设计毕业论文.pdf

收起
（47）网页布局常用工具
2021-12-22 11:53:20

用于编写前端代码，微软公司使用electron前端客户端技术做出的vscode软件，功能虽然比不上webstrom编辑器强大，但是它使用起来启动速度更快，功能强大度达到webstrom的90%，自从vscode的出现，大部分企业的前端...

一、vscode代码编辑器

用于编写前端代码，微软公司使用electron前端客户端技术做出的vscode软件，功能虽然比不上webstrom编辑器强大，但是它使用起来启动速度更快，功能强大度达到webstrom的90%，自从vscode的出现，大部分企业的前端工程师都在使用vscode编辑器，因为它开发效率不仅高，启动速度还快。

二、Fireworks量取设计图软件

该工具可以测量整个页面版心的px像素值，以及可以使用标尺工具，按shift键可以查看到margin或者padding的距离，切片工具可以测量宽高尺寸，吸管工具可以吸取网页内容的颜色。

三、pxcook量取设计图软件

该工具可以测量整个页面版心的px像素值，以及可以使用标尺工具，可以查看到margin或者padding的距离，切片工具可以测量宽高尺寸，吸管工具可以吸取网页内容的颜色。是目前前端开发用的最多的设计图软件。

四、colors.exe拾色器软件

该工具可以吸取颜色，并且吸取的颜色可以复制，上面介绍的软件虽然可以吸取颜色，但是吸取的颜色无法复制。

五、FastStone Capture截图工具

非常好用的截图工具，推荐使用。适合做笔记使用。FastStone Capture是一款经典好用的屏幕截图软件，FastStone Capture可以捕获BMP、GIF、JPEG等众多格式的图片，软件还具有屏幕录像的功能，方便用户录制精彩的瞬间，软件还可以截取滚动页面，方便用户截图。

FastStone Capture截图工具下载网址：https://www.faststonecapture.cn/

5.1FastStone Capture功能介绍

  1.取色器

      现在网上各式各样的取色器应该不少了，包括之前一直用的蓝色经典推荐的ColorSPY ， Firefox 下还有一个专门的取色器扩展ColorZilla ，这些都是很好的软件。

2.屏幕放大镜

      这确实是一个不错的功能，特别是现在我们已经习惯用DIV 来对页面定位，DIV 之间的对齐不像表格那样容易控制，有时为了调整几个象素的偏差，不得不对着屏幕盯很久。

3.屏幕录像机

      屏幕录像机功能可以录制屏幕动作，将窗口/对象、矩形区域或全屏区域的屏幕录制为高清晰 WMV 视频。

4. 截屏

      包括了全屏截取，当前活动窗口截取，截取选定区域，多边形截取和截取滚动页面等，基本上常用的都有了。

5.图像浏览/ 编辑

      FastStone Capture (FSCapture) 还包括快速浏览/ 编辑图像的功能，可以点击主窗口的“ 打开” 图标快速打开一幅图片，进行简单的缩放、裁切、旋转、加文字等轻量级的操作。

5.2FastStone Capture软件特点

截长图，方便快捷！

      图文并茂没有图?深度好文图片渣?汇报展示效果糊?当务之急，使用 FastStone Capture，集图像捕捉、编辑、调整于一身。清晰大图，即刻生成。

      屏幕录制，流畅不卡顿!

      录制工具太复杂?录制效果不清晰?录完发现有卡顿?使用 FastStone Capture，软件操作、课件制作、网络教学、游戏录制轻松上手，操作简单画质优。

      清晰大图，即刻生成!

      效果展示内容太多?表格文档明细太长?其他工具截图不完整?隐私区域不能展示? 使用 FastStone Capture，对指定区域进行滚动截图，点到为止，想截哪里截哪里。

5.3FastStone Capture使用方法

   1、打开在本站下载FastStone Capture软件，打开软件后，进入软件主界面

      2、常用快捷的截图会在软件列出来，红框中的是快捷活动窗口截图功能，一点击就会将目前活动的窗口进行截屏，不需要选择。

    3、第二个是窗口截图选择，点击后会智能识别当前的窗口范围，选择窗口后就可成功截图。截取的图片会自动保存。

      4、第三个是矩形截图功能，您可以点击鼠标左键或点击一个角点，移动鼠标到另一个角点并点击就可截图。

      5、第四个是任意多边形截图功能，截取自定义图形图片，您可以在您要截取的图片上画出一个心形的形状，如图所截爱心形状的图。

    6、第五个是捕捉整个屏幕截图功能，点击这个选项就可以快速截取整个屏幕。

    7、第七个是固定大小截图，点击这个选择后，截取的图标是固定的大小，您还可以重新调整截图的大小。

5.4FastStone Capture常见问题

faststone capture如何自定义滚屏截图？

      1、打开您要滚动截取的网页。

      2、打开FastStone Capture软件，打开软件后点击第七个选项，如图所示，滚动截图选项

      3、按住“Ctrl”键不放，就可以用用鼠标光标拖动，自定义出要截图的区域，然后释放Ctrl键

      4、点击“向下滚动”箭头，开始滚动截图。

      5、接着页面就会自动向下滚动，此时FS Capture就能截取滚动出来的页面，如果不想截取整个页面，可以在滚动到适合位置时，按下“Esc”键结束截图，如果没有按“Esc”键，就会一直向下滚动把整个页面截下来。截图成功后，就会自动在Faststone Editor中打开，如下图所示：

FastStone Capture怎么录制视频

      1、打开FastStone Capture软件，点击视频录制选项。

      2、打开视频录像机窗口后，您可以选择您要录制的窗口，您可以选择矩形窗口，固定大小区域等您可以自行选择，您还可以选择录制的音频来源。

      3、如果您想进行其他选项的设置，您可以点击【选项】设置，打开选项窗口后，您可以对视频，音频，快捷键等进行设置，设置完成后点击【确定】就可以了。

收起

展开全文

vscode
网页前端高级编程-实验报告-DIV静态页面布局.doc
2021-08-21 09:26:55

网页前端高级编程-实验报告-DIV静态页面布局

收起

前端页面几大布局

千次阅读 2019-05-15 15:58:12

从纯html结构加上css代码堆出来的页面，到类似bootstrap框架的栅格化布局，再到flex流式布局，随着不同框架、新css特性的诞生，前端页面整体布局，越来越灵活，代码量越来越小，不同浏览器兼容性越来越好。...

从纯html结构加上css代码堆出来的页面，到类似bootstrap框架的栅格化布局，再到flex流式布局，随着不同框架、新css特性的诞生，前端页面整体布局，越来越灵活，代码量越来越小，不同浏览器兼容性越来越好。对于工作中常用的几类布局，做个小结。

一、传统布局

浮动
定位
基本css

浮动（float）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        p:nth-child(1){
            float: left;
        }
        p:nth-child(2){
            float: right;
        }
    </style>
</head>
<body>
    <div>
        <p>left</p>
        <p>right</p>
    </div>
</body>
</html>

不结合任意UI框架，css的float属性使用过程对html结构也有一定的要求，浮动之后，脱离文档流，块元素会转行内，如果有父元素必须清除浮动，否则页面整体样式会乱，不同浏览器下会出现各种兼容性问题。

若n个子元素，合理化的结构是加上外层父级元素，且父级要清除浮动，以保证正确的文档流，不影响后续结构；
若n个子元素，不加外层父级元素，每个元素需写明元素宽高，且多个元素的总宽总高需保证页面结构按设计的铺排；
一般文字环绕图形的样式会涉及到浮动，该布局可由文字撑起整个父元素的宽高

定位（position）

常用相对定位、绝对定位、固定定位。

固定定位：一般项目页面的头部、尾部或侧边导航、小工具，常用position：fixed，再制定相对于正常可视区文档流的left、top值
相对定位、绝对定位：页面常用父级元素position：relative，子元素position：absolute，left、right、top、bottom根据实际项目需求设置相关的参数（px、百分比）

基本css（行内元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        p{display:inline-block}
    </style>
</head>
<body>
    <div>
        <p>left</p>
        <p>right</p>
    </div>
</body>
</html>

css属性display：inline-block能实现浮动相同的效果

二、flex布局

父元素display：flex，子元素：flex：1（flex为1，子元素均分父元素的宽度或高度，若子元素单独设置flex：2、3、5等，会占有对应的比例宽度），父元素flex-direction决定了自适应的方向，垂直或者水平。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex</title>
    <style type="text/css">
        div{
            display: flex;
            flex-direction:row； // 横向，从左到右  参数可选row、row-reserve、column、column-reserve
            flex-wrap:nowrap； //不换行  参数可选nowrap、wrap、wrap-reserve
        }
        p{
            flex: 1;
            flex: 1 1 auto; // 简写 flex-grow | flex-shrink | flex-basis
        }
    </style>
</head>
<body>
    <div>
        <p>111</p>
        <p>222</p>
        <p>333</p>
    </div>
</body>
</html>

在这里插入图片描述

三、网格布局

相比传统、flex一维布局，grid可视为二维布局,可同时指定x、y方向，也就是行（rows）和列（column），容器指定为网格布局属性display：grid，再指定行列数及元素大小，grid-template-columns及grid-template-rows，rows可不指定，按column的参数自适应。

div{
    display: grid;
    grid-template-columns: 10px 10px 10px;
    grid-template-rows: 10px 10px 10px;
    gap: 10px 10px；// 行、列间隔10px
}
// repeat简写
div{
	display:grid;
	grid-template-columns:repeat(3,10px);
}
// 当repeat的第一个次数参数不确定，不确定容器大小的时候，可用auto-fill关键字，让单元格自适应容器的大小，自动填充
div{
	display:grid;
	grid-template-columns:repeat(auto-fill,10px);
}
//fr关键字，用比例表示
div{
	display:grid;
	grid-template-columns:1fr，2fr; //两列，第二列是第一列的两倍
	grid-template-columns:100px，1fr，2fr; //三列，第一列100px，第三列是第二列的两倍
}
//minmax（），min、max最大最小值
div{
	display:grid;
	grid-template-columns:1fr 1fr minmax(100px, 1fr);// 列宽不小于100px，不大于1fr
}
//auto关键字，浏览器自己决定
div{
	display:grid;
	grid-template-columns:100px auto 100px;//
}
//

网格布局在设定行列相关参数之后可定义自动填充，grid-auto-flow默认先行后列，也可手动设置先列后行grid-auto-flow：column。

div{
	display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
    grid-auto-flow: row dense; //dense参数定义了先行后列之后，让单元格尽可能填充，不出现空白区域
}

例如页面常见水平、垂直都居中的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float</title>
    <style type="text/css">
        ul{
			display: grid;
  			grid-template-columns: 100px 100px 100px;
  			grid-template-rows: 100px 100px 100px;
  			justify-items:center;
  			align-items:center
		}
		// justify-items:center和align-items:center等同于place-items:center center；
    </style>
</head>
<body>
    <ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
	</ul>
</body>
</html>

页面效果
在这里插入图片描述

收起

展开全文

flex grid

Web前端网页期末大作业
2022-01-10 14:53:09

主页设计布局是在网站的左上... 首先选定本网页制作工具是前端开发利器： WebStorm，创建前端项目工程，并创建相应的文件夹，存放各个css、js，还有网页中用到的各种图片放到pic文件夹中，背景音乐放到music文件夹中。

收起
前端页面几种常见的布局方式
2021-07-10 09:45:26

1、静态布局 2、弹性布局 3、自适应布局 4、流式布局 5、响应式布局 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 圣杯布局方式 <!DOCTYPE ...

收起
页面布局的方式——前端
千次阅读 2019-05-31 08:24:20

文章目录页面布局的方式——前端页面布局的方式双飞翼布局多栏布局弹性布局（Flexbox）瀑布流布局流式布局（Fluid）响应式布局注页面布局的方式页面布局的方式主要有：双飞翼、多栏、弹性、流式、瀑布流、响应式...

收起

面试题
浅谈前端网页栅格化布局
千次阅读 2020-07-08 11:42:18

栅格化定义：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。网页栅格系统是从平面栅格系统中发展而来。对于网页设计来说，栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，...

收起

html css
【前端自适应布局】
2022-03-14 14:45:09

文章目录代码示例在开发过程中，分辨率不同时，设计的大屏展示效果不同，为了保持页面不形变，这里采用的是对横纵进行等比例缩放代码示例 <template> <div class="ScreenAdapter" ...

收起

javascript vue.js
前端网页 (页面布局) 教程
千次阅读 2020-09-18 17:17:54

页面布局一．盒模型： 1.所谓盒模型，就是浏览器为页面中的每个HTML元素(标签)生成的矩形盒子。这些盒子们都要按照可见板式模型在页面上排布。可见的板式模型主要由三个属性控制： (1)position属性:position属性...

收起

html5 html
CSS 网页布局排版实例
2020-09-25 11:41:16

CSS实现的多列排版布局实例，学习div+css布局的朋友可以参考下。

收起
web前端开发工程师必会的5种网页布局方法？
2020-10-13 14:04:38

不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中...

收起

css html web
Bootstrap_06.rar,对前端网页桌面布局进行分析
2020-05-12 16:41:28

Bootstrap_06.rar,对前端网页桌面布局进行分析,栅格系统的应用,前端页面的上下级进行分层处理,实现一个简单的网页

收起

HTMl
前端网页学习12（设计优秀网页的三种布局方式）
2021-02-04 14:22:53

网页布局三种方式：标准流浮动定位标准流：行内元素可以一行多个。块级元素独占一行。即每个元素都有自己的格式。常用于从上到下布局。浮动：定义：元素脱离原有的位置，处于更高的一个层次。语法 ...

收起

css html
前端常用布局大全——细致讲解
2022-01-07 19:02:32

作为一名前端开发者，每天都在和浏览器打交道，而浏览器中展示的网页需要做的很美观，并且可以吸引住用户浏览网页，提升用户体验是很重要的，所以不可避免的就要用到各种各样的布局。今天就来列举一下各种常用布局...

收起

css javascript
前端自适应布局
千次阅读 2019-12-23 00:17:02

在前端开发中，我们不可避免要面临适配问题。本文将介绍几种适配方式：一、px和em 1.1 px 1.2 em 二、rem 2.1 rem原理 2.2 rem如何计算的 2.3rem使用三、使用插件px2rem转换 3.1 原理和优点 3.2 使用...

收起
前端页面美食天下网页——css布局说明文档
2018-05-09 10:37:59

前端页面美食天下网页——css布局说明文档，单纯的css页面

收起

Html
前端静态网页布局经验谈
千次阅读 2019-04-01 19:54:21

静态布局（Static Layout）是最传统的网页布局方式，也是前端的一个基本功，通常应用于PC端布局，当我们拿到UI提供的PC端PS设计稿，基本上就要用到静态布局了。静态布局对前端来说是比较简单的，但如果想做到又快又...

收起

css
Web前端布局详解
千次阅读 多人点赞 2019-10-21 13:35:01

Web前端布局方式布局的概念什么是布局布局的作用布局的方式浮动布局定位布局静态布局流式布局弹性布局自适应布局响应式布局常见布局问题高度坍塌布局的概念什么是布局布局是前端人员的核心基础技能。目的是...

收起
前端五种布局
2022-04-14 10:50:13

首先，前端的五种布局包括固定布局，流式布局，弹性布局，自适应布局和响应式布局固定布局：最早期2000年左右的时候，因为大家都是使用的大脑袋电脑，显示屏或大或小都差不多，所以对于布局的要求不是很高，那个...

收起
前端7大常用布局方式
万次阅读 多人点赞 2019-10-21 16:35:51

Web前端常用布局方式页面的布局方式是块状元素依次从上至下、从左至右进行布局布局的作用对公司、企业而言视觉极佳的布局效果能让在瞬间抓住客户的心，能吸引潜在的合作者。适用性，根据不同行业情况进行不同...

收起

Web html
前端必会三种CSS布局
千次阅读 2022-04-11 17:51:20

概述大概布局情形如下： ...只要掌握了这三种布局方式，搭建一个完整网页是没有问题的。正文一般的PC端网站宽度是1280px，这里方便我们用宽度为1000px。另外如果我们不设置的话，默认浏览器会存在8px的边

收起
web的各种前端打印方法之CSS控制网页打印样式
2020-09-22 14:55:51

使用CSS控制打印样式，握刚刚使用时一塌糊涂，根本不知道CSS中的midia的作用是什么，问到别人说导入这个样式，还傻乎乎的不知所措,接下来介绍CSS控制网页打印样式是如何实现的

收起
前端如何解决pc端屏幕显示设置缩放比例对页面布局的影响？
千次阅读 2021-04-08 13:43:51

这对我们前端的页面的布局会产生一些影响首先，单独的响应式布局hold不住这个问题，因为出问题的是device-pixel-ratio。问题现象是高分屏下整好的东西，在普分屏下会放大；而普分屏下整好的东西，在高分屏...

收起
分享 10 个常见的 CSS 页面布局代码片段
千次阅读 2022-02-21 00:04:27

大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。1、Card layo...

收起

html css css3 html5 javascript
CSS高级技巧:网页布局
2020-12-09 18:36:43

布局技术之间没有本质的区别, 相同一种布局让100个前端开发工程师来做, 可能就有100种方法. 居中在table时代, align和Valign相当的好用, 而在CSS中却没有简单实现的方法,所以在标准化刚刚开始推广的时候

收起
前端开发_HTML5_布局-表格布局
2021-12-19 21:47:52

所谓的表格布局就是使用表格内容的特性:可以使用"tr"产生行，使用“td”产生列，并使用无边框的特性，然后把整个页面当作值一个页面，把网页中的内容按照版式划分放入表格的单元格中，从而实现复杂的排版组合。...

收起

html5 html

移动端手机点餐前端网页

总结了42种前端常用布局方案，值得看看

水平居中

1. 使用text-align属性

2. 定宽块级元素水平居中(方法一)

3. 定宽块级元素水平居中(方法二)

4. 定宽块级元素水平居中(方法三)

5. 定宽块级元素水平居中(方法四)

6. Flex方案

7. Grid方案

垂直居中

1. 行内块级元素垂直居中

2. 定位方式实现(方法一)

3. 定位方式实现(方法二)

4. 定位方式实现(方法三)

5. Flex方案

6. Grid方案

水平垂直居中

1. 行内块级水平垂直居中方案

2. 定位实现水平垂直居中方案(一)

3. 定位实现水平垂直居中方案(二)

4. 定位实现水平垂直居中方案(三)

5. 定位实现水平垂直居中方案(四)

6. Flex方案

7. Grid方案

两列布局

1. float+calc()函数完成左列定宽右列自适应

2. float+margin-left完成左列定宽右列自适应

3. absolute+margin-left完成左列定宽右列自适应

4. float+overflow完成左列定宽右列自适应

5. Flex方案

6. Grid方案

三列布局

1. 通过float实现(一)

2. 通过float实现(二)

3. 通过position实现

4. Flex方案

5. Grid方案

等分布局

1. 浮动+百分比方式

2. 行内块级+百分比方式

3. Flex方案

4. Grid方案

Sticky Footer布局

1. 绝对定位的方式

2. 使用calc函数实现

3. Flex方案

4. Grid方案

全屏布局

1. 使用calc函数实现

2. Flex 方案

3. Grid 方案

写在最后

Web前端页面设计毕业论文.pdf

（47）网页布局常用工具

一、vscode代码编辑器

二、Fireworks量取设计图软件

三、pxcook量取设计图软件

四、colors.exe拾色器软件

五、FastStone Capture截图工具

5.1FastStone Capture功能介绍

5.2FastStone Capture软件特点

5.3FastStone Capture使用方法

5.4FastStone Capture常见问题

网页前端高级编程-实验报告-DIV静态页面布局.doc

前端页面几大布局

一、传统布局

浮动（float）

定位（position）

基本css（行内元素）

二、flex布局

三、网格布局

Web前端网页期末大作业

前端页面几种常见的布局方式

页面布局的方式——前端

浅谈前端网页栅格化布局

【前端自适应布局】

前端网页 (页面布局) 教程

CSS 网页布局排版实例

web前端开发工程师必会的5种网页布局方法？