布局
左侧是可以滚动浏览电影类目的，右侧会根据左侧点击的内容，显示不同的电影信息，左侧可以根据电影条目数量出现滚动条，右侧不随左侧滚动而滚动。设计 HTML 和 CSS 页面主要是通过 DIV 实现。需要你掌握基本的前端知识，和设计美感，比如搜索框里的图标要居中，使用矢量图，使用百分百而不是固定像素。
CSS 设计：
*{padding: 0;margin: 0;}
html,body{width: 100%;height: 100%;}
.wrapper{width: 100%;height: 100%;}
.left,.right{height: 100%;}
.left{float: left;width: 30%;background: #ffc333;overflow-y: scroll;}
.right{margin: 0 0 0 220px;width: 70%;background: #orange;}
HTML 标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上面固定，右侧固定，左侧内容可滚动</title>
</head>
<body>
<div class="wrapper">
<div class="left">
1<br>
</div>
<div class="right">我是右边内容</div>
</div>
</div>
</body>
</html>
效果图：
改进
由于我自己对前端设计没有那么熟练，借助一下成熟的框架 SUI 框架来设计一下，左侧使用卡片样式来布局各个电影，右侧用栅格来分块实现各个电影的基本信息展示。整体风格用蓝色，同时还加入了搜索框，借助 JS 来实现滚动悬停
先看看悬停的代码：
$(document).ready(function (){
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $("#sidebar").height();
$("#sidebar").scroll(function(){
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
if(nScrollHight>10)
$('#search-in').offset({top:$(document).scrollTop()+10});
});
});
基本思路就是先获取高度，然后对滚动事件进行绑定，如果滚动长度超过一定长度，就修改偏移量即可。
原生的滚动条非常的丑陋，我就简化了一下，修饰滚动条的代码如下：
.left::-webkit-scrollbar{
width:10px;
height:4px;
}
.left::-webkit-scrollbar-track{
background: #f6f6f6;
border-radius:2px;
}
.left::-webkit-scrollbar-thumb{
background: #aaa;
border-radius:2px;
}
.left::-webkit-scrollbar-thumb:hover{
background: #747474;
}
.left::-webkit-scrollbar-corner{
background: #f6f6f6;
}
这里需要注意的是，这个滚动条不是整个屏幕的滚动条，而是左侧 DIV 的滚动条，所以是针对“left”ID来绑定的。设计页面的全部代码如下
HTML 标签如下：
<!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">
<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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="./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>
导演：本·斯蒂勒<br>
主演：本·斯蒂勒<br>
片长: 114分钟<br>
语言：英语<br>
上映日期：2013年10月5日（纽约电影节）
</div>
<!-- </div> -->
</div>
<div class="row">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
效果图如下，整体风格比较偏蓝色，适合大屏显示。
接下来的准备
静态架构基本如此，接下来我们将着重编写后端 API 接口，来实现动态的添加和编辑电影的基本信息，图片的保存和显示，以及搜索电影，滚动刷新等内容。大体实现过程就是，提供一个 URL 地址，前端用 GET 或者 POST 的方式获取 JSON 串，然后分析 JSON 用于前端显示，动态生成电影的条目和具体信息。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