为什么使用css框架

1.使用基础样式 ：  ui segment

  • 分段:内容片段

    <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">         路径要写对
 <div class="ui segment"></div>  基础样式   

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>first web</title>

    <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">

  </head>

  <body>

    <div class="ui segment">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </div>

    <div class="ui segment">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </div>

    <div class="ui segment">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </div>

  </body>

</html>

2.使用形容词改变样式

　（1）inverted + colors

  • 按钮可以被设置为暗色背景（幽灵按钮）
  • inverted  翻转格式
 <div class="ui inverted red segment">

  <div class="ui inverted blue segment">

  <div class="ui inverted segment">

　　

　　（2）.垂直段落:vertical

<div class="ui vertical segment">

　　　　

　　（3）.Padded  内距

  • A segment can increase its padding
    <div class="ui inverted  padded vertical  segment">
  <div class="ui inverted  very padded vertical  segment">

3.使用嵌套制作网页片段

　　（1）版本1：大框架

　　　　

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>first web</title>

    <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">

  </head>

  <body>

    <div class="ui  segment">

      header

    </div>

    <div class="ui  segment">

        content

    </div>

    <div class="ui segment">

      boot

    </div>

  </body>

</html>

　　（2）版本2：内收 ：continer segment

    <div class="ui container segment">

      content

    </div>

　　

　　（3） 版本3:标题

  • Header 提供了内容的简短摘要
<h1 class="ui header">First web</h1>

　　（4）版本4：按钮button

 <button type="button" name="button" class="ui button">Read more </button>

　　(5) 版本5：翻转样式

  • inverted + color
        <button type="button" name="button" class="ui inverted blue button">Read more</button>

　　（6） 版本6：兄弟标签，父亲标签

    <div class="ui vertical segment">

      <div class="ui container segment">

        <h1 class="ui header">First web</h1>

        <p>

          Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        </p>

        <button type="button" name="button" class="ui inverted blue button">Read more</button>

      </div>

    </div>

　　（7）版本7：添加图片

  • class="ui image"
      <div class="ui image">

        <img src="data:images/banner.jpg" alt="" />

      </div>

　　(8) 版本8：footer

    <div class="ui inverted very padded segment">

      maguacoding

    </div>

4.完整代码

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>first web</title>

    <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">

  </head>

  <body>

    <div class="ui inverted vertical segment">

      <div class="ui image">

        <img src="data:images/banner.jpg" alt="" />

      </div>

    </div>

    <div class="ui vertical segment">

      <div class="ui container segment">

        <h1 class="ui header">First web</h1>

        <p>

          Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        </p>

        <button type="button" name="button" class="ui inverted blue button">Read more</button>

      </div>

    </div>

    <div class="ui vertical segment">

      <div class="ui container segment">

        <h1 class="ui header">First web</h1>

        <p>

          Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        </p>

        <button type="button" name="button" class="ui inverted blue button">Read more</button>

      </div>

    </div>

    <div class="ui inverted very padded segment">

      maguacoding

    </div>

  </body>

</html>

　　

2 semantic ui 框架的应用的更多相关文章

  1. semantic ui框架学习笔记一

    面包屑导航 面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...

  2. semantic ui框架学习笔记三

    网格系统 基本网格 <div class="ui grid"> <div class="column"></div> < ...

  3. semantic ui框架学习笔记二

    评论组件 文档里的评论组件介绍的比较清晰.这里我就挑一个我喜欢的格式展示出来: <div class="ui comments"> <h3 class=" ...

  4. 目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI

    Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...

  5. Semantic UI 语义化设计的前端框架

    UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性 弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...

  6. 2015年最全的移动WEB前端UI框架

    目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...

  7. Semantic UI 中文参考手册

    一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...

  8. 160908、前端开发框架Semantic UI

    简介 网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...

  9. semantic UI first web

    官方文档:https://semantic-ui.com/introduction/getting-started.html semantic  UI: SemanticUI是一款语义化设计的前端开源 ...

随机推荐

  1. 【MATLAB】对离散采样信号添加高斯白噪声（已知Eb/N0）

    (1)首先计算已知信号序列(采样之后得到的信号)的平均功率.该序列在第n个点处的功率为: 如果已知的信号序列中的总共的点数为N个,则该序列的平均功率为: 在MATLAB中求平均功率的方法是: Pav= ...

  2. centos7.4 系统安装指导

    centos7 系统安装指导 安装前规划 下载安装文件 安装过程设置 安装后系统基本设置 安装前规划 CentOS 7.x系列只有64位系统,没有32位. 生产服务器建议安装CentOS-7-x86_ ...

  3. sqlalchemy的cascades

    http://docs.sqlalchemy.org/en/latest/orm/cascades.html class Order(Base): __tablename__ = 'order' it ...

  4. System Center Configuration Manager 2016 必要条件准备篇（Part3）

    步骤3.安装SQL Server 2017 注意:在Configuration Manager服务器(CM16)上以本地管理员身份执行以下操作 按照https://go.microsoft.com ...

  5. 关于BaseServlet

    BaseServlet 是项目中所有servlet的父类,作用是为了让一个servlet可以同时处理多个请求,因为我们之前比如说完成对于商品的增删改查的时候,每一个需求就要创建一个servlet,这样 ...

  6. simotion读写CF卡，保存/读取变量

    simotion读写CF卡功能 1 使用西门子的Simotion运动控制器时,有时需要用到 读/写 CF卡的功能.主要来自以下几个方面的需求. 1)用户数据量较大,可保持(retain)存储区的容量不 ...

  7. Altium_Designer-怎么将“原理图的更改”更新到“pcb图”？

    打开原理图,直击菜单栏>>Design,选择第一项,>>Update PCB Document...在弹出的对话框里面选择执行更改即可将原理图更新到工程下面对应的PCB.也可以 ...

  8. pc/移动端（手机端）浏览器的直播rtmp hls（适合入门者快速上手）

    一.直播概述 关于直播,大概的过程是:推流端——>源站——>客户端拉流,用媒介播放 客户端所谓的拉流就是一个播放的地址url,会有多种类型的流: 视频直播服务目前支持三种直播协议,分别是R ...

  9. IOS 获取.plist文件的数据

      @property (nonatomic,strong) NSArray *apps; //获取.plist数据 /**获取plist文件的数组数据*/ -(NSArray *)apps{ if( ...

  10. yum 源搭建

    RHEL系统部署网络yum源 配置网络yum源 RHEL系统本身光盘做成的yum源所提供的软件包有限,在实际使用过程中经常会出现缺包的现象,本文中以CentOS源作为替代,CentOS的软件包和RHE ...