首页 > 代码库 > 静态页面复习--用semantic UI写一个10min首页
静态页面复习--用semantic UI写一个10min首页
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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首页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。