找回密码
当前位置：前端开发者 > 未分类 > 正文

前端开发CSS部分知识实践

2018-07-11 分类：未分类 阅读(724) 评论(0)

前端流行的开发框架|移动前端开发题目|前端开发的框架缺陷

html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>css前端开发教程</title>
    <style type=”text/css”>
        .xc-china {
            width: 694px;
            margin: 0 auto;
            height: 800px;
            background: #2BB673;
        }
        #star {
            width: 0px;
            height: 0px;
            color: red;
            position: relative;
            display: block;
            border-bottom: 70px solid red;
            border-left: 100px solid transparent;
            border-right: 100px solid transparent;
            -webkit-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -o-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        .xc-bg {
            width: 0;
            height: 0;
            color: black;
            position: relative;
            z-index: 1;
            border-bottom: 199px solid #0062CC;
            border-left: 346px solid transparent;
            border-right: 346px solid transparent;
        }
        .xc-bg:before {
            content: “”;
            width: 692px;
            height: 400px;
            position: absolute;
            top: 199px;
            left: -346px;
            z-index: 1;
            background: #007AFF;
        }
        .xc-bg:after {
            content: “”;
            width: 0;
            height: 0;
            color: #0000FF;
            position: absolute;
            top: 599px;
            left: -346px;
            z-index: 1;
            border-top: 199px solid #0000FF;
            border-left: 346px solid transparent;
            border-right: 346px solid transparent;
        }
        .xc-bg-center {
            width: 348px;
            height: 600px;
            background: #008000;
            position: absolute;
            top: 100px;
            left: -174px;
            z-index: 2;
        }
        .xc-bg-center:before {
            position: absolute;
            content: “”;
            width: 0;
            height: 0;
            border-top: 99px solid #d90200;
            border-left: 176px solid transparent;
            border-right: 176px solid transparent;
        }
        .xc-bg-center:after {
            position: absolute;
            width: 0;
            height: 0;
            content: “”;
            top: 501px;
            border-bottom: 99px solid #d90200;
            border-left: 176px solid transparent;
            border-right: 176px solid transparent;
        }
        .xc-bg-c-c {
            width: 348px;
            height: 198px;
            background: #007AFF;
            position: relative;
            top: 199px;
        }
        .xc-bg-c-c:before {
            position: absolute;
            top: -99px;
            content: “”;
            border-bottom: 99px solid #007AFF;
            border-left: 176px solid transparent;
            border-right: 176px solid transparent;
        }
        .xc-bg-c-c:after {
            position: absolute;
            content: “”;
            top: 198px;
            border-top: 99px solid #007AFF;
            border-left: 176px solid transparent;
            border-right: 176px solid transparent;
        }
        .xc-bg-c-1 {
            position: absolute;
            width: 0;
            height: 0;
            left: 119px;
            top: -101px;
            border-bottom: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-1:before {
            content: “”;
            position: absolute;
            width: 0;
            height: 0;
            left: -58px;
            top: 101px;
            border-top: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-2 {
            position: absolute;
            width: 0;
            height: 0;
            left: 119px;
            top: 100px;
            z-index: 3;
            border-bottom: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-2:before {
            content: “”;
            position: absolute;
            width: 0;
            height: 0;
            left: -58px;
            top: 100px;
            border-top: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-3 {
            position: absolute;
            width: 0;
            height: 0;
            left: 163px;
            top: 75px;
            z-index: 3;
            border-bottom: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
            -webkit-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -o-transform: rotate(-60deg);
        }
        .xc-bg-c-3:before {
            content: “”;
            position: absolute;
            width: 0;
            height: 0;
            left: -58px;
            top: 100px;
            border-top: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-4 {
            position: absolute;
            width: 0;
            height: 0;
            left: 75px;
            top: 75px;
            z-index: 3;
            border-bottom: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
            -webkit-transform: rotate(60deg);
            -moz-transform: rotate(60deg);
            -ms-transform: rotate(60deg);
            -o-transform: rotate(60deg);
        }
        .xc-bg-c-4:before {
            content: “”;
            position: absolute;
            width: 0;
            height: 0;
            left: -58px;
            top: 100px;
            border-top: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-5 {
            position: absolute;
            width: 0;
            height: 0;
            left: 75px;
            top: 25px;
            z-index: 3;
            border-bottom: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -o-transform: rotate(120deg);
        }
        .xc-bg-c-5:before {
            content: “”;
            position: absolute;
            width: 0;
            height: 0;
            left: -58px;
            top: 100px;
            border-top: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
        .xc-bg-c-6 {
            position: absolute;
            width: 0;
            height: 0;
            left: 163px;
            top: 25px;
            z-index: 3;
            border-bottom: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
            -webkit-transform: rotate(240deg);
            -moz-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            -o-transform: rotate(240deg);
        }
        .xc-bg-c-6:before {
            content: “”;
            position: absolute;
            width: 0;
            height: 0;
            left: -58px;
            top: 100px;
            border-top: 101px solid #da9b02;
            border-left: 58px solid transparent;
            border-right: 58px solid transparent;
        }
    </style>
</head>
<body>
    <div class=”xc-china”>
        <div class=”xc-bg”>
            <div class=”xc-bg-center”>
                <div class=”xc-bg-c-c”>
                    <div class=”xc-bg-c-1″></div>
                    <div class=”xc-bg-c-2″></div>
                    <div class=”xc-bg-c-3″></div>
                    <div class=”xc-bg-c-4″></div>
                    <div class=”xc-bg-c-5″></div>
                    <div class=”xc-bg-c-6″></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

国内 前端开发框架|web前端开发精品课 html与css进阶教程|前端模块化开发 教程

赞(1)
前端开发者 » 前端开发CSS部分知识实践
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论