熊猫TV全部分类页面布局实现效果

每天看直播，突然看了一下熊猫TV上的全部分类页面的布局，左边宽度固定不变，右边宽度随窗口宽度变化而变化。于是想了一下要怎么实现。

原效果如下：

实现原理：就是左边用fixed定位浏览器，然后右边的div定位padding-left = 左边的宽度，那么就可以实现左边固定，然后右边随窗口宽度变化而变化了。

效果：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><meta name="apple-mobile-web-app-capable" content="yes"><meta content="telephone=yes" name="format-detection" /><meta name="apple-mobile-web-app-status-bar-style" content="white"><meta name="x5-fullscreen" content="true"><meta name="apple-touch-fullscreen" content="yes"><title>熊猫TV全部分类页面布局实现效果</title><style>* {margin: 0;padding: 0;}li{list-style:none;}.outbox{position:absolute;/**如果没有这个属性那么height就不会和窗口高度一样**/width:calc(100% - 200px);height:100%;padding-left:200px;}.left{position:fixed;width:200px;height:100%;margin-left:-200px;background:blue;font-size:50px;color:#fff;}.outbox .middle{height:auto;}.outbox .middle li{display:inline-block;width:200px;height:250px;margin:10px;background:red;line-height:250px;line-height:250px;text-align:center;font-size:20px;}</style>
</head>
<body><div class="left">我是左边的内容</div><div class="outbox"><div class="left">我是左边的内容</div><div class="middle"><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div></div>
</body>
</html>

熊猫TV全部分类页面布局实现效果相关推荐

仿淘宝菜单分类页面布局--iframe框架有限替代方案
之前做一些类似后台管理界面,典型的左侧菜单.右侧布局,基本都采用iframe框架来完成虽然iframe操作起来非常方便,但是也存在问题,例如页面不够美观,css样式布局会出现各种复杂问题以至于显得比 ...
Python抓取熊猫TV分类下的主播人气排名
抓取LOL分类下的主播人气排名情况: """ 抓取熊猫TV当前分类主播人气排名 """ import re from urllib impo ...
应用css div进行页面布局设计,利用CSS与DIV进行页面布局.ppt
<利用CSS与DIV进行页面布局.ppt>由会员分享,可在线阅读,更多相关<利用CSS与DIV进行页面布局.ppt(6页珍藏版)>请在人人文库网上搜索. 1.利用CSS与DIV ...
HTML标签及页面布局
目录 HTML标签分类页面布局及文字设计标题布局常用标签文字样式设置文字字形标签 HTML标签分类单标签例:<br> 双标签例:<h1>字号&l ...
微信小程序用列表渲染实现页面布局
列表渲染** 简单列表小程序在组件上使用wx:for属性实现列表渲染,即同一个组件批量出现多次,内容可以不同.其原理是使用wx:for绑定一个数组,然后就可以自动用数据中的每个元素以此渲染该组件,形 ...
Python爬取熊猫TV 英雄联盟游戏分类下面所有主播的人气排行
编写这个原生爬虫项目的3个主要目的: 1.巩固 python 基础知识 2.了解合理的编码规范和方式 3.了解爬虫基本原理项目分析: 1.爬取网站: 熊猫TV(https://www.panda.t ...
element-UI栅格系统缩放，导致页面布局效果bug? 叠加？错位？
这里以此代码片段为例说明一则bug,请bug对号入座.(bug截图省略) 页面的栅格缩放,导致页面布局发生叠加错位? 一.坑1 · 引言: (先来一则bug代码) <el-card v-for= ...
利用HTML+CSS进行页面布局（div的浮动效果）
什么叫做浮动??(利用一系列图片来解释什么叫浮动) 我们利用float:left;进行div浮动时,会有一个立体的抽象浮动过程,浮动的div会上向左移,而跟在下面的div会占据第一个div的位置,这个 ...
熊猫TV直播H5播放器架构探索
本文来自熊猫TV音视频技术专家姜雨晴在LiveVideoStackCon 2017上的分享,并有LiveVideoStack整理成文.当下,打造一款播放器已经有比较好的开源实现,但熊猫TV为什么还要自 ...

熊猫TV全部分类页面布局实现效果

熊猫TV全部分类页面布局实现效果相关推荐

最新文章

热门文章