手机端一个自适应页面的四叶草五功能的简单页面

本文链接：https://blog.csdn.net/jibibihe123/article/details/44702041

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=320.1,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
    <link rel="apple-touch-startup-image" href="#" sizes="320x460" media="screen and (max-device-width: 320)">
    <link rel="apple-touch-startup-image" href="#" sizes="640x920" media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">
    <link rel="apple-touch-startup-image" href="#" sizes="768x1004" media="screen and (min-device-width: 481px) and (orientation:portrait)">

    <style>
        *
        {
            box-sizing: border-box;
        }

        body
        {
            margin: 0px;
        }

        .taocan
        {
            position: relative;
            overflow: hidden;
        }

            .taocan div
            {
                width: 50%;
                float: left;
                border: 1px #fff solid;
                background-color: #52ca64;
                padding-bottom: 50%;
                background-repeat: no-repeat;
                background-position: center 40px;
                background-size: auto 30%;
                position: relative;
            }

            .taocan .yuan
            {
                position: absolute;
                background-color: #ffffff;
                display: block;
                z-index: 999;
                width: 40%;
                padding-bottom: 40%;
                border-radius: 50%;
                left: 50%;
                margin-left: -20%;
                margin-top: 30%;
            }

            .taocan .aa
            {
                position: absolute;
                border-radius: 50%;
                width: 94%;
                padding-bottom: 94%;
                margin: 3%;
            }

            .taocan .bb
            {
                border-radius: 0px 30% 0px 30%;
            }

            .taocan .cc
            {
                border-radius: 30% 0px 30% 0px;
            }

            .taocan .dd
            {
                border-radius: 30% 0px 30% 0px;
            }

            .taocan .ee
            {
                border-radius: 0px 30% 0px 30%;
            }
    </style>
</head>
<body>
    <div class="taocan">
        <a href="#" class="yuan">
            <div class="aa">
            </div>
        </a>
        <a href="#">
            <div class="bb">
            </div>
        </a>
        <a href="#">
            <div class="cc">
            </div>
        </a>
        <a href="#">
            <div class="dd">
            </div>
        </a>
        <a href="#">
            <div class="ee">
            </div>
        </a>
    </div>
</body>
</html>