html css 优酷客户端视频界面仿写 rem swiper flex使用

git 地址

git@github.com:comjustforfun/youkuLayoutHtml.git

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>youkuMianPage</title><script src="BaseJs/adaptive.js" type="text/javascript" ></script><script src="BaseJs/jquery.min.js" type="text/javascript" ></script><script src="js/main.js" type="text/javascript" ></script><link rel="stylesheet" type="text/css" href="css/swiper.css"><link rel="stylesheet" href="css/swiper.min.css"><script>window['adaptive'].desinWidth = 750;// 设计图宽度window['adaptive'].baseFont = 100;// 没有缩放时的字体大小window['adaptive'].maxWidth = 375;// 页面最大宽度 默认540window['adaptive'].init();// 调用初始化方法
</script>
<style type="text/css" media="screen">@font-face {font-family: 'iconfont';src:url('iconfont/iconfont.ttf') format('truetype'), url('iconfont/iconfont.svg#iconfont') format('svg');}html{font-size: 100px  !important;}.iconfont{font-family:"iconfont" !important;font-size:16px;font-style:normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;-moz-osx-font-smoothing: grayscale;}body{background: white;overflow-y: scroll;}a{text-decoration: none;}li{list-style: none;   }*{margin: 0;padding: 0;}.select{color: blue;}.container{width: 100%;}header{height: 3rem;width: 100%;background: red;}content{overflow-y: scroll;}.title{border-bottom: 0.05rem solid  gray;}.title h2{display: flex;line-height: 0.4rem;height: 0.4rem;}.title .des{flex: 1;}html{font-size: 16px;}.font{font-size: 0.16rem;}.show_taial li{float: right;}.show_taial li.play{float: left;}.show_taial:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}.show_taial li{margin-left: 20px;font-size: 16px;}.show_taial{margin-top: 0.2rem;margin-bottom: 0.2rem;}.show_taial .share{margin-left: 0.1rem;}.show_taial li.li_share{margin-right: 0.2rem;}.introduce{display: flex;border-bottom: 0.05rem solid  gray;padding-bottom: 0.1rem;}.introduce  li:nth-of-type(1){flex: 1;margin-left: 0.1rem;}.introduce  li:nth-of-type(2){flex: 8;}.introduce  li:nth-of-type(3){flex: 2;}.introduce  li:nth-of-type(3) p{line-height: 0.5rem;color: white;}.read a{color: white;font-size: 0.16rem;}.read{background: blue;border-radius: 10px;text-align: center;line-height: 0.2rem;margin-right: 0.2rem;line-height: 0.3rem;}.introduce p,.introduce li{font-size: 0.16rem;line-height: 0.3rem;}.introduce{margin-top: 0.2rem;}.headimg img{width: 0.6rem;height: 0.6rem;border-radius: 50%;}.choicePage{display: flex;margin-top: 0.2rem;padding-bottom: 0.2rem;border-bottom: 0.1rem solid  gray;}.choicePage p,.choicePage a,.choicePage span,.choicePage li{font-size: 0.16rem;}.choicePage li:nth-of-type(1){flex: 7;}.choicePage li:nth-of-type(2){flex: 2;}.update_time{margin-right: 0.1rem;}a.more{font-size: 0.2rem;}.cut_line{width: 0.02rem;height: 0.1rem;display: inline-block;background: blue;}.sw li{font-size: 0.16rem;}dt img{width: 50px;height: 50px;border-radius: 25px;}footer{margin-top: 0.2rem;padding-bottom: 0.1rem;border-bottom: 0.01rem solid gray;}footer .imgContainer,footer div{float: left;height: 1rem;/*-----------------------------------------------------------------------------------------------------------------------------------------*/}footer div p{font-size: 0.16rem;}footer p img{width: 100%;height: 100%;}footer:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}footer p.imgContainer{width: 1.5rem;height: 1rem;/*------------------------------------------------------------------------------------------------------------------------*/}footer div{display: flex;flex-direction: column;width: 2rem;margin-left: 0.1rem;}.video_title p{-webkit-flex:1;flex: 1;}.video_title p:nth-of-type(1){margin-top: 0.1rem;}
</style></head>
<body><div class="container"><header></header><content><div class="title"><h2><span  class="des font">Flower sister Chinese second</span><i class="font">></i> </h2><ul class="show_taial"><li class="play"><i class="iconfont"></i><span class="share">sharePreference</span></li><li  class="li_share"><i class="iconfont"></i></li><li><i class="iconfont"></i></li><li ><i class="iconfont"></i></li></ul></div></content><ul class="introduce"><li class="headimg"><img src="img/head.png" alt=""></li><li><p>flower sister</p><p>7.7millons read</p></li><li><p class="read"><a href=""> +read</a></p></li></ul><ul class="choicePage"><li><p><span class="cut_line"></span><span> choicePage</span></p></li><li><span class="update_time">updateto</span><a href="" class="more">></a></li></ul><!-- Swiper --><div class="swiper-container" style="border-bottom: 0.1rem solid gray"><div class="swiper-wrapper"><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div><div class="swiper-slide">  <ul class="sw"><li>sister</li><li>160514</li><li>icon 1.6milion</li></ul></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div><!-- Swiper --><div class="swiper-container" style="border-bottom: 0.1rem solid gray"><div class="swiper-wrapper"><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div><div class="swiper-slide">  <dl><dt><img src="img/head.png" alt=""></dt><dd>huiyuan</dd></dl></div></div><!-- Add Pagination --><div class="swiper-pagination"></div></div><ul class="choicePage"><li><p><span class="cut_line"></span><span> flower</span></p></li><li><span class="update_time">updateto</span><a href="" class="more">></a></li></ul><footer><p class="imgContainer"><img src="img/head.png" alt=""></p><div class="video_title"><p>first</p><p>secong</p><p>third</p></div></footer><footer><p class="imgContainer"><img src="img/head.png" alt=""></p><div class="video_title"><p>first</p><p>secong</p><p>third</p></div></footer><footer><p class="imgContainer"><img src="img/head.png" alt=""></p><div class="video_title"><p>first</p><p>secong</p><p>third</p></div></footer><footer><p class="imgContainer"><img src="img/head.png" alt=""></p><div class="video_title"><p>first</p><p>secong</p><p>third</p></div></footer><footer><p class="imgContainer"><img src="img/head.png" alt=""></p><div class="video_title"><p>first</p><p>secong</p><p>third</p></div></footer><!-- Swiper JS --><script src="js/swiper.min.js"></script></div><!-- Initialize Swiper --><script>var swiper = new Swiper('.swiper-container', {slidesPerView: 5,paginationClickable: true,spaceBetween: 0,freeMode: true});</script>
</body>
</html>

