老师帮我检查下代码，还有什么需要优化的吗？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        *{padding: 0;margin: 0;border: 0;}
        .main{width: 300px;height: 200px;background: red;margin: 0 auto;}
        .pic{width: 0;height: 0;position: relative;margin-left: 100px;
             border-top: 20px solid transparent;
             border-left: 38px solid transparent;
             border-right: 38px solid transparent;
             border-bottom: 20px solid yellow;
             transform: rotate(-33deg);}
        .pic::before{content:""; width: 0;height: 0;display: block;
             border-top: 20 solid transparent;
             border-left: 38px solid transparent;
             border-right: 38px solid transparent;
             border-bottom: 20px solid yellow;
             position: absolute;left: -40px;top: -1px;
             transform: rotate(64deg);}
        .pic::after{content:""; width: 0;height: 0;display: block;
             border-top: 10px solid transparent;
             border-left: 10px solid transparent;
             border-right: 35px solid yellow;
             border-bottom: 10px solid transparent;
             position: absolute;top:-22px;left: -7px;
             transform: rotate(125deg);}
        .star_one{transform: translate(445px,-175px) scale(.7) rotate(-36deg);}
        .star_two{transform: translate(500px,-243px) scale(.3) rotate(-12deg);}
        .star_three{transform: translate(520px,-258px) scale(.3) rotate(25deg);}
        .star_four{transform: translate(510px,-270px) scale(.3) rotate(-32deg);}
        .star_five{transform: translate(490px,-290px) scale(.3) rotate(8deg);}
    </style>
</head>
<body>
    
    <div class="main"></div>
    <div class="pic star_one"></div>
    <div class="pic star_two"></div>
    <div class="pic star_three"></div>
    <div class="pic star_four"></div>
    <div class="pic star_five"></div>

</body>
</html>

原来是晓琪_ 2019-05-17

源自：CSS3转换 2-8 编程练习

收起

5回答

好帮手慕星星回答被采纳获得+3积分 2019-05-21 18:43:14

你好，

1、左边距是根据浏览器左侧进行显示的，间距是固定的，位置也就是固定的。

2、把五角星放在main容器之后需要重新调整平移的位置，现在五角星显示在屏幕以外：

可以调整一下定位：

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

收起回答

提问者原来是晓琪_ 2019-05-21 14:10:47

q1老师为什么变成固定外边距就可以了呢？

q2我把五角星放main中不显示怎么菲斯？

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>2-3</title>
    <style type="text/css">
        /* 此处写代码*/
        *{padding: 0;margin: 0;border: 0;}
        .main{width: 300px;height: 200px;background: red;margin:0 auto;position: relative;z-index: 1;}
        .pic{width: 0;height: 0;position: relative;margin-left: 100px;
             border-top: 20px solid transparent;
             border-left: 38px solid transparent;
             border-right: 38px solid transparent;
             border-bottom: 20px solid yellow;
             transform: rotate(-33deg);z-index: 99;}
        .pic::before{content:""; width: 0;height: 0;display: block;
             border-top: 20 solid transparent;
             border-left: 38px solid transparent;
             border-right: 38px solid transparent;
             border-bottom: 20px solid yellow;
             position: absolute;left: -40px;top: -1px;
             transform: rotate(64deg);z-index: 99;}
        .pic::after{content:""; width: 0;height: 0;display: block;
             border-top: 10px solid transparent;
             border-left: 10px solid transparent;
             border-right: 35px solid yellow;
             border-bottom: 10px solid transparent;
             position: absolute;top:-22px;left: -7px;
             transform: rotate(125deg);z-index: 99;}
        .star_one{transform: translate(445px,-175px) scale(.7) rotate(-36deg);}
        .star_two{transform: translate(500px,-243px) scale(.3) rotate(-12deg);}
        .star_three{transform: translate(520px,-258px) scale(.3) rotate(25deg);}
        .star_four{transform: translate(510px,-270px) scale(.3) rotate(-32deg);}
        .star_five{transform: translate(490px,-290px) scale(.3) rotate(8deg);}
    </style>
</head>
<body>
    
    <div class="main">
    <div class="pic star_one"></div>
    <div class="pic star_two"></div>
    <div class="pic star_three"></div>
    <div class="pic star_four"></div>
    <div class="pic star_five"></div>
    </div>
</body>

</html>

收起回答

好帮手慕星星 2019-05-20 19:09:56

你好，在大分辨率电脑上显示如下：

是因为main盒子相对于水平方向上居中显示的，但是五角星是相对于页面左侧进行定位的，可以调整为固定的margin-left值：

或者把五角星放在main容器中进行设置。

祝学习愉快！

收起回答

提问者原来是晓琪_ 2019-05-17 16:26:26

老师这是我这边显示的结果

收起回答

卡布琦诺 #1

同学的代码虽然实现了效果，但是由于html布局不合理，会导致在分辨率不同的电脑上，显示效果不同，老师给出的方法，在不同分辨率的电脑上显示也是可以的，祝学习愉快！

2019-05-17 16:32:08
提问者原来是晓琪_ 回复卡布琦诺 #2

老师可以指导下我哪布局不合理吗具体一下谢啦

2019-05-20 12:57:37