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

  • 相关阅读:
    PF不明内存泄露已解决,白头发也没了(转)
    第06篇 MEF部件的生命周期(PartCreationPolicy)
    [MEF]第05篇 MEF的目录(Catalog)筛选
    [MEF]第04篇 MEF的多部件导入(ImportMany)和目录服务
    [MEF]第03篇 MEF延迟加载导出部件及元数据
    [MEF]第02篇 MEF的导入导出契约
    关于android的设备管理器-DevicePolicyManager(二)
    android KK版本号收到短信后,点亮屏的操作
    windows server 2008 安装Microsoft ActiveSync 6.1提示缺少一个Windows Mobile设备中心所须要的Windows组件
    设计模式
  • 原文地址:https://www.cnblogs.com/venicid/p/8067268.html
Copyright © 2011-2022 走看看