静态网页开发学习_用 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>

发送评论 编辑评论

发送评论编辑评论