用户登录

在英雄区上的这个按钮,我们用了 semantic ui 里的按钮组件提供的样式 .. 在我们的设计里,按钮的四周没有圆角效果 ..

所以我们需要自定义一下 semantic ui 的按钮样式 ..

打开 semantic ... src .. definitions ..

在 elements 下面,可以找到定义按钮样式的源代码 ... 就是这个 button.less ,semantic ui 的样式是用 less 的形式创建的 ..

在这个 .ui.button 里面, 你会发现一个 border-radius .. 它可以设置元素的圆角效果 .. 这里用了一个变量来表示这个属性的值 .. 我们可以重新定义一下这个变量的值 ... 复制一下这个变量的名字 ..

打开 semantic ,src ,site 这个目录,elements .. 找到里面的 button.variables ...

把复制的变量粘贴过来 .. 然后把它的值设置成 0 ..

我们的项目的自动化任务会重新给我们编译需要的样式 ..

现在你会发现,在英雄区上显示的按钮,就没有了圆角效果 ...

英雄区:按钮样式《 网页设计案例:英雄区 》

统计

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

社会化网络

关于

微信订阅号

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