标签：type absolute 页面 有趣 res highlight ges name abs
<!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.vertical.basic.segment.top{
height:700px;
background:url(‘index-images/banner.png‘);
background-size:cover;
background-repeat: no-repeat;
padding-left: 40px;
padding-right: 40px;
}
.ui.inverted.center.aligned.header.bigtitle{
font-size: 50px;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
.ui.red.circular.button{
width: 220px;
}
.ui.header.logo{
font-size: 30px;
color: rgb(196,196,196);
}
.ui.inverted.segment.card-view{
height: 220px;
}
.ui.basic.vertical.segment.mid > .ui.center.aligned.header{
font-size: 40px;
color: rgb(58, 74, 67);
margin-top: 50px;
margin-bottom: 50px;
}
.ui.header.title{
margin-bottom: 100px;
}
.ui.inverted.red.basic.segment.people{
height: 450px;
background: url(‘index-images/people-say.png‘);
background-size: cover;
background-repeat: no-repeat;
position: relative;
margin-bottom: 200px;
}
.four.wide.column{
position: relative;
}
.ui.circular.inverted.segment{
background: url(‘index-images/profile.png‘);
background-size: cover;
background-repeat: no-repeat;
width: 120px;
height: 120px;
position: absolute;
left: 50%;
transform: translate(-50%,-50%);
}
.ui.inverted.red.basic.segment.people > .ui.center.aligned.header{
position: absolute;;
top:100px;
left: 50%;
transform: translate(-50%,-50%);
}
.ui.inverted.red.basic.segment.people > .ui.grid{
position: relative;
top:50%;
transform: translate(0%,-50%);
}
.ui.circular.inverted.segment > .ui.inverted.header{
position: absolute;
top:110%;
left: 50%;
transform: translate(-50%,-50%);
width: 200px;
}
.icon.inverted.red.circular.star{
position: absolute;
top:100%;
left:100%;
transform: translate(-100%,-100%);
}
.ui.inverted.red.basic.segment.people > .ui.inverted.red.circular.button{
position: absolute;;
top:100%;
left: 50%;
transform: translate(-50%,-50%);
background-color: white;
}
</style>
</head>
<body>
<div class="ui vertical basic segment top" style="">
<div class="ui inverted text menu">
<div class="ui image">
<img src="index-images/tenlogo.png" />
</div>
<div class="right menu">
<div class="item">
<button type="button" class="ui inverted circular button" name="button">log in</button>
</div>
</div>
</div>
<h1 class="ui inverted center aligned header bigtitle">大标题
<p class="sub header">
次级标题
</p>
<button type="button"class="ui red circular button" name="button">注册一下</button>
</h1>
</div>
<div class="ui vertical basic segment mid">
<h1 class="ui center aligned header">10分钟学会一门技能</h1>
<div class="ui three column grid container">
<div class="column">
<div class="ui inverted segment card-view" style="background: url(‘index-images/1.jpg‘);background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">title</h3>
<h4 class="ui header">username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">
40%get√
</div>
<span>10k
<i class="icon unhide"></i>
</span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style="background: url(‘index-images/2.jpg‘);background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">title</h3>
<h4 class="ui header">username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">
40%get√
</div>
<span>10k
<i class="icon unhide"></i>
</span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style="background: url(‘index-images/3.jpg‘);background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">title</h3>
<h4 class="ui header">username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">
40%get√
</div>
<span>10k
<i class="icon unhide"></i>
</span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style="background: url(‘index-images/4.jpg‘);background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">title</h3>
<h4 class="ui header">username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">
40%get√
</div>
<span>10k
<i class="icon unhide"></i>
</span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style="background: url(‘index-images/5.jpg‘);background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">title</h3>
<h4 class="ui header">username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">
40%get√
</div>
<span>10k
<i class="icon unhide"></i>
</span>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style="background: url(‘index-images/6.jpg‘);background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">title</h3>
<h4 class="ui header">username</h4>
<div class="ui divider"></div>
<div class="ui red circular label">
40%get√
</div>
<span>10k
<i class="icon unhide"></i>
</span>
</div>
</div>
</div>
</div>
<div class="ui inverted red basic segment people">
<h3 class="ui center aligned header">呈现给您最简洁有趣的知识是我们的目标</h3>
<div class="ui grid">
<div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon inverted red circular star"></i>
<h4 class="ui inverted header">首席提刀官
<p class="sub header">
李大刀
</p>
</h4>
</div>
</div>
<div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon inverted red circular star"></i>
<h4 class="ui inverted header">首席提刀官
<p class="sub header">
李大刀
</p>
</h4>
</div>
</div>
<div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon inverted red circular star"></i>
<h4 class="ui inverted header">首席提刀官
<p class="sub header">
李大刀
</p>
</h4>
</div>
</div>
<div class="four wide column">
<div class="ui circular inverted segment">
<i class="icon inverted red circular star"></i>
<h4 class="ui inverted header">首席提刀官
<p class="sub header">
李大刀
</p>
</h4>
</div>
</div>
</div>
<button type="button" name="button" class="ui inverted red circular button">成为讲师</button>
</div>
<div class="ui vertical very padded segment">
<div class="ui grid">
<div class="ui four wide column">
<div class="ui image">
<img src="index-images/ten_red_logo.png" />
</div>
</div>
<div class="ui four wide column">
<div class="ui vertical text menu">
<div class="item">
<h4 class="ui header">Company</h4>
</div>
<div class="item">
address:cn
</div>
<div class="item">
tel:00000000
</div>
<div class="item">
fax:11111111
</div>
</div>
</div>
<div class="ui four wide column">
<div class="ui vertical text menu">
<div class="item">
<h4 class="ui header">Company</h4>
</div>
<div class="item">
address:cn
</div>
<div class="item">
tel:00000000
</div>
<div class="item">
fax:11111111
</div>
</div>
</div>
<div class="ui four wide column">
<div class="ui vertical text menu">
<div class="item">
Designed by
</div>
<div class="item">
<h3 class="ui header logo">Xyxcoding</h3>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
新学到的样式：card-view 卡片视图
静态页面复习--用semantic UI写一个10min首页
标签：type absolute 页面 有趣 res highlight ges name abs
原文地址：http://www.cnblogs.com/xyxpython/p/6481458.html
