css/HTML手写

最新推荐文章于 2023-06-24 23:11:48 发布

PhotograpHB

最新推荐文章于 2023-06-24 23:11:48 发布

阅读量155

点赞数

分类专栏：基础知识文章标签： css flex html

本文链接：https://blog.csdn.net/weixin_41935198/article/details/113855376

版权

基础知识专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了前端布局中的两种经典方案——圣杯布局和双飞翼布局。通过代码实例详细解释了如何使用浮動和负margin实现圣杯布局，以及通过调整元素位置和内边距实现双飞翼布局。同时，文章还探讨了使用Flexbox弹性盒模型简化这两种布局的实现方式，展示了在不同屏幕尺寸下自适应布局的实现。

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

文章目录

手写/代码实现

手写/代码实现

正方形/圆形/半圆/三角形/骰子

实现三角形原理

基于标准盒模型实现：

一个盒子包括: margin+border+padding+content
上下左右边框交界处出呈现平滑的斜线. 利用这个特点, 通过设置不同的上下左右边框宽度或者颜色可以得到小三角, 小梯形等.
调整宽度大小可以调节三角形形状.

边框：

border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为CSS下划线效果应用

HTML

<div>
	<div className="square"></div>
    <div className="circle"></div>
    <div className="semicircle"></div>
    <div class="triangle"></div>
    <div class="box">
      <span class="item"></span>
      <span class="item"></span>
      <span class="item"></span>
    </div>
</div>

CSS

.square {
  width: 100px;
  height: 100px;
  background: #FF9900;
/*   居中 */
  margin: auto;
  border-bottom: 10px solid #ffffff;
}

.circle {
  width: 100px;
  height: 100px;
  background: #FF9900;
  border-radius: 50px;
/*   居中 */
  margin: auto;
}

.semicircle {
  width: 100px;
  height: 50px;
  background: #FF9900;
  border-radius: 50px 50px 0 0;
/*   居中 */
  margin: auto;
  border-bottom: 10px solid #ffffff;
}

.triangle {
  width: 0;
  height: 0;
  border-bottom: 100px solid pink;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  margin: auto;
}

.box {
  width: 200px;
  height: 200px;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  justify-content: space-between; /* 两端对齐 */
}
.item {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #666;
}
.item:nth-child(2) {
  align-self: center; /* 垂直方向居中 */
}
.item:nth-child(3) {
  align-self: flex-end; /* 垂直方向尾对齐 */
}

圣杯布局

圣杯布局（Holy Grail Layout）指的是一种最常见的网站布局。页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏。

使用 float 布局
两侧使用 margin 负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用 padding，一个用margin

<div id="header">this is header</div>
      <div id="container">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
      </div>
<div id="footer">this is footer</div>

1.设置基本样式

.left, .main, .right {
  min-height: 130px;/* 为了高度保持一致给left main right都加上min-height:130px */
}
.left {
  background: green;
  width: 200px;
}
.main {
  background-color: blue;
}
.right {
  background-color: red;
  width: 300px;
}

2.圣杯布局是一种相对布局，首先设置父元素container的位置：
实现效果是左右分别空出200px和300px区域

.container {
  padding: 0 300px 0 200px;
  /* padding-left: 200px;
  padding-right: 150px; */
}

在这里插入图片描述

3.将主体部分的三个子元素都设置左浮动

.left, .main, .right {
  min-height: 130px;
  float: left;
}

4.设置main宽度为width:100%,让其单独占满一行

.main {
  background-color: blue;
  width: 100%;
}

在这里插入图片描述

5.设置left和right 负的外边距

我们的目标是让left、main、right依次并排，但是上图中left和right都是位于下一行，这里的技巧就是使用负的margin-left:

.left {
  margin-left: -100%;
  background-color: green;
  width: 200px;
}
.right {
  margin-left: -300px;
  background-color: red;
  width: 300px;
}

