麻烦老师看下，这样写可不可以，谢谢老师
来源：2-8 编程练习
秋荏苒
2019-07-06 00:36:36
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
@font-face {
font-family: 'iconfont'; /* project id 1279998 */
src: url('//at.alicdn.com/t/font_1279998_0hee1ge7kfqq.eot');
src: url('//at.alicdn.com/t/font_1279998_0hee1ge7kfqq.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_1279998_0hee1ge7kfqq.woff2') format('woff2'),
url('//at.alicdn.com/t/font_1279998_0hee1ge7kfqq.woff') format('woff'),
url('//at.alicdn.com/t/font_1279998_0hee1ge7kfqq.ttf') format('truetype'),
url('//at.alicdn.com/t/font_1279998_0hee1ge7kfqq.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont", serif !important;
font-size: 18px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
color: yellow;
}
.bg {
width: 800px;
height: 600px;
background: red;
margin: 0 auto;
position: relative;
}
.start01 {
padding-top: 30px;
padding-left: 30px;
}
.start01 > i {
font-size: 180px;
}
.start02 {
position: absolute;
top: 15px;
left: 220px;
transform: rotate(-45deg);
}
.start03 {
position: absolute;
top: 80px;
left: 270px;
transform: rotate(45deg);
}
.start04 {
position: absolute;
top: 155px;
left: 270px;
}
.start05 {
position: absolute;
top: 230px;
left: 220px;
transform: rotate(-45deg);
}
.start02 > i,
.start03 > i,
.start04 > i,
.start05 > i {
font-size: 50px;
}
</style>
</head>
<body>
<div class="bg">
<div class="start01">
<i class="iconfont"></i>
</div>
<div class="start02">
<i class="iconfont"></i>
</div>
<div class="start03">
<i class="iconfont"></i>
</div>
<div class="start04">
<i class="iconfont"></i>
</div>
<div class="start05">
<i class="iconfont"></i>
</div>
</div>
</body>
</html>写回答
1回答
-
好帮手慕夭夭
2019-07-06
你好同学，代码中使用的图标地址是有问题的，老师这边测试如下：
另外，建议同学不要使用iconfont，五角星使用css也能绘制，初学的时候要多动手练习哦。思路如下：
可以观察一下，一个五角星是由三个三角形组成，所以先绘制一个三角形。第一个三角绘制好之后 ，另外两个三角就是通过旋转不同的角度 （transform: rotate(<angle>); angle指旋转角度），从而组成了一个五角星。
所以重要的是要绘制一个三角形，它的思路是如下这样
当一个盒子设置width和height为0后，整个盒子就都是由边框组成的。当给一个盒子4个角度的边框设置不同颜色的时 ，会发现它表现形式就是4个三角：
所以给其他三个角度的边框设置透明背景色（transparent），就会剩一个三角形状了。
一个五角星绘制出来了，那么其他几个绘制方法都是一样的哦。只不过是通过定位，让它们在不同的位置上显示。
按照如上尝试一下哦，祝学习愉快，望采纳。
0
相似问题