semantic UI first web

时间：2017-08-13 15:23:24 阅读：173 评论：0 收藏：0 [点我收藏+]

标签：tab button nim ade iam height charset ica mil

官方文档：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页面：