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

本文链接： https://blog.csdn.net/ylcto/article/details/101194504

<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 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。
扫码学习

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

猜你喜欢