静态网页开发学习_用 Semantic UI 轻松上手第一个网页

一.使用基础样式

1、link引用semantic.css

<link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset="utf-8">

2、div加载ui segment

文档位置:https://semantic-ui.com/elements/segment.html

<div class="ui segment"> </div>

二.使用“形容词”改变样式

1、inverted+colors(翻转+颜色)

colored文档位置:https://semantic-ui.com/elements/segment.html#colored

inverted文档位置:https://semantic-ui.com/elements/segment.html#inverted

        <div class="ui inverted blue segment">
            离一博客 inverted+blue
        </div>
        <div class="ui inverted segment">
            离一博客 invertd
        </div>

(目前为止会用即可,不需要知道其原理,随着学习的深入,会逐渐了解)

2、vertical(垂直的)

vertical样式会改变三个地方:

(1)会让让圆角变为直角

(2)如果是多个segment叠加,那么他们之间的距离会消失

(3)底部阴影会消失

    <body>
        <div class="ui inverted blue vertical segment">
            离一博客 inverted+blue
        </div>
        <div class="ui inverted vertical segment">
            离一博客 invertd
        </div>
        <div class="ui inverted yellow vertical segment">
            离一博客 www.lylog.cn
        </div>
    </body>

3、padded

使其和边距保持一定距离

文档位置:https://semantic-ui.com/elements/segment.html#padded

    <body>
        <div class="ui inverted blue vertical segment">
            离一博客 inverted blue vertical
        </div>
        <div class="ui inverted vertical padded segment">
            离一博客 inverted vertical padded
        </div>
        <div class="ui inverted yellow vertical very padded segment">   <!--semantic ui是十分语义化的-->
            离一博客 www.lylog.cn</br>inverted yellow vertical very padded    <!--</br>换行符-->
        </div>
    </body>


三、使用嵌套制作网页片段

1、container(容器)

文档位置:https://semantic-ui.com/elements/container.html

2、header(此header并非网页结构中的head,他只是semantic ui中的一个ui)

文档位置:https://semantic-ui.com/elements/header.html

3、button(按钮)

文档位置:https://semantic-ui.com/elements/button.html

4、image

除非指定尺寸,否则图像将使用图像的原始尺寸,直至其容器的尺寸。

文档位置:https://semantic-ui.com/elements/image.html

文档位置:

<body>
        <div class="ui inverted vertical segment">
            <div class="ui image">
                <img src="images\banner.jpg" alt="" />
            </div>

        </div>
        <div class="ui vertical segment">
            <div class="ui container segment">
                <h1 class="ui header">container和ui header示范</h1>
                <p>
                    爱生活,爱网络,爱编程,欢迎来到离一博客,一个正在学习进步的小白的博客!!
                </p>
                <button type="button" name="button" class="ui inverted red button">I'm a button</button>    <!--semantic ui的通用性是很好的,比如inverted red,就是把这个按钮从一个实心翻转为空心,让后加上红色。-->
            </div>
        </div>
        <div class="ui inverted blue vertical segment">
            离一博客 inverted blue vertical
        </div>
        <div class="ui inverted vertical padded segment">
            离一博客 inverted vertical padded
        </div>
        <div class="ui inverted yellow vertical very padded segment">   <!--semantic ui是十分语义化的-->
            离一博客 www.lylog.cn</br>inverted yellow vertical very padded      <!--</br>换行符-->
        </div>
        <div class="ui inverted vertical very padded segment">
           Copyright © L Y
        </div>
    </body>

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