semantic-ui引入css和js(折叠菜单为例)

来源：互联网发布：mysql显示当前时间指令编辑：程序博客网时间：2024/05/17 23:50

#index.html

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8" />        <meta http-equiv="X-UA-COMPATIBLE" content="IE-edge,chrome-1" />        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">        <title>Semantic-UI</title>        <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"><!--引入css文件-->        <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script><!--引入jquery文件-->        <script src="semantic/dist/semantic.min.js"></script><!--引入semantic.min.js文件-->        <script src="index.js"></script><!--引入自定义的js文件-->    </head>    <body>        <div class="ui container">            <div class="main">                <div class="ui styled fluid accordion">                    <div class="active title">                        <i class="dropdown icon"></i>                        什么是狗？                    </div>                    <div class="active content">                    <p>狗算是一种家畜。以其忠诚与忠心广受人类欢迎, 可以在世界各地的许多家庭里发现这个受欢迎的客人。</p>                    </div>                    <div class="title">                        <i class="dropdown icon"></i>                        狗有哪些种类？                    </div>                    <div class="content">                        <p>狗有许多品种，每个品种都有不同的大小及性格，饲主通常选择适合自己生活方式的品种当作自已的伙伴，其中最受欢迎的品种绝对是吉娃娃。</p>                    </div>                    <div class="title">                        <i class="dropdown icon"></i>                        如何获得一只狗?                    </div>                    <div class="content">                        <p>通常有三种方式可以取得一只狗狗，宠物店、私人饲主或是动物之家。 (请以领养代替购买)</p>                        <p>通常有三种方式可以取得一只狗狗，宠物店、私人饲主或是动物之家。 (请以领养代替购买)        你可以在动物之家内领养一只健康的小狗，比起在宠物店买，收容所中的宠物比较不容易有近亲交配出现的缺陷问题，而且领养一只小狗的费用远比你在宠物店中购买便宜得多。</p>                    </div>                </div>            </div>        </div>    </body></html>

#index.js

$(document).ready(function(){    $('.ui.accordion').accordion({duration:'click'});});

#网页效果

#界面结构

主要文件夹(其他为NodeJS程序文件)：

semantic文件夹
index.html
index.js
semantic.json

0 0