静态页面复习--用semantic UI写一个10min首页

Posted 2020-09-02 叉歪叉
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了静态页面复习--用semantic UI写一个10min首页相关的知识，希望对你有一定的参考价值。
<!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">
    <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="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="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首页的主要内容，如果未能解决你的问题，请参考以下文章
用semantic UI写苹果官网
Semantic-UI复习
spring boot 原型-semantic ui 页面开发
在 React 中使用 Semantic-UI 固定菜单和侧边栏
使用 Semantic UI React 加载屏幕
Semantic-ui 模态与 VueJS 重复