SSM电影点播系统03-UI界面设计

界面设计

本系统设计思想大概是以大屏显示为主，左侧有一个浏览框，右侧显示点击选中的电影，再加上一个搜索框，整体风格我是设计成了蓝色色调，白色字，用 SUI mobile 前端框架设计了部分 DIV 的样式，右侧以一张大海报，简介，电影的基本信息加一张轮播图为基准。

设计效果图

设计思路

左侧运用 DIV 设计成卡片式，顶端加一个搜索框，用于搜索电影关键字，当点击左侧的卡片时，右侧内容发生变化，可以根据点击的时候获取电影编号，也可以直接从左侧类目获取传参。此项目，我打算设计成三种代码框架，一个是本项目 SSM 框架，一个是 Thinkphp5 框架，还有一个是不使用数据的纯 HTML、JavaScript 的纯静态页面，无需服务器交互。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>UP电影院</title>
<link rel="stylesheet" href="./static/css/blm.css">
<link rel="stylesheet" href="./static/css/sm.css">
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<script type='text/javascript' src='./static/js/jquery.min.js' charset='utf-8'></script>
<script type='text/javascript' src='./static/js/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='./static/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='./static/js/fixed-search.js' charset='utf-8'></script>
</head>
<body>
<div class="content" style="background: #175F9B;color:#FFFFFF; ">
<div class="wrapper"><div class="left" id="sidebar"><!-- 电影目录 --><div class="card " id="search-in" style="position:sticky;" ><div class="card-content"  ><div class="list-block media-list"  ><ul><li class="item-content text"><input type="text"/></li></ul></div></div></div><div class="card "><div class="card-content card-fixed"><div class="list-block media-list"><ul><li class="item-content"><div class="item-media"><img src="./imgs/movies/01/p2160195181.jpg" class="thumbnail-left"></div><div class="item-inner"><div class="item-title-row"><div class="item-title">白日梦想家</div></div><div class="item-subtitle "><span class="vie-item">英语</span><span class="vie-item">类型: 剧情 / 喜剧 / 冒险</span><span class="vie-item">上映日期: 2013-12-25(美国)</span><span class="vie-item">片长: 114分钟</span></div><span class="mv-intro">华特·米堤（Walter Mitty）是一位《生活杂志》的员工，但常常有各式各样的白日梦。知名摄影师尚恩·欧康诺（Sean O'Connell）有一天送了一卷特别的底片作品，并特别说明希望有一张相片能够成为“生活杂志”最后一期的封面。</span></div></li></ul></div></div></div><!-- 电影目录 --></div>
<div class="content-padded grid-demo"><div class="row"><!-- <div class="mv-detail"> --><div class="col-33"><!-- 海报 --><img src="./imgs/movies/01/p2160195181.jpg" class="mposter"></div><div class="col-33 mpcontent"><H3>简介</H3>华特·米堤（Walter Mitty）是一位《生活杂志》的员工，但常常有各式各样的白日梦。知名摄影师尚恩·欧康诺（Sean O'Connell）有一天送了一卷特别的底片作品，并特别说明希望有一张相片能够成为“生活杂志”最后一期的封面。华特在底片影像部门工作，而过去十六年来从未弄丢过一张相片，然而这次却找不到这张所谓的25号底片，因此从未真正出去冒险过的华特，决定出门寻找尚恩，找回失踪的25号底片。他一开始先前往位于格陵兰的奴克，在当地一间酒吧询问一位邮差，得知尚恩在一条渔船上，于是他便跟着刚好要送无线电零件给条那船的邮差一同前往。因为他们搭乘着直升机，所以华特必须跳机才能抵达，但因一时疏忽而跳到了海上，奋力抵抗鲨鱼后被救了起来，接下来就是他精彩又刺激的冒险。</div><div class="col-33 mpcontent"><H3>基本资料</H3><span class="vie-item">英语</span><span class="vie-item">类型: 剧情 / 喜剧 / 冒险</span><span class="vie-item">上映日期: 2013-12-25(美国)</span><span class="vie-item">片长: 114分钟</span>导演：本·斯蒂勒<br>主演：本·斯蒂勒<br><br><br><H3>最后一次观看时间</H3><span class="vie-item">2019-09-07-21:00</span>
<br><br><H3>点击播放</H3></div><!-- </div> --></div><div class="row" style="overflow-x: hidden;height: 25rem;">
<div class="click_a" style="padding-top: 0;"><a href="javascript:;" class="hover_L"><img src="data:images/hover-fl.png" alt=""></a><a href="javascript:;" class="hover_R"><img src="data:images/hover-fr.png" alt=""></a></div><div class="mark-main"><div class="click_con" style="margin-left: -180px; width: 8700px;"><div class="system_list" >    <img src="./imgs/movies/01/QQ图片20190905220538.png" style="width: 14rem; height:16rem;">                       <div class="system_list_con"></div><div class="layer-mask"></div></div><div class="system_list" ><img src="./imgs/movies/01/QQ图片20190905220538.png" style="width: 14rem; height:16rem;"><div class="layer-mask"></div></div><div class="system_list new_cur" ><img src="./imgs/movies/01/QQ图片20190905220538.png" style="width: 14rem; height:16rem;"><div class="layer-mask"></div></div><div class="system_list" ><img src="./imgs/movies/01/QQ图片20190905220538.png" style="width: 14rem; height:16rem;"><div class="layer-mask"></div></div><div class="system_list" >   <img src="./imgs/movies/01/QQ图片20190905220538.png" style="width: 14rem; height:16rem;"><div class="layer-mask"></div></div><div class="system_list"><img src="./imgs/movies/01/QQ图片20190905220538.png" style="width: 14rem; height:16rem;"><div class="layer-mask"></div></div></div></div>     </div></div>
</div>
</div>
</div>
</div><script type="text/javascript" src="js/script.js"></script>
</body>
</html>

