<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
<style type="text/css">
.ui.inverted.segment.container.choice{
margin-top: 100px;
background-color: white;
width: 400px;
padding: 2px;
}
.ui.inverted.segment.container.choice .active.item{
color: rgb(187, 187, 187);
}
.ui.three.borderless.item.menu{
border:none;
box-shadow: none;
}
.ui.basic.segment.container{
width:850px;
}
.title.header{
font-size: 18px;
}
</style>
</head>
<body>
<div class="ui inverted top fixed borderless red menu">
<div class="item">
<div class="ui image">
<img src="card/images/tenlogo.png" />
</div>
</div>
<div class="right menu">
<div class="item">
<h5 class="ui inverted header">
<div class="ui circular avatar image">
<img src="card/images/hou30.jpg" />
</div>
<span>admin</span>
</h5>
</div>
<div class="item">
<button type="button" name="button" class="ui inverted circular button">Logout</button>
</div>
</div>
</div>
<div class="ui inverted segment container choice">
<div class="ui three borderless item menu">
<a class="active item">All</a>
<a class="active item">New</a>
<a class="item">Editor‘s</a>
</div>
</div>
<div class="ui basic segment container">
<div class="ui three column grid">
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img1.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img2.jpg" style="height:200px;object-fit:cover;"/>
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img3.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img4.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img5.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img6.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img7.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img8.jpg" style="height:200px;object-fit:cover;"/>
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
<div class="column">
<div class="ui card">
<div class="ui image" >
<img src="card/images/img9.jpg" style="height:200px;object-fit:cover;" />
</div>
</div>
<div class="title header">
this is title
</div>
<i class="icon grey unhide"></i>
<span style="color:#bbbbbb">10k</span>
<span style="color:rgb(226, 226, 226)">｜</span>
<i style="icon grey checkmark"></i>
<span style="color:#bbbbbb">10 people got it</span>
</div>
</div>
</div>
<div class="ui basic very padded center aligned segment container">
<div class="ui pagination menu">
<a class="item"><i class="icon red left arrow"></i></a>
<a class="item"><i class="icon red right arrow"></i></a>
</div>
</div>
</div>
</body>
</html>
新学到的样式：card：卡片容器
object-fit：cover 覆盖，要求图片大于容器，且宽和高有一个要和容器一致。这样图片可能比原来小，这里使用防止图片失真。
ui pagination menu 分页菜单样式
title header 小标题
静态页面复习--用semantic UI+网格+卡片实现图片布局
原文：http://www.cnblogs.com/xyxpython/p/6493020.html