html css 优酷客户端视频界面仿写 rem swiper flex使用相关推荐

优酷java_youtubie 仿优酷的视频网站，采用JAVA开发，支持Oracle数据库。主要功能包含注册登录，上传 Jsp/Servlet 238万源代码下载- www.pudn.com...
文件名称: youtubie下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 12657 KB 上传时间: 2015-04-23 下载次数: 1 详细说明:仿优酷的 ...
经验分享：上传视频到优酷客户端
分享一个和技术开发无关的经验,但是对爱奇艺会员续费不熟悉的话,这个经验还是很有作用的,尤其是自动续费这个功能,爱奇艺做的很好,很隐蔽,不刻意找的话基本找不到怎么取消自动续费会员的功能.那么,下面就来介 ...
mac下优酷客户端下载视频路径
为什么80%的码农都做不了架构师?>>> 使用优酷客户端可以下载视频的默认是在:/Users/用户名/Library/Containers/com.youku.mac/Dat ...
仿优酷客户端底部导航源码
实现类似优酷客户端底部导航菜单按钮.效果十分炫,用户拖动列表是,导航按钮自动隐藏.点击某个按钮,更多按钮会从底部引出.具体效果请看视频.测试时,需将模拟器的语言区域设置成中国.该源码由源码天堂IOS动 ...
优酷客户端或者网页浏览器播放视频花屏的解决方法
网上说取消硬件加速功能.其实不好使. 本次症状:网页播放不花屏,优酷客户端花屏. 解决办法:360电脑专家,搜索关键词花屏,即可解决. 原理,不明. 转载于:https://www.cnblogs ...
优酷html5视频没有弹幕,优酷弹幕怎么设置优酷PC端怎么屏蔽底下弹幕？
电脑版优酷打开弹幕步骤: 打开电脑浏览器,在地址栏输入优酷官网地址,进入优酷官网. 进入优酷官网后,点击想要观看的影片并播放. 影片非全屏播放时,在播放界面有一个全屏符号,点击该符号进入全屏播放模式. ...
对优酷客户端开发的初步理解
优酷开放平台介绍¶ 优酷开放平台是基于优酷海量视频库的开放的发现.订阅.分享与交流平台.满足您从上传.传播.播放到分享.聚合.交流的全部需求. 责任与义务(对用户的数据要密切的保护,不得用于不正当的收 ...
优酷客户端3.8.0 [优酷客户端官方正式版]
软件名称:优酷客户端 3.8.0官方正式版 [优酷客户端官方正式版] 授权方式:免费软件界面语言:简体中文软件性质:常用软件软件大小:8.26MB 所属专题: 运行环境:Win2K,WinXP, ...
python播放视频代码_python脚本抓取优酷在线视频地址代码
<派森>(Python)3.13 win32 英文安装版类型:编程工具大小:21M语言:英文评分:8.7 标签: 立即下载喜欢优酷的视频,但是要下载它的客户端才能下载在线的视频,这一 ...

html css 优酷客户端视频界面仿写 rem swiper flex使用

html css 优酷客户端视频界面仿写 rem swiper flex使用相关推荐

最新文章

热门文章