JAVA页面展示问题

把产品按照这种形式展示,请问大神应该怎么做?... 把产品按照这种形式展示 ,请问大神应该怎么做? 展开
 我来答
三江五湖四海
2018-08-21 · TA获得超过108个赞
知道答主
回答量:122
采纳率:100%
帮助的人:23.9万
展开全部

可以通过layui来做,这个是前端的一个页面。下面是一个例子,layui的例子

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>layui</title>

<meta name="renderer" content="webkit">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="网页链接"  media="all">

<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->

</head>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

<legend>卡片面板</legend>

</fieldset>   

<div style="padding: 20px; background-color: #F2F2F2;">

<div class="layui-row layui-col-space15">

<div class="layui-col-md6">

<div class="layui-card">

<div class="layui-card-header">卡片面板</div>

<div class="layui-card-body">

卡片式面板面板通常用于非白色背景色的主体内<br>

从而映衬出边框投影

</div>

</div>

</div>

<div class="layui-col-md6">

<div class="layui-card">

<div class="layui-card-header">卡片面板</div>

<div class="layui-card-body">

结合 layui 的栅格系统<br>

轻松实现响应式布局

</div>

</div>

</div>

<div class="layui-col-md12">

<div class="layui-card">

<div class="layui-card-header">标题</div>

<div class="layui-card-body">

内容

</div>

</div>

</div>

</div>

</div> 

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">

<legend>常规折叠面板</legend>

</fieldset>

<div class="layui-collapse" lay-filter="test">

<div class="layui-colla-item">

<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性?</h2>

<div class="layui-colla-content">

<p>有不少其他答案说是因为JS太差。我下面的答案已经说了,这不是根本性的原因。但除此之外,我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的,所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题,并不是“错误”,而是当时绝大部分脚本语言都是这样的,如perl/php/sh等。模块的问题也是,脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是,只不过现在用那些老的脚本语言的人比较少,所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言,满足不了开发需求,1999年就该死。半残这个嘛,就夸张了。JS虽然有很多问题,但是设计总体还是优秀的。——来自知乎@贺师俊</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架?</h2>

<div class="layui-colla-content">

<p>因为不适合。如果希望开发长期的项目或者制作产品类网站,那么就需要实现特定的设计,为了在维护项目中可以方便地按设计师要求快速修改样式,肯定会逐步编写出各种业务组件、工具类,相当于为项目自行开发一套框架。——来自知乎@Kayo</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">layui 更适合哪些开发者?</h2>

<div class="layui-colla-content">

<p>在前端技术快速变革的今天,layui 仍然坚持语义化的组织模式,甚至于模块理念都是采用类AMD组织形式,并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候,而早期市面上基于jQuery的UI都普通做得差强人意,所以需要有一个新的UI去重新为这一领域注入活力,并采用一些更科学的架构方式。

<br><br>

因此准确地说,layui 更多是面向那些追求开发简单的前端工程师们,以及所有层次的服务端程序员。</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">贤心是男是女?</h2>

<div class="layui-colla-content">

<p>man! 所以这个问题不要再出现了。。。</p>

</div>

</div>

</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

<legend>手风琴折叠</legend>

</fieldset>

<div class="layui-collapse" lay-accordion="">

<div class="layui-colla-item">

<h2 class="layui-colla-title">layui 更适合哪些开发者?</h2>

<div class="layui-colla-content layui-show">

<p>在前端技术快速变革的今天,layui 仍然坚持语义化的组织模式,甚至于模块理念都是采用类AMD组织形式,并非是有意与时代背道而驰。layui 认为以jQuery为核心的开发方式还没有到完全消亡的时候,而早期市面上基于jQuery的UI都普通做得差强人意,所以需要有一个新的UI去重新为这一领域注入活力,并采用一些更科学的架构方式。

<br>

因此准确地说,layui 更多是面向那些追求开发简单的前端工程师们,以及所有层次的服务端程序员。</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">为什么JS社区大量采用未发布或者未广泛支持的语言特性?</h2>

<div class="layui-colla-content">

