点击查看源码

1、css实现两列布局

1.右侧固定宽度，左侧自适应屏幕宽度;
2.左右两列等高布局;
3.左右两列的高度要求最小200px;

图1：

image.png

图2.

image.png

源码：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>css实现两列布局</title>
        <link rel="stylesheet" href="../libs/css/prism.css" />
        <style type="text/css">
            .container {
                padding: 0;
                margin: 0;
                position: relative;
                height: 100%;
                width: 100%;
            }
            .left,
            .right {
                min-height: 200px;
                overflow: hidden;
                height: 100px;
            }
            .left {
                background: #F8C555;
                overflow: hidden;
                margin-right: 300px;
            }
            .right {
                background: #FF0000;
                width: 300px;
                position: absolute;
                right: 0;
                top: 0;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="left">
                <h3>css实现两列布局</h3>
                <p>1.右侧固定宽度，左侧自适应屏幕宽度</p>
                <p>2.左右两列等高布局</p>
                <p>3.左右两列的高度要求最小200px</p>
            </div>
            <div class="right"></div>
        </div>
    </body>
</html>

2、使用css实现一个空心箭头和一个实心箭头

image.png

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>使用css实现一个空心箭头和一个实心箭头</title>
        <link rel="stylesheet" href="../libs/css/prism.css" />
        <style type="text/css">
            .container{
                height: 100%;
                width: 100%;
            }
            .icon-left{

                position: absolute;
                top: 0;
                left: 0;
                border-left:0px solid #000000 ;
                border-top:20px solid transparent ;
                border-bottom:20px solid transparent ;
                border-right:20px solid #000000;
            }
            .icon-left:after{
                content: "";
                position: absolute;
                left: 1px;
                top: -20px;
                border-left:0px solid #fff ;
                border-top:20px solid transparent ;
                border-bottom:20px solid transparent ;
                border-right:20px solid #fff;
            }
            .icon-right{
                position: absolute;
                left: 40px;
                top: 0;
                border-left:20px solid #000 ;
                border-top:20px solid transparent ;
                border-bottom:20px solid transparent ;
                border-right:0px solid #000;
            }

            
        </style>
    </head>

    <body>
        <div class="container">
            <span class="icon-left"></span>
            <span class="icon-right"></span>
        </div>
    </body>
</html>