Semantic Ui 之容器 container

最新推荐文章于 2021-10-25 13:16:48 发布

梁云亮

最新推荐文章于 2021-10-25 13:16:48 发布

阅读量1k

点赞数 4

分类专栏： # Semantic UI 文章标签： Semantic Ui 容器 container

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107881427

版权

Semantic UI 专栏收录该内容

36 篇文章 7 订阅

订阅专栏

第一步：创建项目

添加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>

显示效果

在这里插入图片描述

梁云亮

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Semantic Ui 之容器 container

第一步：创建项目添加JQuery和Semantic UI包、创建container.html页面：第二步：container.html页面<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>容器</title> <link rel="stylesheet" href="semant
复制链接

扫一扫