体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

老师请问这样可以吗

来源：2-13 编程练习

kongpain

2021-05-29 07:45:31

相关代码：

<!DOCTYPE html>问题描述：
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .gq{width: 3000px;
        height: 2000px;
        background-color: red;}
        .sjx1{
            position: relative;
            top: 100px;
            left: 100px;

        }
        .sjx2{
            position: relative;
            top: 100px;
            left: 200px;
        }
        .sjx3{
            position: relative;
            top: 100px;
            left: 300px;
        }
        .sjx4{
            position: relative;
            top: 100px;
            left: 400px;
        }
        .sjx5{
            position: relative;
            top: 100px;
            left: 500px;
        }
        .a{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(5deg);
        position: absolute;
        top: 150px;
        left: 480px;
        }
        .b{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-62deg);
        position: absolute;
        top: 150px;
        left: 480px;
        }
        .c{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-280deg);
        position: absolute;
        top: 150px;
        left: 480px;
        }
        .h{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(20deg);
        position: absolute;
        top: 350px;
        left: 600px;
        }
        .i{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-47deg);
        position: absolute;
        top: 350px;
        left: 600px;
        }
        .j{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-265deg);
        position: absolute;
        top: 350px;
        left: 600px;
        }
        .k{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(50deg);
        position: absolute;
        top: 660px;
        left: 550px;
        }
        .l{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-20deg);
        position: absolute;
        top: 660px;
        left: 550px;
        }
        .m{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-239deg);
        position: absolute;
        top: 660px;
        left: 550px;
        }
        .n{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(50deg);
        position: absolute;
        top: 900px;
        left: 250px;
        }
        .o{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-20deg);
        position: absolute;
        top: 900px;
        left: 250px;
        }
        .p{width: 0px;
        height: 0px;
        border-right: 100px solid transparent ;
        border-left: 100px solid transparent;
        border-bottom: 70px solid yellow;
        transform: rotate(-239deg);
        position: absolute;
        top: 900px;
        left: 250px;
        }
        .e{width: 0px;
        height: 0px;
        border-right: 250px solid transparent ;
        border-left: 250px solid transparent;
        border-bottom: 175px solid yellow;
        transform: rotate(35deg);
        position: absolute;
        top:  350px;
        left: -20px;
        }
        .f{width: 0px;
        height: 0px;
        border-right: 250px solid transparent ;
        border-left: 250px solid transparent;
        border-bottom: 175px solid yellow;
        transform: rotate(-34deg);
        position: absolute;
        top:  350px;
        left: -20px;
        }
        .g{width: 0px;
        height: 0px;
        border-right: 250px solid transparent ;
        border-left: 250px solid transparent;
        border-bottom: 175px solid yellow;
        transform: rotate(-253deg);
        position: absolute;
        top:  350px;
        left: -20px;
        }
    </style>
</head>
<body>
    <div class="gq">
        <div class="sjx1">
            <div class="e"></div>
            <div class="f"></div>
            <div class="g"></div>
        </div>
        <div class="sjx2">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c"></div>
        </div>
        <div class="sjx3">
            <div class="h"></div>
            <div class="i"></div>
            <div class="j"></div>
        </div>
        <div class="sjx4">
            <div class="k"></div>
            <div class="l"></div>
            <div class="m"></div>
        </div>
        <div class="sjx5">
            <div class="n"></div>
            <div class="o"></div>
            <div class="p"></div>
        </div>
    </div>


</body>
</html>

问题描述：

不太明白五角星怎么弄，还有伪元素是怎么使用

写回答

2回答

好帮手慕星星

2021-05-30

已采纳

同学你好，五角星实现是可以的，但是每个元素设置的有些大了，水平方向上有滚动条

http://img.mukewang.com/climg/60b3038c09ceedb611480947.jpg

建议再调整小一些。

另外伪元素是子元素，和a是兄弟关系

http://img.mukewang.com/climg/60b303ea09ac8aa604220143.jpg

