Home > Article > Web Front-end > How to use the Layui framework to develop a responsive news website
How to use the Layui framework to develop a responsive news information website
Introduction:
With the continuous development of the Internet, the way people obtain news information has also changed changed. Nowadays, more and more people use the Internet to browse news and information websites to obtain all kinds of information. In order to meet the needs of users, we need to develop a modern, responsive news and information website. This article will describe how to use the Layui framework to achieve this goal, and provide specific code examples.
1. Introduction to the Layui framework:
Layui is a front-end UI framework based on jQuery, which provides rich components and fine-grained UI control capabilities. The Layui framework has good compatibility, is easy to get started, and supports responsive design, making it very suitable for developing news and information websites.
2. Project setup:
npm init npm install layui
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>新闻资讯网站</title> <link rel="stylesheet" href="node_modules/layui-src/dist/css/layui.css"> <script src="node_modules/layui-src/dist/layui.js"></script> </head> <body> <!-- 编写HTML结构 --> </body> </html>
3. Website layout:
<div class="layui-nav layui-layout-admin"> <ul class="layui-nav layui-layout-left"> <li class="layui-nav-item layui-this"><a href="">首页</a></li> <li class="layui-nav-item"><a href="">新闻</a></li> <li class="layui-nav-item"><a href="">资讯</a></li> </ul> </div>
<div class="layui-container"> <!-- 内容区域 --> </div>
4. Dynamic data loading:
The sample code is as follows:
layui.use('jquery', function(){ var $ = layui.jquery; $.ajax({ url: 'news_api.php', type: 'get', dataType: 'json', success: function(data){ // 处理数据 }, error: function(){ // 处理错误 } }); });
The sample code is as follows:
layui.use(['laytpl'], function(){ var laytpl = layui.laytpl; var data = [ {title: '新闻标题1', content: '新闻内容1'}, {title: '新闻标题2', content: '新闻内容2'}, {title: '新闻标题3', content: '新闻内容3'} ]; var tpl = document.getElementById('news_template').innerHTML; laytpl(tpl).render(data, function(html){ document.getElementById('news_list').innerHTML = html; }); });
The sample code is as follows:
<script type="text/html" id="news_template"> {{# layui.each(d, function(index, item){ }} <div class="layui-row"> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4"> <div class="layui-card"> <div class="layui-card-header">{{ item.title }}</div> <div class="layui-card-body">{{ item.content }}</div> </div> </div> </div> {{# }); }} </script> <div id="news_list"></div>
5. Responsive layout:
The sample code is as follows:
<div class="layui-row"> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4"> <div class="layui-card"> <div class="layui-card-header">新闻标题1</div> <div class="layui-card-body">新闻内容1</div> </div> </div> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4"> <div class="layui-card"> <div class="layui-card-header">新闻标题2</div> <div class="layui-card-body">新闻内容2</div> </div> </div> <div class="layui-col-xs12 layui-col-sm6 layui-col-md4"> <div class="layui-card"> <div class="layui-card-header">新闻标题3</div> <div class="layui-card-body">新闻内容3</div> </div> </div> </div>
The sample code is as follows:
@media screen and (max-width: 767px){ .layui-col-xs12{ width: 100%; } } @media screen and (min-width: 768px) and (max-width: 991px){ .layui-col-sm6{ width: 50%; } } @media screen and (min-width: 992px){ .layui-col-md4{ width: 33.333333333%; } }
6. Summary:
Through the introduction of this article, we have learned how to use the Layui framework to develop a responsive news information website. Using the Layui framework, we can quickly build the basic structure of the website, implement dynamic data loading through Ajax and laytpl, and implement responsive layout through the grid component. I hope this article is helpful to you, and I wish you success in developing a beautiful news information website!
The above is the detailed content of How to use the Layui framework to develop a responsive news website. For more information, please follow other related articles on the PHP Chinese website!