zoukankan      html  css  js  c++  java
  • 10、Semantic-UI之图片的使用

    10.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="" />
    

    10.2 图片的状态和大小设置

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

    示例:设置拖欠状态

    • 激活状态
    <img class="ui medium active image" src="../images/pic.png" alt="" />
    
    • 禁用状态
    <img class="ui medium disabled image" src="../images/pic.png" alt="" />
    

    示例:图片大小设置

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

    10.3 图片浮动

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

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

    示例:定义左右浮动的图片

      在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>
    

    图片组的定义

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

    示例:定义一组图片并设置大小

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

    10.4 小结

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

  • 相关阅读:
    嵌入式成长轨迹27 【Linux应用编程强化】【中嵌第二阶段】【进程管理】
    嵌入式成长轨迹24【Linux应用编程强化】【Linux下的C编程 下】【实例:Linux命令实现】
    纯CSS代码实现翻页
    Adodb.Stream读取和写入UTF8编码的文件
    对c#拆装箱的性能分析(泛型)
    js自动更换图片代码(收藏)
    提高网站可用性的10个小技巧
    分享下我的家乡语言——湘潭话
    解析用户研究
    HTML5 搭建移动Web应用
  • 原文地址:https://www.cnblogs.com/jie-fang/p/10279540.html
Copyright © 2011-2022 走看看