使用semantic ui做的第一个网页
来源：互联网 发布：解锁姿势体验知乎 编辑：程序博客网 时间：2024/05/16 17:08
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%);}效果图
阅读全文
