仿写爱奇艺视频 认知于首页,熟练于电影搜索页,……于电影详情页

原创 lucialiu 随笔 前端基础学习 418阅读 2017-12-11 23:33:27 举报

讲真我不是爱奇艺视频的用户,一直都是用YOUTOBE和腾讯视频,做爱奇艺之后无论是PC页面还是APP,总觉得不是我喜欢的风格(ps:真怕爱奇艺工作人员看到来打我),仿写的时候遇到的阻碍开始是因为信心和耐心不足,后来大多来源于对那些功能感到稀奇,凭网页截图不清楚是什么功能,然后一遍又一遍的去看原网站,有的做完了发现是一张大图……
用一个周做了首页,然后用一个周的所有下午做了一个搜索页和一个详情页。上午学习的时候就有些心猿意马,其实也不是心猿意马,晚上睡多了早上犯困,晚上睡少了听讲时候是不是大脑莫名放空十几秒,简直感觉是不可饶恕。爱写备忘录的我,因为上一周每天早睡晚起拉下很多笔记复习,还有周末练习。。而且心里多少不安,睡觉有总梦到知识点没有吃透或者没有做完练习,醒来就觉得恶性循环。今天回来的时候看到一句话“Dream more while you are awake”,所以已经下单了红酒,准备早点喝酒入睡,早起好好打起精神学习,fighting!
下面是电影搜索页的代码html 代码

css 代码

.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.wrap{
width:1180px;
margin:0 auto;
}
.mr12{
margin-right: 12px;
}
.mr3{
margin-right: 3px;
}
.mr-3{
margin-right: -3px;
}
.mr8{
margin-right: 8px;
}
.mr9{
margin-right: 9px;
}
.mr10{
margin-right: 10px;
}
.mr15{
margin-right: 15px;
}
.mr20{
margin-right: 20px;
}
.mb14{
margin-bottom: 14px;
}
.mb19{
margin-bottom: 19px;
}
.w30{
width: 30px;
}
.w51{
width: 51px;
}
.w79{
width: 79px;
}
.w41{
width: 41px;
}
.w69{
width: 69px;
}
.w65{
width: 65px;
}
.w30{
width: 30px;
}
.w48{
width: 48px;
}
.w53{
width: 53px;
}
.w63{
width: 63px;
}
.w57{
width: 57px;
}
.w78{
width: 78px;
}
.w82{
width: 82px;
}
.pl26{
padding-left: 26px;
}
.pl21{
padding-left: 21px;
}
.pl22{
padding-left: 22px;
}
.pl23{
padding-left: 23px;
}
.pl25{
padding-left: 25px;
}
.pl3{
padding-left: 13px;
}
.pl16{
padding-left: 16px;
position: relative;
}
.br{
border-right: 1px solid #3f5500;
}
.nmb{
margin-bottom: 0;
}
.mb19{
margin-bottom:19px;
}
/透明定位图标/
/视频清晰度/
.pixel{
text-align: center;
position: absolute;
left: 5px;
bottom: 4px;
height: 16px;
padding: 0 3px;
line-height: 16px;
color: #fff;
background-color: rgba(0,0,0,.5);
cursor: pointer;
}
/视频期数/
.period{
text-align: center;
position: absolute;
right: 5px;
bottom: 4px;
height: 16px;
line-height: 16px;
color: #fff;
padding: 0 5px;
background-color: rgba(0,0,0,.5);
cursor: pointer;
}
/视屏时间/
.video-time{
text-align: center;
position: absolute;
right: 5px;
bottom: 4px;
height: 16px;
padding: 0 4px;
line-height: 16px;
color: #fff;
background-color: rgba(0,0,0,.5);
cursor: pointer;
}
/特制/
.particular{
position: absolute;
top:0;
right:0;
text-indent: -9999px;
height: 39px;
width: 39px;
cursor: pointer;
background: url(../img/index/index-bg.png) no-repeat -368px -3px;
}
/自制/
.self-control{
position: absolute;
top:0;
right:0;
text-indent: -9999px;
height: 39px;
width: 39px;
cursor: pointer;
background: url(../img/index/index-bg.png) no-repeat -408px -3px;
}
/vip/
.VIP{
position: absolute;
top:4px;
left: 4px;
width:33px;
height: 17px;
cursor: pointer;
text-indent: -9999px;
background: url(../img/index/index-bg.png) -162px -38px;
}
/用券/
.coupon{
position: absolute;
top:4px;
left: 4px;
width:34px;
height: 17px;
cursor: pointer;
text-indent: -9999px;
background: url(../img/movie-detail/movie-detail-bg.png) -136px -17px;
}
/付费/
.purchase{
position: absolute;
top:4px;
left: 4px;
width:34px;
height: 17px;
text-indent: -9999px;
background:url(../img/index/index-bg.png) -105px -78px;
}
/直播/
.webcast{
position: absolute;
top:4px;
left: 4px;
width:34px;
height: 17px;
text-indent: -9999px;
cursor: pointer;
background:url(../img/index/index-bg.png) -105px -100px;
}
/长条广告图的"广告"/
.slenderly-ad-mark{
position:absolute;
top: 0;
left: 0;
display: block;
width:28px;
height: 18px;
font-weight: bold;
line-height: 18px;
text-align: center;
cursor: pointer;
background-color: rgba(0,0,0,.5);
color: #fff;
}
/头部热推内容斜杠/
.line{
display: inline-block;
height: 14px;
width: 14px;
margin: 0 8px;
text-indent: -9999px;
background:url(../img/index/index-bg.png) no-repeat -198px -16px;
}
/上一张、下一张 图片翻页按钮/
.before,
.next{
height: 43px;
width: 25px;
font-size: 20px;
cursor: pointer;
}
.before{
position: absolute;
top:104px;
left: 0;
}
.next{
position: absolute;
top:104px;
right: 0;
}
.before-bg,
.next-bg{
position: absolute;
height: 43px;
width: 25px;
background-color: rgba(0,0,0,.5);
}
.before a{
position: absolute;
top:12px;
left: 6px;
color: #FFF;
z-index: 2;
}
.next a{
position: absolute;
top:12px;
right: 6px;
color: #FFF;
z-index: 2;
}

