Semantic UI实现一个landing page
生活随笔
收集整理的這篇文章主要介紹了
Semantic UI实现一个landing page
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
完整代碼
注意正確引入css文件
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="css/semantic.css"> </head> <body><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><div class="ui image"></div><div class="ui basic 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><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><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><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><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><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><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></div> </div> </body> </html>效果
總結
以上是生活随笔為你收集整理的Semantic UI实现一个landing page的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Python字符串的encode与dec
- 下一篇： Scrapy-xpath用法以及实例