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">![](img/girl.jpg)</div><div class="ui basic 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><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相关推荐

php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
semantic ui html5,css中什么是Semantic UI框架？
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
什么是 Landing Page？
什么是 Landing Page? 小杰@Zhao 小杰@Zhao 2011-03-10 11:24:04 Landing page也可以称为登陆页(也称着陆页),网站上任何一个接受流量的网页都可以称 ...
打包图片上传cdn_Media Buy之Landing Page的资源文件CDN部署方案
前言最早期的时候,我是跟随<40天>教程的方法,把资源文件(img/css/js)也放到CloudFront里面,第二个月CDN的费用扣了我60多刀,当时跑的Pop.切换到Push为主之 ...
semantic ui html5,Semantic UI ：安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
Semantic UI入门
安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了用gulp进行安装用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...
semantic.css,CSS框架：Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
Semantic Ui 之容器 container
第一步:创建项目添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...
Semantic UI术语
Semantic UI 的特定术语术语类型一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...

Semantic UI实现一个landing page

完整代码

效果

Semantic UI实现一个landing page相关推荐

最新文章

热门文章