css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...

大家好，我是前端菜鸟李不白，这一期内容带来的是layui框架中的栅格布局。

那么什么才叫做栅格呢？如图所示。

那么网页中的栅格是怎么区分的？以优酷电脑版为例。

并不是说优酷就用的layui开发的，这里只是举例做分析。

我截图的这一块分为三个部分，上面内容导航部分，为一个横向区域，正在热播这一块，也为一个横向区域。剧集这一块也为一个横向区域。它们里面的每一个小部分，可以看成每一个竖列。为了更直观的感受，我把效果图放一下。

那么怎么利用layui做到呢？首先我们要打开layui官网。

点击下载，你会得到一堆你需要的东西，类似于swiper官网，找轮播代码一样。它把所有的代码准备好，你用到什么，就加入什么就ok了。下载完成你会得到这些东西。

首先我们打开编辑器，先来引入它的代码。

有关css的部分，用link来引入。有关js部分，用src来引入。引入完成以后，我们开始做内容部分。用layui的方便之处就是，我觉得它把网页中的响应式做的比较不错。它里面自带了一些响应式布局的临界点。在多少多少视窗区域，是pc展示，多少多少视窗区域，再以平板，手机的视窗情况，改变网页布局来展示给用户。

这几行代码，先写个内容区域，类名layui-container有一些样式是框架里准备好的，我么自己再去根据自己的需求再添加样式就可以了。这里的宽度如果不写，它会默认1140px。适合于pc端展示。

这是上面的代码效果图，那么接下来再在这里面添加三行内容区域，代码如下。

类名里多加的颜色类名，是为了效果图区分每一行，给每一行加的颜色。

现在每一行搞定了，看效果，有点类似于弹性盒模型。接下来再搞定每一列。

颜色先不管了，主要看图。写了四列，为了加以区分，在样式上加了一个border。那么这四列怎么分配空间的呢？

layui会把你设置的宽度划分为十二等份。比如上面的layui-col-md3的意思就是，每一列占总宽度三份。col代表列，md代表pc端展示，还有sm平板，xs手机。而3数字，就代表占的几份。

而这四列刚好平均分完十二份，那么就可以在一行展示。如果不是呢？

比如，A列占了7份，B列占了6份，C列占了6份，D列占了6份。现在A+B是13份，不是12份，那么A就按照规定，单独占一行。把其它列挤下去。而B和C刚好12份，那么按规定，它两占一行，D独占一行。

如果B也是7份，那么继续往下挤。

如果你还想加间隙，为了看起来更好看，或者想要改变某些盒子的位置怎么办？

如上图所示，可以在你需要改动的盒子上，加入以上类名。如果不满足，可以添加样式margin一类的去改变，达到你想要的布局效果。

还有一个效果就是layui-hide-$。

$字符改成md或者sm或者xs，表示在不同设备下，隐藏一些盒子。因为是响应式布局嘛，在不同设备下展示的效果肯定不一样，所以做好取舍，隐藏不需要的盒子，以达到在当前设备下展示，比较舒服。

以上就是有关layui在栅格这一块的部分，而且用layui做响应式的时候，一定要设计好，在什么样的设备下，展示什么样的页面。如果一边做一边设计，就不是那么美好了。

当你拿到一个网页设计稿的时候，先思考，分为几个区域，每一部分都有什么，脑袋里要清晰的划分出来，这样在开发的时候，才会节省很多时间。

好了，这一期的内容就到这里，我们下期见，拜拜！！！

css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...相关推荐

css修改layui的下拉框样式 js_layui创建表单下拉框样式不显示
border-left: 5px solid #009688; 注释:solid实体,实心样式: Blockquote:块引用;Fieldset:字段集; 1.所有浏览器都支持标签. fieldse ...
css修改layui的下拉框样式 js_layui下拉框实现级联
选择city 北京上海广州深圳杭州选择区域 layui.use('form', function () { var form = layui.form; layui.form.on('sel ...
css修改layui的下拉框样式 js_layui的安装以及简单操作
最近有需要做前端界面的快速开发,于是就考虑到前端框架的使用.Layui是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用.其外在极简, ...
html select 样式t调整_css修改html select下拉框样式(含右边箭头)
css修改html select下拉框样式(含右边箭头)2017-10-12 16:51 我们经常会看到一些页用用的select下拉框非常漂亮,其实很多是用插件实现的. 如果不使用插件,靠纯css能不 ...
layui select(下拉框)修改事件监听
layui select(下拉框)修改事件监听示例(节选): 当下拉框选项修改后,自动执行my_function函数. HTML部分: <select id="camera_strea ...
css自定义下拉框样式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
layui表格下拉框无法显示
layui表格下拉框无法显示开发工具与关键技术:java 作者:彭浩达撰写时间:2019年 7月 4日 $(function () { layui.use(['layer', 'table'], ...
HTML下拉框样式美化
在网页中,下拉框的样式最难美化,默认样式巨丑,好在现在已经有各种框架实现了下拉框的样式美化,主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换,再将对应选项及事件进行关联. 最近一项 ...
select美化自定义下拉框样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...

css修改layui的下拉框样式 js_layui，经典模块化前端UI框架，前端菜鸟带你初识栅格。...相关推荐

最新文章

热门文章