首页 > 代码库 > 网格嵌套练习
网格嵌套练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css" media="screen" title="no title" charset="utf-8"> </head> <body> <div class="ui inverted vertical very padded center aligned segment"> <div class="ui three column grid container"> <div class="column"> <div class="ui two column grid "> <div class="column"> <div class="ui vertical inverted blue center aligned segment"> <i class="shopping bag massive icon"></i> </div> </div> <div class="column"> <div class="ui vertical inverted green center aligned segment"> <i class="game massive icon"></i> </div> </div> </div> </div> <div class="column"> <div class="ui vertical inverted orange center aligned segment"> <i class="users massive icon"></i> </div> </div> <div class="column"> <div class="ui vertical inverted blue center aligned segment"> <i class="cloud massive icon"></i> </div> </div> <!-- ====================first line================= --> <div class="column"> <div class="ui two column grid"> <div class="column"> <div class="ui vertical inverted purple center aligned segment"> <i class="map outline massive massive icon"></i> </div> </div> <div class="column"> <div class="ui vertical inverted blue center aligned segment"> <i class="internet explorer massive icon"></i> </div> </div> </div> </div> <div class="column"> <div class="ui vertical inverted red center aligned segment"> <i class="file image outline massive icon"></i> </div> </div> <div class="column"> <div class="ui vertical inverted green center aligned segment"> <i class="calendar outline massive icon"></i> </div> </div> <!-- ====================second line================= --> <div class="column"> <div class="ui vertical inverted green center aligned segment"> <i class="mail massive icon"></i> </div> </div> <div class="column"> <div class="ui vertical inverted purple center aligned segment"> <i class="headphone massive icon"></i> </div> </div> <div class="column"> <div class="ui two column grid"> <div class="column"> <div class="ui vertical inverted orange center aligned segment"> <i class="toggle right massive icon"></i> </div> </div> <div class="column"> <div class="ui vertical inverted blue center aligned segment"> <i class="cloud massive icon"></i> </div> </div> </div> </div> </div> </div> </body> </html>
新用到的样式:
center aligned:居中
网格嵌套练习
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。