一.使用基础样式
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>