当前位置: 移动技术网 > IT编程>网页制作>HTML > Semantic UI 之 Shape页面编写

Semantic UI 之 Shape页面编写

2020年08月11日  | 移动技术网IT编程  | 我要评论
第一步:创建项目添加JQuery和Semantic UI包、创建shape.html页面:第二步:shape.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Shape</title> <link rel="stylesheet" href="semantic-ui

第一步:创建项目

添加JQuery和Semantic UI包、创建shape.html页面:

在这里插入图片描述

第二步:shape.html页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Shape</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <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> 

测试查看效果

在这里插入图片描述

本文地址:https://blog.csdn.net/lianghecai52171314/article/details/107915511

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网