个人博客页面链接：http://www.shihao.online/（博客还在开发阶段，欢迎访问）
first_landing-page.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First web</title>
<link rel="stylesheet" href="../static/CSS/semantic.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="../static/CSS/custom.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="ui vertical basic segment masthead">
<div class="ui big text menu">
<div class="ui image">
<img src="../static/images/12.png" alt="" />
</div>
<div class="right menu">
<div class="item">
<!--<button type="button" name="button" class="ui inverted circular button">Register</button>-->
<button type="button" name="button" class="ui inverted circular button">Login</button>
</div>
</div>
</div>
<h1 class="ui center inverted aligned header slogan">
这里是大标题应该出现的位置
<p class="sub header">
这里是次级标题的位置
</p>
<button type="button" name="button" class="ui orange circular button">一个按钮</button>
</h1>
</div>
<div class="ui vertical basic segment recommended s112">
<h1 class="ui center aligned header">这里应该是一个标题</h1>
<div class="ui three column grid s112"> <!--定宽和定栏-->
<div class="column">
<div class="ui inverted segment card-view" style=" background: url('../static/images/17.jpg'); background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">Title's here</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="unhide icon"></i> </span>
</div>
<div class="s113">
<div class="ui inverted segment card-view" style=" background: url('../static/images/21.png'); background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">Title's here</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="unhide icon"></i> </span>
</div>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style=" background: url('../static/images/19.jpg'); background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">Title's here</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="unhide icon"></i> </span>
</div>
<div class="s113">
<div class="ui inverted segment card-view" style=" background: url('../static/images/18.jpg'); background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">Title's here</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="unhide icon"></i> </span>
</div>
</div>
</div>
<div class="column">
<div class="ui inverted segment card-view" style=" background: url('../static/images/16.jpg'); background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">Title's here</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 class="s113">
<div class="ui inverted segment card-view" style=" background: url('../static/images/15.jpg'); background-size: cover;background-repeat: no-repeat;">
<h3 class="ui header title">Title's here</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="two wide column"></div>-->
<!--</div>-->
<!--<div class="six wide column">-->
<!--<h1 class="ui header">This is a title</h1>-->
<!--<pre><p style="font-size: 20px" >-->
<!--在低谷中，人能做的事情就是不断反思自己，躲在黑暗中舔舐自己的伤口。-->
<!--在孤独冷漠的山谷里，俯瞰山下灯火通明;-->
<!--红灯绿酒，泪水随着泪槽缓缓落下，回忆之前的构陷和恶意谩骂心灵伤口无法抚平.-->
<!--你若大红大紫，要经得起更多的痛苦和折磨;-->
<!--你若平平庸庸就要甘于风轻云淡，能承受别人轻视你，谩骂你，诋毁你;-->
<!--会有人问我，这句话不是自相矛盾吗，人已经普通得不能再普通了为什么还要经历这么多痛苦呢;-->
<!--那么你可以细心听我说教，平庸的人无欲无求但是在任何场合都会成为牺牲品;-->
<!--</p></pre>-->
<!--</div>-->
</div>
</div>
<div class="ui vertical segment s116">
<h1 class="ui inverted center aligned header s114">我有的，并不只是诗和远方</h1>
<div class="ui four column grid s115">
<div class="column">
<div class="ui circular inverted segment renwu">
<i class="big inverted red circular star icon"></i>
<h4 class="ui inverted header">王小帽
<p class="ui inverted very small header">秋刀鱼和猫</p>
</h4>
</div>
</div>
<div class="column">
<div class="ui circular inverted segment renwu">
<i class="big inverted red circular star icon"></i>
<h4 class="ui inverted header">王小帽
<p class="ui inverted very small header">秋刀鱼和猫</p>
</h4>
</div>
</div>
<div class="column">
<div class="ui circular inverted segment renwu">
<i class="big inverted red circular star icon"></i>
<h4 class="ui inverted header">王小帽
<p class="ui inverted very small header">秋刀鱼和猫</p>
</h4>
</div>
</div>
<div class="column">
<div class="ui circular inverted segment renwu">
<i class="big inverted red circular star icon"></i>
<h4 class="ui inverted header">王小帽
<p class="ui inverted very small header">秋刀鱼和猫</p>
</h4>
</div>
</div>
</div>
<div class="ui labeled button" tabindex="0">
<div class="ui red button"><i class="heart icon"></i> Like </div>
<a class="ui basic red left pointing label">1,048</a>
</div>
</div>
<div class="ui vertical very padded pink segment">
<div class="ui grid">
<div class="four wide column">
<div class="ui vertical text menu">
<div class="ui image s111">
<img src="../static/images/12.png">
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical text menu">
<div class="item">
<h3 class="ui header">Company</h3>
</div>
<div class="item">
Address : CN
</div>
<div class="item">
Tel:010-666666
</div>
<div class="item">
Tel:010-666666
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical text menu">
<div class="item">
<h3 class="ui header">Company</h3>
</div>
<div class="item">
Address : CN
</div>
<div class="item">
Tel:010-666666
</div>
<div class="item">
Tel:010-666666
</div>
</div>
</div>
<div class="four wide column">
<div class="ui vertical text menu">
<div class="item">
<h3 class="ui header">DESIGEND BY</h3>
</div>
<div class="item">
<h1 class="ui header">ShiHao</h1>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
custom.css
.ui.vertical.basic.segment.masthead{
height: 1000px;
background: url("../images/2.png");
background-size: cover;
background-repeat: no-repeat;
padding-left: 40px;
padding-right: 40px;
/*position: relative;*/
}
.ui.center.inverted.aligned.header.slogan{
font-size: 50px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.ui.orange.circular.button{
width: 200px;
}
.ui.image.s111{
padding-left: 100px;
}
.ui.inverted.segment.card-view{
height: 300px;
}
.ui.vertical.basic.segment.recommended.s112 > .ui.center.aligned.header{
font-size: 40px;
color: red;
margin-top: 40px;
margin-bottom: 40px;
}
.ui.header.title{
margin-top: 5px;
margin-bottom: 170px;
}
.ui.vertical.basic.segment.recommended.s112{
margin-left: 100px;
margin-right: 100px;
margin-bottom: 50px;
}
.s113 {
margin-top: 22px;
}
.ui.inverted.segment.renwu{
height: 200px;
width: 200px;
background: url("../images/20.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: -50px 0px; /*可以调整背景图片位置(左 上)*/
}
.ui.center.aligned.header.s114{
margin-top: 100px;
margin-bottom: 50px;
}
.ui.four.column.grid.s115{
margin-left: 16%;
margin-right: 10%;
margin-bottom: 105px;
}
.ui.vertical.segment.s116{
background: url('../images/14.png');
background-repeat: no-repeat;
background-size: cover;
background-position: 10% 15%;
margin-bottom: 150px;
position: relative;
}
.ui.vertical.segment.s116 > .ui.labeled.button{
font-size: 17px;
height: 40px;
width: 170px;
top: 100%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
background: pink;
}
.ui.inverted.segment.renwu > .unhide.icon{
top: 90%;
left: 80%;
position: absolute;
transform: translate(-50%, -50%);
}
.ui.inverted.segment.renwu > .ui.inverted.header{
top:105%;
left: 45%;
position: absolute;
transform: translate(-50%, -50%);
}
.big.inverted.red.circular.star.icon{
top: 85%;
left: 85%;
position: absolute;
transform: translate(-50%, -50%);
}效果图
195
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
