semantic ui框架学习笔记二

评论组件

文档里的评论组件介绍的比较清晰。这里我就挑一个我喜欢的格式展示出来：

<div class="ui comments">

  <h3 class="ui dividing header">Comments</h3>

  <div class="comment">

    <a class="avatar">

      <img src="../images/avatar/timg.jpg">

    </a>

    <div class="content">

      <a class="author">Matt</a>

      <div class="metadata">

        <span class="date">Today at 5:42PM</span>

      </div>

      <div class="text">

        How artistic!

      </div>

      <div class="actions">

        <a class="reply">Reply</a>

      </div>

    </div>

  </div>

  <div class="comment">

    <a class="avatar">

      <img src="../images/avatar/timg.jpg">

    </a>

    <div class="content">

      <a class="author">Elliot Fu</a>

      <div class="metadata">

        <span class="date">Yesterday at 12:30AM</span>

      </div>

      <div class="text">

        <p>This has been very useful for my research. Thanks as well!</p>

      </div>

      <div class="actions">

        <a class="reply">Reply</a>

      </div>

    </div>

    <div class="comments">

      <div class="comment">

        <a class="avatar">

          <img src="../images/avatar/1.jpg">

        </a>

        <div class="content">

          <a class="author">Jenny Hess</a>

          <div class="metadata">

            <span class="date">Just now</span>

          </div>

          <div class="text">

            Elliot you are always so right :)

          </div>

          <div class="actions">

            <a class="reply">Reply</a>

          </div>

          <form class="ui reply form">

            <div class="field">

              <textarea></textarea>

            </div>

            <div class="ui primary submit labeled icon button">

              <i class="icon edit"></i> Add Reply

            </div>

          </form>

        </div>

      </div>

    </div>

  </div>

  <div class="comment">

    <a class="avatar">

      <img src="../images/avatar/timg.jpg">

    </a>

    <div class="content">

      <a class="author">Joe Henderson</a>

      <div class="metadata">

        <span class="date">5 days ago</span>

      </div>

      <div class="text">

        Dude, this is awesome. Thanks so much

      </div>

      <div class="actions">

        <a class="reply">Reply</a>

      </div>

    </div>

  </div>

</div>

我这里展示的是可以包含表单来回复评论的基本评论组件。

轨道

轨道是用来显示站点的主视图以外伴随的内容，轨道经常在你网站主视窗有滚动内容时，和 sticky 一起使用，以把内容固定在相对位置性伴随滚动条的移动。Semantic 默认的轨道宽度是 300px。

轨道可以设置在内容的左侧或者右侧(left, right),轨道可以在容器内部显示(internal),轨道可以对自身进行分割或者在内容之内分割(dividing),轨道可以依附在主窗口(attached),轨道可以紧贴在主视图(close,very close)。

下面是我模仿cnode社区做的一个页面：

