semantic UI first web

Semantic UI 实战

最新推荐文章于 2025-09-04 19:07:27 发布

weixin_30670965

最新推荐文章于 2025-09-04 19:07:27 发布

阅读量95

点赞数

CC 4.0 BY-SA版权

文章标签： ui 前端 ViewUI

原文链接：http://www.cnblogs.com/xiaxiaobei666/p/7353362.html

本文介绍了一个使用Semantic UI框架搭建的示例网站。该网站通过Semantic UI实现了一致且语义化的前端设计，包括布局、样式及交互效果。文章展示了如何引入Semantic UI库，并通过具体的HTML代码实现了导航栏、段落文本、图片展示及按钮等元素。

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

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

<!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页面：