第一步:创建项目
添加JQuery和Semantic UI包、创建shape.html页面:
第二步:shape.html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shape</title>
<link rel="stylesheet" >
<script type="text/javascript" src="js/jquery3.3.1.js"></script>
<script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
</head>
<body>
<div class="ui container">
<div class="ui shape">
<div class="sides">
<div class="active first side">
<img src="imgs/android.png" class="ui medium image">
</div>
<div class="second side">
<img src="imgs/cpp.png" class="ui medium image">
</div>
<div class="third side">
<img src="imgs/dotnet.png" class="ui medium image">
</div>
<div class="third side">
<img src="imgs/ios.png" class="ui medium image">
</div>
</div>
</div>
</div>
</body>
</html>
测试查看效果
本文地址:http://www.51sjk.com/Upload/Articles/1/0/268/268060_20210708022707674.jpg