用户登录

打开 app ... index.html ..

在这个 navbar,也就是页面的导航栏的下面,可以添加英雄区的代码 .. 一个包装 .. 加上 ui hero ..

它可以是一个幻灯片,幻灯片的每个项目可以放在一个 带 item 类的包装里 ..

每个项目里面有内容,就是幻灯片上面的文字,还有一个图片 .. 先给内容添加一个包装 .. 加上一个 content 类 ..

内容要居中的页面上显示,这里可以使用 semantic ui 的 container 组件提供的样式 .. 一个 div,加上 ui container ..

内容的最上面是一个子标题 .. 用一个 div ,上面加上 sub header ..

里面的内容是 Discovery

子标题的下面是大标题,可以使用一个 h2 标签,这个标签表示的是二级标题 .. 上面加上 header .. 全新一代发现

大标题的下面是描述 .. 这个包装可以用一个 description

全尺寸七座 SUV,现已接受预订。

然后是一个按钮 .. 可以先用一个包装 .. 添加一个 action 类 ... 这些类的名字我们可以自己定义 ... 对你来说有意义就行 ..

里面包装的是一个按钮 .. 可以直接用一个 a 标签 ... 我们用的 semantic ui 为按钮提供了很多样式 ..

你也可以自己为按钮写几行样式代码 .. 我们的设计很简单,按钮就是黑色的背景,白色的文字 ..

这里可以用一下 semantic ui 里的按钮样式 ... 需要一个样式表 ... 名字是 button.css ..

在这个 a 标签上面,加上 ui big black button ,一个大号的黑色的按钮 .

英雄区:代码《 网页设计案例:英雄区 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点