zoukankan      html  css  js  c++  java
  • 3-1 练习 HTML 总结

    1.段落

     #段落
    <div class="ui segment">    </div>
    
    #翻转 
     <div class="ui inverted segment">
    
    #垂直段落   
    <div class="ui vertical  segment">
    
    #内收 
    <div class="ui continer segment">
    
    #去除多余的格式  
    <div class="ui basic segment">
    
    #内距  
                <div class="ui padded segment">
    
        <div class="ui very padded segment">

    2.标题

    #标题  
    <h3 class="ui  header">Company</h3>
    
    #翻转 
    <h3 class="ui inverted header">Company</h3>
    
    #垂直段落   
    <h3 class="ui vertical header">Company</h3>

     3.菜单menu

    <div class="ui  menu">
        <a href="#" class="item">Home</a>
        <a href="#" class="item">About</a>
        <a href="#" class="item">Others</a>
    </div>
     
    
    #固定菜单
     <div class="ui fixed inverted menu">
    
    #垂直菜单
    <div class="ui  text menu">
        <div class="item">Tel:010-666666</div>
        <div class="item">Adr:CN</div>
        <div class="item">Fax:010-6666</div>
    </div>

    4.图片

    <div class="ui image">
      <img src="images/banner.jpg" alt="" />
    </div>

    5.图标

    <i class="ui icon book"></i>

    6.网格系统

          <div class="ui grid">
    
            <div class="ten wide column">我占10格</div>
            <div class="six wide column">我占6格</div>
    
          </div>

    7.按钮

    <button type="button" name="button" class="ui button">Read more </button>
    
    #翻转
    <button type="button" name="button" class="ui inverted blue button">Read more</button>
     

     自己练习

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>基于SOA的工作流系统</title>
        <link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">
      </head>
      <body>
        <div class="ui fixed inverted menu">
    
            <a href="#" class="item">Home</a>
            <a href="#" class="item">About</a>
            <a href="#" class="item">Others</a>
    
        </div>
    
    
        <div class="ui vertical inverted segment">
          <div class="ui image">
            <img src="images/banner.jpg" alt="" />
          </div>
        </div>
    
    
        <div class="ui basic segment">
    
          <div class="ui grid">
    
            <div class="ten wide column">
              <div class="ui image">
                <img src="images/devices2.png" alt="" />
              </div>
            </div>
    
            <div class="six wide column">
              <h3 class="ui header">
                <i class="ui icon book"></i>
                This title</h3>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              </p>
            </div>
    
          </div>
    
        </div>
    
    
        <div class="ui vertical very padded inverted segment">
    
          <div class="ui grid">
    
            <div class="four wide column">
              <div class="ui vertical inverted text menu">
    
                <div class="item">
                  <h3 class="ui inverted header">Company</h3>
                </div>
                <div class="item">Tel:010-666666</div>
                <div class="item">Adr:CN</div>
                <div class="item">Fax:010-6666</div>
    
              </div>
            </div>
    
            <div class="four wide column">
              <div class="ui vertical inverted text menu">
                <div class="item">
                  <h3 class="ui inverted header">Company</h3>
                </div>
                <div class="item">Tel:010-666666</div>
                <div class="item">Adr:CN</div>
                <div class="item">Fax:010-6666</div>
              </div>
            </div>
    
            <div class="four wide column">
              <div class="ui vertical inverted text menu">
                <div class="item">
                  <h3 class="ui inverted header">Company</h3>
                </div>
                <div class="item">Tel:010-666666</div>
                <div class="item">Adr:CN</div>
                <div class="item">Fax:010-6666</div>
              </div>
            </div>
    
            <div class="four wide column">
              <div class="ui vertical inverted text menu">
                <div class="item">
                  <h3 class="ui inverted header">Company</h3>
                </div>
                <div class="item">Tel:010-666666</div>
                <div class="item">Adr:CN</div>
                <div class="item">Fax:010-6666</div>
              </div>
            </div>
    
    
            </div>
          </div>
        </div>
    
      </body>
    </html>
    View Code

  • 相关阅读:
    rem单位
    JS_高程5.引用类型(5)Array类型的操作方法
    JS_理解函数参数按值传递
    JS_高程5.引用类型(4)Array类型的各类方法
    JS_高程5.引用类型(3)Array类型-检测数组
    JS_高程5.引用类型(2)Array类型
    JS_高程5.引用类型(1)Object类型
    JS_高程4.变量,作用域和内存问题(3)垃圾收集
    JS_高程4.变量,作用域和内存问题(2)执行环境及作用域
    JS_高程4.变量,作用域和内存问题(1)
  • 原文地址:https://www.cnblogs.com/venicid/p/8067268.html
Copyright © 2011-2022 走看看