css实现圣杯布局、三角形

最新推荐文章于 2023-08-01 18:50:37 发布

ttt_wtw

最新推荐文章于 2023-08-01 18:50:37 发布

阅读量617

点赞数

本文链接：https://blog.csdn.net/u014027876/article/details/82667878

版权

1.使用flex实现圣杯布局

圣杯布局格式要求：

页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。

中部三列式布局：左右两列定宽，不可伸缩；中间内容区自适应。

完整代码及代码分析如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>圣杯布局</title>
	<style type="text/css">
    *{
        box-sizing:content-box;/* 伸缩项目自动box-sizing:border-box，所以需调整为content-box */
        margin:0;
        padding:0;
    }

    body{
        display:flex;
        flex-direction:column;/* 头、中部、脚纵向显示 */
    }

    header,footer{
        flex:0 0 50px; /* 头、脚尺寸固定，不放大、不缩小 */
        background:#3f3f3f;
    }

    .main{
        display:flex;
        flex:1;
        /* 
        flex:1 == 1 1 auto：剩余空间放大比例(flex-grow)  空间不足缩小比例(flex-shrink)  分配多余空间之前项目占据的主轴空间(flex-basis)
        flex:1指的是：中部区域自由伸缩
        auto指的是项目本来大小，因未给main设置高度,main高度由子元素最高者决定，若子元素高度为0，则main高度为0
        块级元素未主动设置高度或未被子元素撑起高度，浏览器默认为块级元素分配高度为0。
        */
    }

   .content{
        flex:1;
        background:red;
        height:1000px;
        /* 
        横向中间内容区自适应，即使未指定宽度，但会分配宽度 
        块级元素未主动设置宽度或未被子元素撑起宽度，浏览器默认为块级元素分配宽度为可使用的全部宽度，比如全屏宽。
        */
   }

   .left,.right{
        height:800px;
        background:blue;
        width:200px;
   }

   .left{
        order:-1;/* 让left居于左侧 */
   }

</style>
</head>
<body>
	<header></header>
    <div class="main">
        <div class="content"></div>  //可保证中间元素最先加载
        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

2.css实现三角形

先创建一个有宽高的盒子，同时设置四条边框的大小，假设为50px，结果如下图：

<style>
.triangle{
	width:100px;
	height:100px;
	border-top:50px solid red;
	border-left: 50px solid blue;
	border-right:50px solid pink;
	border-bottom: 50px solid yellow;
}
</style>

<body>
    <div class="triangle"></div>
</body>

上述代码效果图如下：

可以发现边框与边框的连接是一条斜线，那么如果不设置宽高的话（width,height均设为0），结果会怎样：

变成了一个被四种颜色平均分割的正方形了，我们所要的三角形不正是其中的一部分吗，接下来我们只要选择我们所需要的那一部分就好了，所以可以这么做（选择下面那块黄色的），修改CSS代码以后就可以得到三角形。想要哪边就画哪边的border,并且让它相邻两边的border-color:transparent即可：

.triangle{
	width:0px;
	height:0px;
    /*此处将左右的边框设置为透明色*/
	border-left: 50px solid transparent;
	border-right:50px solid transparent;
	border-bottom: 50px solid yellow;
}

ttt_wtw

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css实现圣杯布局、三角形

1.使用flex实现圣杯布局圣杯布局格式要求：页面从上到下为头部、中部、脚部；头部、脚部定高，不可伸缩；中部高度自适应。中部三列式布局：左右两列定宽，不可伸缩；中间内容区自适应。完整代码及代码分析如下：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt;...
复制链接

扫一扫