<div class="ui container">

  <div class="ui segment">

    <div class="ui right internal very close dividing rail">

      <div class="ui segment">

        <h4 class="ui dividing teal header">作者</h4>

        <div class="ui list">

          <div class="item">

            <img class="ui mini circular image" src="../images/avatar/timg.jpg">

            <div class="content">

              <div class="ui sub header">dreamsline</div>

              你若安好，便是晴天

            </div>

          </div>

          <div class="item">

            <p><span>积分：</span><span>125</span></p>

          </div>

          <div class="item">

            <p>个性签名：<span>七月如你</span></p>

          </div>

        </div>

      </div>

      <div class="ui segment">

        <h4 class="ui dividing teal header">最新发布</h4>

        <div class="ui list">

          <div class="item">

            <p><a>我们来说一说TCP神奇的40ms</a></p>

          </div>

          <div class="item">

            <p><a>一览js模块化：从CommonJS到ES6</a></p>

          </div>

          <div class="item">

            <p><a>Json-On-Relations: 快速搭建企业级应用1111111</a></p>

          </div>

        </div>

      </div>

      <div class="ui segment">

        <h4 class="ui dividing teal header">最新讨论</h4>

        <div class="ui list">

          <div class="item">

            <p><a>ReactNative: 使用Animted API实现向上滚动时隐藏Header组件</a></p>

          </div>

          <div class="item">

            <p><a>我们来说一说TCP神奇的40ms</a></p>

          </div>

          <div class="item">

            <p><a>我们来说一说TCP神奇的40ms</a></p>

          </div>

        </div>

      </div>

    </div>

    <div class="ui segment article-detail">

      <h3 class="ui center aligned dividing teal header">第二届蚂蚁金服体验科技大会将于19年1月5日举行，期待与你相遇</h3>

      <p>

        SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团举办，包括专业分享、产品展台、Workshop 等内容。

        我们希望通过 SEE Conf，能与业界同行一起分享交流体验科技的当前进展，一起探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁荣共赢。

        继首届 SEE Conf 成功举办后，第二届 SEE Conf 将于 2019.01.05（周六）在浙江杭州的蚂蚁 Z 空间举办。

        这次我们邀请来同济大学娄永琪院长和浙江大学王锐教授带我们走入学术前沿，还有大量蚂蚁金服体验科技相关的主题分享，期待你来参与。

      </p>

      <p>

        SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团举办，包括专业分享、产品展台、Workshop 等内容。

        我们希望通过 SEE Conf，能与业界同行一起分享交流体验科技的当前进展，一起探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁荣共赢。

        继首届 SEE Conf 成功举办后，第二届 SEE Conf 将于 2019.01.05（周六）在浙江杭州的蚂蚁 Z 空间举办。

        这次我们邀请来同济大学娄永琪院长和浙江大学王锐教授带我们走入学术前沿，还有大量蚂蚁金服体验科技相关的主题分享，期待你来参与。

      </p>

      <p>

        SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团举办，包括专业分享、产品展台、Workshop 等内容。

        我们希望通过 SEE Conf，能与业界同行一起分享交流体验科技的当前进展，一起探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁荣共赢。

        继首届 SEE Conf 成功举办后，第二届 SEE Conf 将于 2019.01.05（周六）在浙江杭州的蚂蚁 Z 空间举办。

        这次我们邀请来同济大学娄永琪院长和浙江大学王锐教授带我们走入学术前沿，还有大量蚂蚁金服体验科技相关的主题分享，期待你来参与。

      </p>

      <p>

        SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团举办，包括专业分享、产品展台、Workshop 等内容。

        我们希望通过 SEE Conf，能与业界同行一起分享交流体验科技的当前进展，一起探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁荣共赢。

        继首届 SEE Conf 成功举办后，第二届 SEE Conf 将于 2019.01.05（周六）在浙江杭州的蚂蚁 Z 空间举办。

        这次我们邀请来同济大学娄永琪院长和浙江大学王锐教授带我们走入学术前沿，还有大量蚂蚁金服体验科技相关的主题分享，期待你来参与。

      </p>

      <p>

        SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团举办，包括专业分享、产品展台、Workshop 等内容。

        我们希望通过 SEE Conf，能与业界同行一起分享交流体验科技的当前进展，一起探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁荣共赢。

        继首届 SEE Conf 成功举办后，第二届 SEE Conf 将于 2019.01.05（周六）在浙江杭州的蚂蚁 Z 空间举办。

        这次我们邀请来同济大学娄永琪院长和浙江大学王锐教授带我们走入学术前沿，还有大量蚂蚁金服体验科技相关的主题分享，期待你来参与。

      </p>

      <p>

        SEE = Seeking Experience & Engineering，意为探索用户体验与工程实践，由蚂蚁金服集团举办，包括专业分享、产品展台、Workshop 等内容。

        我们希望通过 SEE Conf，能与业界同行一起分享交流体验科技的当前进展，一起探讨切磋体验科技的未来发展，共同努力促进体验设计与技术的开放，让生态繁荣共赢。

        继首届 SEE Conf 成功举办后，第二届 SEE Conf 将于 2019.01.05（周六）在浙江杭州的蚂蚁 Z 空间举办。

        这次我们邀请来同济大学娄永琪院长和浙江大学王锐教授带我们走入学术前沿，还有大量蚂蚁金服体验科技相关的主题分享，期待你来参与。

      </p>

    </div>

  </div>

</div>

<script>

  var main = document.getElementsByClassName('article-detail')[0];

  var w = document.getElementsByClassName('container')[0].offsetWidth;

  var mw = w - 330;

  main.style.width = mw + 'px';

</script>

效果图：

部分css代码：

html {

  font-size: 14px;

}

body {

  background-color: #E1E1E1;

}

.ui.segment {

  box-shadow: none;

  border: none;

}

.ui.segment.article-detail p {

  text-align: justify;

  text-indent: 2em;

}

.item p {

  overflow: hidden;

  white-space: nowrap;

  text-overflow:ellipsis;

  color: #778087;

}

a {

  color: #778087;

}

<div class="ui container">

  <div class="ui middle aligned divided selection very relaxed list">

    <div class="item">

      <div class="right floated content">

        <span class="date">3天前</span>

      </div>

      <img class="ui avatar image" src="../images/avatar/timg.jpg">

      <div class="content">

        <div class="ui teal horizontal label">置顶</div>

        <a href="http://baidu.com">第二届蚂蚁金服体验科技大会将于19年1月5日举行，期待与你相遇</a>

      </div>

    </div>

    <div class="item">

      <div class="right floated content">

        <span class="date">3天前</span>

      </div>

      <img class="ui avatar image" src="../images/avatar/timg.jpg">

      <div class="content">

        <div class="ui horizontal label">分享</div>

        <a href="http://baidu.com">以快报的方式，分享前端技术体系</a>

      </div>

    </div>

    <div class="item">

      <div class="right floated content">

        <span class="date">3天前</span>

      </div>

      <img class="ui avatar image" src="../images/avatar/timg.jpg">

      <div class="content">

        <div class="ui teal horizontal label">精华</div>

        <a>2018年，JavaScript都经历了什么？</a>

      </div>

    </div>

    <div class="item">

      <div class="right floated content">

        <span class="date">3天前</span>

      </div>

      <img class="ui avatar image" src="../images/avatar/timg.jpg">

      <div class="content">

        <div class="ui horizontal label">问答</div>

        <a>请教一个 socket hang up 的报错问题</a>

      </div>

    </div>

  </div>

