2 semantic ui 框架的应用

为什么使用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 框架的应用的更多相关文章

semantic ui框架学习笔记一
面包屑导航面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...
semantic ui框架学习笔记三
网格系统基本网格 <div class="ui grid"> <div class="column"></div> < ...
semantic ui框架学习笔记二
评论组件文档里的评论组件介绍的比较清晰.这里我就挑一个我喜欢的格式展示出来: <div class="ui comments"> <h3 class=" ...
目前几款基于html5的前端框架：如Bootstrap、Foundation、Semantic UI 、Amaze UI
Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合CSS 和HTML,使用了最新的浏览器技术,为快速WEB开发提供了一套前端工具包,包括布局.网格.表格.按钮.表单.导 ...
Semantic UI 语义化设计的前端框架
UI是Web的灵魂!Semantic UI是一款语义化设计的前端框架,为攻城师而制作的可复用的开源前端框架. 特性弃用有歧义的表述 Semantic是围绕自然交流语言而架构的,这使得开发更加直观(易 ...
2015年最全的移动WEB前端UI框架
目前,众多互联网公司APP都嵌入了大量的HTML5,移动端的开发越来越重视,HTML5的运用场景也越来越多了.在移动WEB开发的过程中,使用合适的移动WEB UI框架可以大大提升我们的开发效率.下面P ...
Semantic UI 中文参考手册
一个拥有友好词汇表的前端框架,完全语义化的前端界面开发框架,为一组开发人员之间共享UI元素配备了规格.使用的词汇(类和ID)相比其它替代品更加简洁,从而降低了学习曲线.有许多HTML元素,UI元素和场 ...
160908、前端开发框架Semantic UI
简介网页开发中,CSS控制网页样式.作为测试开发工程师,我个人不太擅长手写CSS.样式微调.兼容浏览器等工作,所以我选择使用成熟的前端框架,可以快速开发出样式美观的网站,也解决了大部分浏览器兼容问题 ...
semantic UI first web
官方文档:https://semantic-ui.com/introduction/getting-started.html semantic UI: SemanticUI是一款语义化设计的前端开源 ...

随机推荐

windows10家庭中文版升级专业版或企业版简单方便的操作方法
以管理员的身份运行cmd 1 ,升级到专业版输入:slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 输入slmgr.vbs -skms zh.us.to 激活 2, 升 ...
Bucking the stigma (留学生请摘掉有色眼镜看社区大学)
Many Chinese students second-guess the benefits of attending a US community college. 很多中国学生对去美国社区大学学 ...
浩顺晶密K-5 打卡时间设置
公司有一台浩顺晶密K-5打卡设备,因为时间异常需要重新调整,设备外部就几个按钮,全部按了一遍发现没有任何变化,所以肯定是哪里操作不对,然后用钥匙打开这个设置,上面有一排文字,分别是设置.+.-.确认等 ...
笨办法学Python（二十一）
习题 21: 函数可以返回东西你已经学过使用 = 给变量命名,以及将变量定义为某个数字或者字符串.接下来我们将让你见证更多奇迹.我们要演示给你的是如何使用 = 以及一个新的 Python 词汇ret ...
GitLab 的安装及汉化
系统环境:CentOS7 切记:安装GitLab 时会自动安装GitLab自带的Nginx,为了避免冲突,部署环境时先不要安装Nginx. 官网安装及汉化安装官网安装最新版GitLab:https: ...
Python 类的高级属性（可选）
1.slots实例:限制类的实例有合法的属性集,只有__slots__属性列表中的属性才可能成为实例属性. 对象的实例通常没有一个属性字典,可以在__slots__列表中包含一个属性字典__dict_ ...
【转】Android xml资源文件中@、@android:type、@*、？、@+含义和区别
一.@代表引用资源 1.引用自定义资源.格式:@[package:]type/name android:text="@string/hello" 2.引用系统资源.格式:@andr ...
在Visual Studio 2010里面使用.NET 4.5里面新增加的HttpClient
Install-Package Microsoft.Net.Http 为了能同步使用(也就是使用await等关键字) Install-Package Microsoft.Bcl.Async 确认在Vi ...
pooling
转自:http://www.gageet.com/2014/09182.php 本文部分参考了:http://www.zhihu.com/question/23437871 卷积层是对图像的一个邻域进 ...
iOS内存管理部分内容
Objective-C 高级编程 iOS与OS X多线程和内存管理第一章部分讲述了关于ARC的内容,还讲述了关于修饰符的问题,还讲了好多底层的实现的内容,这些底层实现却往往是在面试的过程中经常被遇到的 ...

2 semantic ui 框架的应用

为什么使用css框架

1.使用基础样式 ： ui segment

分段:内容片段

2.使用形容词改变样式

（1）inverted + colors

（2）.垂直段落:vertical

（3）.Padded 内距

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

（1）版本1：大框架

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

（3） 版本3:标题

（4）版本4：按钮button

(5) 版本5：翻转样式

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

（7）版本7：添加图片

(8) 版本8：footer

4.完整代码

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

随机推荐

热门专题

1.使用基础样式： ui segment

　（1）inverted + colors

　　（2）.垂直段落:vertical

　　（3）.Padded 内距

　　（1）版本1：大框架

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

　　（3）版本3:标题

　　（4）版本4：按钮button

　　(5) 版本5：翻转样式

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

　　（7）版本7：添加图片

　　(8) 版本8：footer