10、Semantic-UI之图片的使用

1|010.1 图片的使用

• 定义有边框的图片样式

<img class="ui medium bordered image" src="../images/pic.png" alt="" />

• 图片圆角显示

<img class="ui medium rounded image" src="../images/pic.png" alt="" />

• 设置图片椭圆形显示

<img class="ui medium circular image" src="../images/pic.png" alt="" />

2|010.2 图片的状态和大小设置

  在Semantic-UI中定义了图片的两种状态，激活和禁用。

2|1示例：设置拖欠状态

• 激活状态

<img class="ui medium active image" src="../images/pic.png" alt="" />

• 禁用状态

<img class="ui medium disabled image" src="../images/pic.png" alt="" />

2|2示例：图片大小设置

<img class="ui tiny image" src="../images/pic.png" alt="" />
<img class="ui small image" src="../images/pic.png" alt="" />

2|310.3 图片浮动

  在一些论坛中，用户头像下面会显示一些用户相关信息。

  在Semantic-UI中可以非常轻松的实现。

2|4示例：定义左右浮动的图片

  在div标签的class属性中通过ui small left floated image来实现，左右浮动只需要修改是left或者right。

<div class="ui segment">
    <img class="ui small left floated image" src="../images/pic.png" alt="" />
    <p>
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
        Semantic UI中文官方网站, 当前版本:Semantic UI 2.2.4... Semantic 集成了 React、Angular、Meteor 以及很多其他框架以帮助你组织 UI 层和你的应用逻辑层。
    </p>
</div>

2|5图片组的定义

  在Semantic-UI中可以定义一组图片信息，并且可以设置图片的大小。

2|6示例：定义一组图片并设置大小

<div class="ui small images">
    <img class="ui image" src="../images/pic.png" alt="" />
    <img class="ui image" src="../images/demo.jpg" alt="" />
    <img class="ui image" src="../images/pic.png" alt="" />
    <img class="ui image" src="../images/demo.jpg" alt="" />
    <img class="ui image" src="../images/pic.png" alt="" />
    <img class="ui image" src="../images/demo.jpg" alt="" />
    <img class="ui image" src="../images/pic.png" alt="" />
    <img class="ui image" src="../images/demo.jpg" alt="" />
</div>

3|010.4 小结

  在使用图片的过程中必须结合现实的项目开发环境，合理使用对应的样式。

__EOF__

本文作者：StaryJie
本文链接：https://www.cnblogs.com/jie-fang/p/10279540.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！