</div>

这里主要是结合前面的列表实现的一个文章标题列表。

semantic ui框架学习笔记二的更多相关文章

semantic ui框架学习笔记一
面包屑导航面包屑导航经常用于多个栏目下的内容管理,是web页面里比较常用的组合.例如: <div class="ui breadcrumb"> <a class ...
semantic ui框架学习笔记三
网格系统基本网格 <div class="ui grid"> <div class="column"></div> < ...
Dojo框架学习笔记<二>
一.dojo/dom 该模块定义了Dojo Dom API,主要有以下几种用法: 1.dom.byId();(相当于document.getElementById()) ①最直接的用 ...
集合框架学习笔记<二>
1.什么是ArrayList ArrayList就是传说中的动态数组,用MSDN中的说法,就是Array的复杂版本,它提供了如下一些好处: 动态的增加和减少元素实现了ICollection和ILis ...
unittest框架学习笔记二之discover
coding=utf-8'''Created on 2018/3/29 author:star Project:discover测试用例''' import unittest,time,oslist= ...
Yii框架学习笔记（二）将html前端模板整合到框架中
选择Yii 2.0版本框架的7个理由 http://blog.chedushi.com/archives/8988 刚接触Yii谈一下对Yii框架的看法和感受 http://bbs.csdn.net/ ...
phalcon（费尔康）框架学习笔记
phalcon(费尔康)框架学习笔记 http://www.qixing318.com/article/phalcon-framework-to-study-notes.html 目录结构 pha ...
[Firefly引擎][学习笔记二][已完结]卡牌游戏开发模型的设计
源地址:http://bbs.9miao.com/thread-44603-1-1.html 在此补充一下Socket的验证机制:socket登陆验证.会采用session会话超时的机制做心跳接口验证 ...
JavaSE中Map框架学习笔记
前言:最近几天都在生病,退烧之后身体虚弱.头疼.在床上躺了几天,什么事情都干不了.接下来这段时间,要好好加快进度才好. 前面用了三篇文章的篇幅学习了Collection框架的相关内容,而Map框架相对 ...

随机推荐

python中random模块
random与numpy.random对比: 1.random.random():生成[0,1)之间的随机浮点数: numpy.random.random():生成[0,1)之间的随机浮点数: num ...
Protocol buffers--python 实践（二） protocol buffers vs json
为什么专门开一个坑,来使用pb.放弃本在各平台上都支持得很好的json而使用pb的一个归根到底的理由,就是希望在保证强类型和跨平台的情况下,能够更轻,更快,更简单.既然是奔着这个目标去的,到底多快我需 ...
QTP键盘操作笔记
micCtrlDwn Presses the Ctrl key. micCtrlUp Releases the Ctrl key. micLCtrlDwn Presses the left Ct ...
LODOP 获取打印设计代码不带INIT初始化语句
前面的博文生成JS代码模版和文档式模版,生成的是带初始化语句的模版,如果想要打印多个,可以循环多个任务,什么是一个任务,可查看本博客相关博文:Lodop打印语句最基本结构介绍(什么是一个任务)一个任务 ...
源码分析: 图片加载框架Picasso源码分析
使用: Picasso.with(this) .load("http://imgstore.cdn.sogou.com/app/a/100540002/467502.jpg") . ...
前端使用Javascrip实现图片轮播
Javascript实现网页图片自动轮播 1.创建一个img标签设置默认图片,以及图片的高度和宽度,为了大家方便,我将CSS样式和JS语句都写在一个html文件中,演示用的图片来自小明官网:'htt ...
Qt QTimer
QTimer类提供了重复和单次触发信号的定时器. QTimer类为定时器提供了一个高级别的编程接口.很容易使用:首先,创建一个QTimer,连接timeout()信号到适当的槽函数,并调用start( ...
数据库SQL SELECT查询的工作原理
一般开发员只会应用SQL的四条经典语句:select,insert,delete,update.但是我从来没有研究过它们的工作原理,这篇我想说一说select在数据库中的工作原理. B/S架构中最经典 ...
AtCoder Regular Contest 102 E Stop. Otherwise...
题目链接:atcoder 大意:有\(n\)个骰子,每个骰子上面有\(k\)个数,分别是\(1\text ~ k\),现在求\(\forall i\in[2...2k]\),求出有多少种骰子点数的组合 ...
WINDOWS 包管理器 Chocolatey
https://chocolatey.org/ - 官网安装: @"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe& ...

semantic ui框架学习笔记二

评论组件

轨道

标签

水平方向上的标签

semantic ui框架学习笔记二的更多相关文章

随机推荐

热门专题