semantic UI first web

Posted 2020-10-02

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了semantic UI first web相关的知识，希望对你有一定的参考价值。

官方文档：https://semantic-ui.com/introduction/getting-started.html

semantic UI： SemanticUI是一款语义化设计的前端开源框架

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>first web</title>
    <link rel="stylesheet" type="text/css" href="css\\semantic.css">
    <link rel="stylesheet" href="mystyle.css" media="screen" charset="utf-8">
  </head>
  <body>
    <div class="ui inverted vertical container segment">
      <div class="ui image">
        <img src="image\\banner.jpg" alt="first web" />
      </div>
    </div>

    <div class="ui vertical segment">
      <div class="ui container segment">
        <h1 class="ui header">first web</h1>
        <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>
        <button type="button" name="button"class="ui inverted blue button">read  more</button>
      </div>
      <div class="ui container segment">
        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.
      </div>
      <div class="ui container segment">
        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.
      </div>
    </div>

    <div class="ui inverted vertical very padded container segment">
      <p>
        © 2015 - 2016
      </p>
    </div>
  </body>
</html>

web页面：