负的margin-left会让元素沿文档流向左移动，如果负的数值比较大就会一直移动到上一行。
设置left部分的margin-left为-100%，就会使left向左移动一整个行的宽度，由于left左边是父元素的边框，所以left继续跳到上一行左移，一直移动到上一行的开头，并覆盖了main部分（仔细观察下图，你会发现main里面的字“main”不见了，因为被left遮住了），left上移过后，right就会处于上一行的开头位置，这时再设置right部分margin-left为负的宽度，right就会左移到上一行的末尾。

在这里插入图片描述
6.接下来只要把left和right分别移动到这两个留白就可以了。可以使用相对定位移动 left和right部分。

.left, .main, .right {
  position: relative;
  min-height: 130px;
  float: left;
}
.left {
  left: -200px;
  margin-left: -100%;
  background: green;
  width: 200px;
}
.right {
  right: -300px;
  margin-left: -300px;
  background-color: red;
  width: 300px;
}

在这里插入图片描述
完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圣杯布局</title>
    <style type="text/css">
    .header {
	  text-align: center; /* 文本居中 */
	  background-color: #f1f1f1;
	}
    .container {
        padding: 0 300px 0 200px;
    }
    .left, .main, .right {
        position: relative;
        min-height: 130px;
        float: left;
    }
    .left {
        left: -200px;
        margin-left: -100%;
        background: green;
        width: 200px;
    }
    .right {
        right: -300px;
        margin-left: -300px;
        background-color: red;
        width: 300px;
    }
    .main {
        background-color: blue;
        width: 100%;
    }
    .footer {
	  clear: both; /* footer 向下移动清除左右浮动*/
	  text-align: center;
	  background-color: #f1f1f1;
	}
    </style>
</head>
<body>
<div class="header">this is header</div>
<div class="container"> 
　　<div class="main">main</div> 
　　<div class="left">left</div> 
　　<div class="right">right</div> 
</div>
<div class="footer">this is footer</div>
</body>
</html>

圣杯布局flex实现

HTML:

<body class="HolyGrail">
  <header>header</header>
  <div class="HolyGrail-body">
    <main class="HolyGrail-content">content</main>
    <nav class="HolyGrail-nav">nav</nav>
    <aside class="HolyGrail-ads">ads</aside>
  </div>
  <footer>footer</footer>
</body>

CSS：

.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header, footer {
  flex: 1;
  background-color: #ccc;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
  background-color: #0000FF;
}

.HolyGrail-ads {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
  background-color: rgb(6, 252, 190);
}

.HolyGrail-nav {
  /* 两个边栏的宽度设为12em */
  flex: 0 0 12em;
  /* 导航放到最左边 */
  order: -1;
  background-color: #FF0000;
}

如果是小屏幕，躯干的三栏自动变为垂直叠加。

@media (max-width: 768px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

双飞翼布局

HTML：

<div id="main" class="col">
  <div id="main-wrap">
    this is main
  </div>
</div>
<div id="left" class="col">
    this is left
</div>
<div id="right" class="col">
    this is right
</div>

CSS：

body {
  min-width: 550px;
}
.col {
  float: left; /* 首先让 left 和 right 都在左侧浮动 */
}
#main-wrap {
  margin: 0 190px 0 190px; /* 左右使用 margin 留白 */
}
#main {
  width: 100%;
  height: 200px;
  background-color: #ccc;
}
#left {
  width: 190px;
  height: 200px;
  background-color: #0000FF;
  margin-left: -100%; /* 与圣杯布局一样 */
}
#right {
  width: 190px;
  height: 200px;
  background-color: #FF0000;
  margin-left: -190px; /* 往左拖动 190px，这里是 margin-left */
}

PhotograpHB

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css/HTML手写

正方形/圆形/半圆/三角形/骰子HTML<div> <div className="square"></div> <div className="circle"></div> <div className="semicircle"></div> <div class="triangle"></div> <div class="box"> &
复制链接

扫一扫

专栏目录