静态页面复习--用semantic UI画美国队长盾牌 

<!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">
  </head>
  <body>
     <div class="ui  inverted red circular segment">
         <div class="ui circular segment">
              <div class="ui inverted red circular segment">
                    <i class="circular inverted blue big star icon"></i>
              </div>
         </div>
     </div>
  </body>
</html>

新用到的semantic样式源码：

i.circular.icon {
border-radius: 500em !important;
line-height: 1 !important;
padding: 0.5em 0.5em !important;
box-shadow: 0em 0em 0em 0.1em rgba(0, 0, 0, 0.1) inset;
width: 2em !important;
height: 2em !important;
}

i.circular.inverted.icon {
border: none;
box-shadow: none;
}

i.inverted.circular.icon {
background-color: #1b1c1d !important;
color: #ffffff !important;
}

.ui.circular.segment {
display: table-cell;                        //表格单元格
padding: 2em;
text-align: center;
vertical-align: middle;
border-radius: 500em;
}

posted @ 2016-12-07 16:49  叉歪叉  阅读(342)  评论(0)  编辑  收藏  举报