Html编写的网页实在难看,这是我写的吗?LayUI完美解决UI烦恼

<button>按钮</button>

在这里插入图片描述
问:上面的按钮样式还满意吗?
答:有些单调,加点样式吧!

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
</style>
<button class="button">按钮</button>

在这里插入图片描述
问:这下看起来不错!好想还缺少一些,直角可以修改为圆角吗?
答:可以的,完全没问题。

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
   border-radius: 5px; --  新增样式
}
</style>
<button class="button">按钮</button>

在这里插入图片描述
通过上面的样式可以发现,一个按钮可以轻松实现,那么要是不同的按钮呢?又当如何;
LayUI经典模块化前端框架,封装好了这些样式,只需要在button按钮上引入相关的样式即可实现效果。

<button type="button" class="layui-btn">一个标准的按钮</button>
<a href="http://www.xmkeshe.cn" class="layui-btn">一个可跳转的按钮</a>

不同的主题供选择:

原始	class="layui-btn layui-btn-primary"
默认	class="layui-btn"
百搭	class="layui-btn layui-btn-normal"
暖色	class="layui-btn layui-btn-warm"
警告	class="layui-btn layui-btn-danger"
禁用	class="layui-btn layui-btn-disabled"

在这里插入图片描述
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于 2016 年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
扫码学习

发布了46 篇原创文章 · 获赞 12 · 访问量 7万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 创作都市 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览