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;
}
标签
在一般的博客系统里面，我们都会给文章进行分类，这个时候可以通过设置标签来表名文章属于哪个分类。
<a class="ui tag label">css</a>
<a class="ui red tag label">js</a>
水平方向上的标签
<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爬虫之多线程、多进程、GIL锁
背景: 我们知道多线程要比多进程效率更高,因为线程存在于进程之内,打开一个进程的话,首先需要开辟内存空间,占用内存空间比线程大.这样想也不怪,比如一个进程用10MB,开10个进程就得100MB的内存空 ...
- python之路--JavaScript
一. JavaScript概述 ECMAScript和JavaScript的关系 1996年11月,JavaScript的创造者--Netscape公司,希望这门语言能成为国际化标准,于是决定将Jav ...
- B站弹幕姬(🐔)分析与开发（上篇）
辞职之后 休息了一段时间,最近准备开始恢复去工作的状态了,所以搞点事情来练练手.由于沉迷b站女妆大佬想做个收集弹幕的然后根据弹幕自动回复一些弹幕的东西.网上搜了一下有个c#的版本,感觉还做得不错,于是 ...
- websocket协议握手详解
最近使用tornado做长链接想着怎么着也要试试websocket协议吧.所以说干就干. 首先要知道websocket是基于http协议的,为什么这么说?因为从协议来说,websocket是借用了一部 ...
- Delphi 限制Edit输入 多个例子
procedure TForm1.Edit1KeyPress(Sender: TObject; var Key: Char); begin if not (key in [ '.',#8]) then ...
- ES 6 系列 - 变量声明
let 和 const let 声明 (一)基本用法 let 声明的变量只在块级作用域内有效,出了该块则报错,最常见且适合的地方在 for 循环中: var a = []; for (var i = ...
- 【SSL】OV、DV和EV证书的区别
关于https证书 https协议需要到ca申请证书,一般免费证书很少,需要交费. http是超文本传输协议,信息是明文传输,https 则是具有安全性的ssl加密传输协议. http和https使用 ...
- P1282 多米诺骨牌 dp
思路:dp[i][j] 的j是上半段的和的值 这里表示的是达到上半段值是j的最小次数 答案在最小的可达到的j #include<bits/stdc++.h> using namespa ...
- 四种对话框（dialog）的简单使用方法
有普通对话框,单选对话框,复选对话框,进度条的两种实现方法话不多说,直接上代码 activity_main.xml: <?xml version="1.0" encoding ...
- GCD HDU - 1695 （欧拉 + 容斥）
GCD Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...