0
点赞
收藏
分享

微信扫一扫

Semantic Ui 之 容器 container #yyds干货盘点#

第一步:创建项目

添加JQuery和Semantic UI包、创建container.html页面:
在这里插入图片描述

第二步:container.html页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>容器</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">
           <p>
               HikariCP是由日本程序员开源的一个数据库连接池组件,代码非常轻量,并且速度非常的快。根据官方提供的数据,在i7,开启32个线程32个连接的情况下,进行随机数据库读写操作,HikariCP的速度是现在常用的C3P0数据库连接池的数百倍。
           </p>
       </div>
        <!--突显要显示的文字,左右边距很大,其中文字很大-->
        <div class="ui text container">
            <p>
                HikariCP是由日本程序员开源的一个数据库连接池组件,代码非常轻量,并且速度非常的快。根据官方提供的数据,在i7,开启32个线程32个连接的情况下,进行随机数据库读写操作,HikariCP的速度是现在常用的C3P0数据库连接池的数百倍。
            </p>
        </div>
        <!--没有左右边距,其中文字宽度占满整个屏幕-->
        <div class="ui fluid container">
            <p>
                HikariCP是由日本程序员开源的一个数据库连接池组件,代码非常轻量,并且速度非常的快。根据官方提供的数据,在i7,开启32个线程32个连接的情况下,进行随机数据库读写操作,HikariCP的速度是现在常用的C3P0数据库连接池的数百倍。
            </p>
        </div>

        <br>
        <br>
        <!--容器的对齐方式-->
        <!--居中-->
        <div class="ui center aligned container">
            <p>
                HikariCP是由日本程序员开源的一个数据库连接池组件,代码非常轻量,并且速度非常的快。根据官方提供的数据,在i7,开启32个线程32个连接的情况下,进行随机数据库读写操作,HikariCP的速度是现在常用的C3P0数据库连接池的数百倍。
            </p>
        </div>
        <!--居左-->
        <div class="ui left aligned container">
            <p>
                HikariCP是由日本程序员开源的一个数据库连接池组件,代码非常轻量,并且速度非常的快。根据官方提供的数据,在i7,开启32个线程32个连接的情况下,进行随机数据库读写操作,HikariCP的速度是现在常用的C3P0数据库连接池的数百倍。
            </p>
        </div>
        <!--居右-->
        <div class="ui right aligned container">
            <p>
                HikariCP是由日本程序员开源的一个数据库连接池组件,代码非常轻量,并且速度非常的快。根据官方提供的数据,在i7,开启32个线程32个连接的情况下,进行随机数据库读写操作,HikariCP的速度是现在常用的C3P0数据库连接池的数百倍。
            </p>
        </div>
    </body>
</html>

显示效果

在这里插入图片描述

举报

相关推荐

0 条评论