<p>有不少其他答案说是因为JS太差。我下面的答案已经说了,这不是根本性的原因。但除此之外,我还要纠正一些对JS具体问题的误解。JS当初是被作为脚本语言设计的,所以某些问题并不是JS设计得差或者是JS设计者的失误。比如var的作用域问题,并不是“错误”,而是当时绝大部分脚本语言都是这样的,如perl/php/sh等。模块的问题也是,脚本语言几乎都没有模块/命名空间功能。弱类型、for-in之类的问题也是,只不过现在用那些老的脚本语言的人比较少,所以很多人都误以为是JS才有的坑。另外有人说JS是半残语言,满足不了开发需求,1999年就该死。半残这个嘛,就夸张了。JS虽然有很多问题,但是设计总体还是优秀的。——来自知乎@贺师俊</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">为什么前端工程师多不愿意用 Bootstrap 框架?</h2>

<div class="layui-colla-content">

<p>因为不适合。如果希望开发长期的项目或者制作产品类网站,那么就需要实现特定的设计,为了在维护项目中可以方便地按设计师要求快速修改样式,肯定会逐步编写出各种业务组件、工具类,相当于为项目自行开发一套框架。——来自知乎@Kayo</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">贤心是男是女?</h2>

<div class="layui-colla-content">

<p>man! 所以这个问题不要再出现了。。。</p>

</div>

</div>

</div>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">

<legend>面板嵌套</legend>

</fieldset>

<div class="layui-collapse" lay-accordion="">

<div class="layui-colla-item">

<h2 class="layui-colla-title">文豪</h2>

<div class="layui-colla-content layui-show">

<div class="layui-collapse" lay-accordion="">

<div class="layui-colla-item">

<h2 class="layui-colla-title">唐代</h2>

<div class="layui-colla-content layui-show">

<div class="layui-collapse" lay-accordion="">

<div class="layui-colla-item">

<h2 class="layui-colla-title">杜甫</h2>

<div class="layui-colla-content layui-show">

伟大的诗人

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">李白</h2>

<div class="layui-colla-content">

<p>据说是韩国人</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">王勃</h2>

<div class="layui-colla-content">

<p>千古绝唱《滕王阁序》</p>

</div>

</div>

</div>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">宋代</h2>

<div class="layui-colla-content">

<p>比如苏轼、李清照</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">当代</h2>

<div class="layui-colla-content">

<p>比如贤心</p>

</div>

</div>

</div>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">科学家</h2>

<div class="layui-colla-content">

<p>伟大的科学家</p>

</div>

</div>

<div class="layui-colla-item">

<h2 class="layui-colla-title">艺术家</h2>

<div class="layui-colla-content">

<p>浑身散发着艺术细胞</p>

</div>

</div>

</div>

<br>

<p>支持无限嵌套,应用场景非常多!</p>

<script src="网页链接" charset="utf-8"></script>

<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->

<script>

layui.use(['element', 'layer'], function(){

var element = layui.element;

var layer = layui.layer;

//监听折叠

element.on('collapse(test)', function(data){

layer.msg('展开状态:'+ data.show);

});

});

</script>

</body>

</html>

网易云信
2023-12-06 广告
很高兴能回答您的问题。以下是一段针对“一对一消息组件”的描述,字数在200字左右:该组件支持用户之间的私密交流,让沟通更加直接和高效。通过它,您可以向特定对象发送消息,并实时查看消息状态,包括对方是否已读或未读。同时,该组件还支持富文本消息... 点击进入详情页
本回答由网易云信提供
飛天宝宝
2018-08-21 · TA获得超过216个赞
知道小有建树答主
回答量:355
采纳率:64%
帮助的人:81.4万
展开全部
在数据库的数据上就加上abcd,取得时候在页面上显示时把第一位去掉就行了
追问
谢谢 , 已完成了.
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
百搭屋平台
2018-08-21 · TA获得超过292个赞
知道小有建树答主
回答量:325
采纳率:55%
帮助的人:30.8万
展开全部
我的想法:应该是类似利用ikanalyzer将首字的字母提取出来,然后数据库按照这个字母排序或分组
追问
谢谢 , 已完成了.
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
abcd6559402
2018-08-21 · TA获得超过2054个赞
知道小有建树答主
回答量:1883
采纳率:62%
帮助的人:209万
展开全部
和java没关系。使用html中ul+li。
追问
谢谢 , 已完成了.   在程序中完成的,页面直接取数据就可以;
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(2)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式