Semantic UI
生活随笔
收集整理的這篇文章主要介紹了
Semantic UI
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
地址 http://www.semantic-ui.cn/elements/button.html
常用
一.
Element->Segment->Inverted
<div class="ui inverted segment"><p>I'm here to tell you something, and you will probably read me first.</p> </div>一個簡單示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>first web</title><link rel="stylesheet" href="css/semantic.css" media="screen" title="no title" charset ="utf-8"> </head> <body> <div class="ui inverted black segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div> <div class="ui inverted blue segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div> <div class="ui inverted red segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div> <div class="ui segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div></body> </html>效果如下
二.
我們注意到此時有圓角,陰影,相互之間還有縫隙,接下來用一下Vertical
<div class="ui inverted black vertical segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div>三.
paded 由于semantic非常語義化,可以加一個very,即very padded
<div class="ui inverted red vertical very padded segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div>四.
container
<div class="ui Vertical segment"> <div class="ui container segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div> <div class="ui container segment">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Animi corporis culpa cupiditate iusto nostrum suscipit?Debitis harum incidunt nihil? At dicta dolores earum eligendi id magnam nisi quam rem, vitae? </div> </div>五.
button
<button type="button" name="button" class="ui inverted blue button">Read more</button>
上述樣式完整代碼
六.
image
<div class="ui inverted vertical segment"><div class="ui image"></div> </div>七.
導(dǎo)航欄
<div class="ui fixed inverted menu"><a href="#" class="item">Home</a><a href="#" class="item">About</a><a href="#" class="item">Other</a></div>八.
網(wǎng)格
先引用官網(wǎng)的一個例子,里面的每一個column用于設(shè)置比例,下面的即各占四分之一
看一個具體例子,實現(xiàn)左邊圖片,右邊文字,左右比例6:4
<div class="ui segment"><div class="ui grid"><div class="ten wide column"><div class="ui image"></div></div><div class="six wide column"><h2 class="ui header"><i class="icon star"></i>This is a title</h2><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium accusantium tempora architecto eligendi laboriosam pariatur in, minus autem veritatis, quis dolore necessitatibus dolorem. Quisquam, porro, suscipit mollitia deserunt nulla repudiandae!</p></div></div></div>為了方便觀察,我截了小圖
去ui segmentt中的線
如果仔細觀察上面的圖片,會發(fā)現(xiàn)有一根白線,此時我們可以用basic去除
<div class="ui basic segment">九.
圖標icon
將下載好的Semantic-UI-CSS-master文件夾下的themes拷貝至css目錄中,便可以在代碼中引用
(更多http://www.semantic-ui.cn/elements/icon.html)
代碼如下
最后加上footer
<div class="ui inverted vertical very padded segment"><div class="ui grid"><div class=" four wide column"><div class="ui inverted vertical padded text menu"><div class="item">Adress:CN</div><div class="item">Tel:10000000</div><div class="item">E-mail:1231231</div></div> </div>復(fù)制四個
就可以了效果如下
總結(jié)
以上是生活随笔為你收集整理的Semantic UI的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： OpenCV-裁剪图片
- 下一篇： Python字符串的encode与dec