如果改变a的旋转角度，两个伪元素位置不变

​http://img.mukewang.com/climg/60b3042a09050eba11580721.jpg

自己再测试下，祝学习愉快！

0

好帮手慕久久

2021-05-29

同学你好，五角星就是通过三角形拼接而成的：

http://img.mukewang.com/climg/60b1b528091f14b305510564.jpg

http://img.mukewang.com/climg/60b1b5360903d57e05920537.jpg

http://img.mukewang.com/climg/60b1b54009beeabc06320698.jpg


同学这样写是可以的，只是代码太冗余了。五个五角星，形状是一模一样的，只是各自的位置、旋转角度不一样，因此可以将形状样式复用，再设置不同的旋转角度和位置即可，例如：

http://img.mukewang.com/climg/60b1b455093968e306780777.jpg

样式参考如下（重写样式）：

http://img.mukewang.com/climg/60b1b48709dd821809601570.jpg

其中common1、common2、common3的样式是复用的同学的，sjx1~sjx3的位置、大小调整合适即可（数值自定义）。

可以把伪元素看成特殊的标签，伪元素与普通标签的区别在于它的结构不会真实存在于html结构中，即不需要提前在html中将其结构写出来，通过样式就能让其显示。可以把common2、common3换成伪元素，例如：

http://img.mukewang.com/climg/60b1b67b09671f0608890205.jpg

样式需要注意的是，伪元素必须设置content属性才行：

http://img.mukewang.com/climg/60b1b69c09ef7fe207730910.jpg

利用伪元素，可以简化html结构，比如上述代码，html中就少写了两个div。

祝学习愉快！

0
hongpain
hp>​<style>

        .gq {

            width: 3000px;

            height: 2000px;

            background-color: red;

        }


        .a {

            width: 0px;

            height: 0px;

            border-right: 100px solid transparent;

            border-left: 100px solid transparent;

            border-bottom: 70px solid yellow;

            transform: rotate(-35deg);

            position: absolute;

        }


        .wjx::before {

            content: "";

            width: 0px;

            height: 0px;

            border-right: 100px solid transparent;

            border-left: 100px solid transparent;

            border-bottom: 70px solid yellow;

            transform: rotate(32deg);

            position: absolute;

        }


        .wjx::after {

            content: "";

            width: 0px;

            height: 0px;

            border-right: 100px solid transparent;

            border-left: 100px solid transparent;

            border-bottom: 70px solid yellow;

            transform: rotate(250deg);

            position: absolute;

        }


        .wjx {

            position: relative;

        }


        .wjx1 {

            transform: translateX(480px) translateY(-220px) rotate(-15deg);


        }


        .wjx2 {


            transform: translateX(500px) translateY(-150px) rotate(-20deg);

        }



        .wjx3 {


            transform: translateX(400px) translateY(1250px) rotate(20deg);

        }


        .wjx4 {


            transform: translateX(550px) translateY(800px) rotate(10deg);

        }


        .wjx5 {

            transform: scale(1.8)  translate(700px) translateY(200px);


        }

    </style>

</head>


<body>

    <div class="gq">

        <div class="wjx1 wjx">

            <div class="a com"></div>

        </div>

        <div class="wjx2 wjx">

            <div class="a com"></div>

        </div>

        <div class="wjx3 wjx">

            <div class="a com"></div>

        </div>

        <div class="wjx4 wjx">

            <div class="a com"></div>

        </div>

        <div class="wjx5 wjx">

            <div class="a com"></div>

        </div>

    </div>

</body>


</html>


h021-05-30
共2条回复

0 学习 · 15276 问题

查看课程

相似问题

老师你看这样写可以吗？

回答 1

老师，这样可以吗？

回答 2

老师，可以这样写吗？

回答 1

慕ou老师请看下~~~

回答 1

老师请问这样做对不对？怎么做才是正确的，有完整代码吗？

回答 1

打开慕课网App查看更多内容