/今天/
.today{
position: absolute;
top: 0;
left: 0;
width:124px;
height: 45px;
text-indent: -9999px;
cursor: pointer;
background: url(../img/index/index-bg.png) no-repeat -448px 0;
}

/背景色/
.green-bgc{
background-color: #6ba300;
}
.grey-bgc{
background-color: #9f9f9f;
}
.red-bgc{
background-color:#e9472d;
}
.black-opacity-bgc{
background-color:rgba(0,0,0,.5);
}
/向上箭头图标//向下箭头图标//减少图标/
.up-arrow,.down-arrow,.reduce{
position: absolute;
top: 7px;
right: 0;
width:7px;
height:8px;
text-indent: -9999px;
}
/向上箭头图标/
.up-arrow{
background: url(../img/index/index-bg.png) no-repeat -162px -156px;
}
/向下箭头图标/
.down-arrow{
background: url(../img/index/index-bg.png) no-repeat -162px -164px;
}
/减少图标/
.reduce{
background: url(../img/index/index-bg.png) no-repeat -162px -172px;
}
/评分/
.grade{
position: absolute;
right: 5px;
bottom: 28px;
width:22px;
height: 16px;
color:#ff722c;
font-family: georgia;
}
.grade .grade-integer{
height: 16px;
font-size: 14px;
}
.grade .grade-decimals{
height: 8px;
padding-top: 6px;
font-size: 8px;
}

/电影搜索结果页的评分/

movie-page .movie-searching-grade{

position: absolute;
top: -1px;
right: 0;
width: 25px;
height: 16px;
color: #ff7233;

}

movie-page .movie-searching-grade .grade-integer{

height: 16px;
font-size: 16px;

}

movie-page .movie-searching-grade .grade-decimals{

height: 13px;
padding-top: 2px;
font-size: 12px;

}
/周几/
.weekday{
text-align: center;
position: absolute;
right: 10px;
bottom: 8px;
height: 18px;
line-height: 18px;
color: #fff;
padding: 1px 5px 0;
border-radius: 2px;
background-color: rgba(0,0,0,.7);
}
/电影时长/
.movie-time{
position: absolute;
right: 0;
bottom: 0;
height: 20px;
line-height: 20px;
padding: 0 3px;
color: #fff;
background-color: rgba(0,0,0,.7);
}
/收藏/
.go_to_save{
position: absolute;
right: 3px;
bottom: 2px;
height: 20px;
width: 20px;
text-indent: -9999px;
cursor: pointer;
background:url(../img/movie-detail/movie-detail-bg.png) no-repeat -112px 0 ;
display: none;
}
.go_to_save:hover{
display: block;
background-position: -112px -20px;
}
css 代码

css 代码

下面是效果图(其实页面特别长,爱奇艺的模块各分,类型细数有41个模块,没有重复写,就写了挑了每个类型一个写了)

仿写爱奇艺视频认知于首页,熟练于电影搜索页,……于电影详情页

仿写爱奇艺视频认知于首页,熟练于电影搜索页,……于电影详情页

仿写爱奇艺视频认知于首页,熟练于电影搜索页,……于电影详情页

仿写爱奇艺视频认知于首页,熟练于电影搜索页,……于电影详情页

仿写爱奇艺视频认知于首页,熟练于电影搜索页,……于电影详情页

评论 ( 5 )
最新评论
张磊 4F 2017-12-14 09:22:38 5F

指教谈不上,共同学习

lucialiu 3F 2017-12-13 23:34:44 4F

是的呢,请多指教哦

张磊 2017-12-13 16:17:32 3F

你刚学前端?

lucialiu 1F 2017-12-12 22:58:54 2F

嗯,你背地里有男朋友