结尾

其实前端代码我并熟，大部分还是靠复制粘贴来实现，这样看着比较顺眼，因为，以前尝试过自己写样式，写布局，发现写得非常丑，确实很丑，因为很多功能虽然实现了，但是不够美观，可能在 UI 设计方面还需要加强，前端越来越庞大了，所以我也想学点前端的东西。

SSM电影点播系统03-UI界面设计相关推荐

SSM电影点播系统01--可行性分析和需求分析
前言根据软件生命周期,我将我接下来的项目,进行规划,首先进行可行性分析,描述该项目的可行性是怎样的.对该软件的经济条件.社会条件,还有我自身的技术能力进行分析. 然后同时进行需求分析,将所需要的模块 ...
SSM电影点播系统02-数据字典
设计数据库这个时候,我们开始设计数据库,主要是根据需求,来设计数据库需要保存哪些字段,哪些字段需要单独存在一张表里,哪些是可以一关联的形式存放.并且以一种清晰的表格形式来保存成文档,记录过程.可以设 ...
游戏UI界面设计视频教程全套
库(UI插画漫画开发建模美术教程大全) 2014-11-28 16:54:21 1.全面系统(从基础到进阶,涵盖所有细节,特别是没有受过特别专业培训的亲们,更加需要) 2.有序排列(按照教程属性与绘画 ...
2018年Sketch UI界面设计套件前十了解下！
Sketch近几年凭着大量的插件和免费教程迅速发展,而Sketch的忠实粉丝们也乐于将他们的免费模型分享出来.这也意味着你会在网上找到更多的免费Sketch素材,从完整的模型到内容详实的UI套件. 为 ...
iPhone 6/6Plus UI界面设计和适配尺寸规范
iPhone 6/6Plus UI界面设计和适配尺寸规范发布于: 2014 年 12 月 10 日 by admin 对于iPhone 6/6Plus UI界面设计和适配尺寸规范的相关教程和知识点, ...
Python学习笔记--exe文件打包与UI界面设计
exe文件打包与UI界面设计前言一.基于tkinter实现的UI设计 1.1 库的选择及思路 1.2 定位方法的选用 1.3 Frame控件 1.4 变量设置 1.5 批量设置 1.6 Text文 ...
uniapp简单UI界面设计《登录界面粉丝列表我的好友设置页面等》（附源码）
涉及Uniapp框架结构.UI图到界面标签元素的转换过程.标签Uniapp框架配置和Uniapp常见组件使用,熟练使用Uniapp常用API和Flex布局,熟练掌握页面跳转数据传参方法以及uniapp ...
视频教程-AI基础实战视频课程（海报书籍、多媒体设计、UI界面设计）-其他
AI基础实战视频课程(海报书籍.多媒体设计.UI界面设计) 杨老师课堂由杨亦涛主讲,他是网站工程师和UI设计讲师,10年网站开发与教学经验,上百个网站项目成功案例.精通php.JavaScript.C ...
【UI设计基础知识】UI界面设计怎么划分
UI界面设计是什么?我们来解释一下.对于用户的界面,我们想一下,我们日常生活中接触到的哪些是用户界面?我们的手机界面.电脑界面.iPad界面.还有车载系统界面.VR界面等.将这些界面设计划分为三类:P ...

SSM电影点播系统03-UI界面设计

界面设计

设计效果图

设计思路

结尾

SSM电影点播系统03-UI界面设计相关推荐

最新文章

热门文章