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

  • 相关阅读:
    通过Maven简单搭建SSM框架
    javaWeb常用面试题
    到底什么是对象,什么是对象的引用?对象和对象的引用有那些区别?
    第二章 python中重要的数据结构(下)
    第一章 python中重要的数据结构(上)
    springboot 集成完整的swagger2
    JAVA -> 数据加密和解密 留存
    mac rar文件解压缩
    java 图片合成文字或者awt包下的对话框引入自定义字体库
    java中list或数组中随机子集工具类
  • 原文地址:https://www.cnblogs.com/venicid/p/8067268.html
Copyright © 2011-2022 走看看