當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

Semantic UI

發(fā)布時(shí)間：2025/3/21 编程问答 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 Semantic UI 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

地址 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>

一個(gè)簡(jiǎn)單示例

<!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>

效果如下

二.

我們注意到此時(shí)有圓角,陰影,相互之間還有縫隙,接下來(lái)用一下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非常語(yǔ)義化,可以加一個(gè)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

上述樣式完整代碼

<div class="ui container segment"><h1 class="ui header">First web</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Cupiditate inventore reprehenderit voluptatibus. Aliquid, architecto aut, ea eligendi error illo iusto, libero maxime obcaecati odio omnis possimus rem repudiandae tenetur voluptatibus.</p><button type="button"name="button" class="ui inverted blue button">Read more</button></div>

六.

image

<div class="ui inverted vertical segment"><div class="ui image">![](img/background.jpg)</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)的一個(gè)例子,里面的每一個(gè)column用于設(shè)置比例,下面的即各占四分之一

看一個(gè)具體例子,實(shí)現(xiàn)左邊圖片,右邊文字,左右比例6:4

<div class="ui segment"><div class="ui grid"><div class="ten wide column"><div class="ui image">![](img/0.jpg)</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>

為了方便觀(guān)察,我截了小圖

去ui segmentt中的線(xiàn)

如果仔細(xì)觀(guān)察上面的圖片,會(huì)發(fā)現(xiàn)有一根白線(xiàn),此時(shí)我們可以用basic去除

九.

圖標(biāo)icon
將下載好的Semantic-UI-CSS-master文件夾下的themes拷貝至css目錄中,便可以在代碼中引用
(更多http://www.semantic-ui.cn/elements/icon.html)

代碼如下

<h2 class="ui header"><i class="icon star"></i>This is a title</h2>

最后加上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ù)制四個(gè)

就可以了
效果如下

總結(jié)

以上是生活随笔為你收集整理的Semantic UI的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

UI
Semantic

上一篇： OpenCV-裁剪图片
下一篇： Python字符串的encode与dec