爱奇艺静态移动端仿写完成

原创 lucialiu 随笔 前端基础学习 2445阅读 2017-12-15 23:39:30 举报

周二的时候开始做的爱奇艺移动端首页仿写,开始觉得app比较规整,就截图了app的首页,之后发现截错了,周三下午开始重新截了首页网页版的图,到今天下午四点完成所有的换图检查(周三下午,周四一天到下午六点左右,周五下午一点到三点,后续去了下布的色块和精简了下代码),爱奇艺的移动端是比网页版简单不知道多少了,也比app要简单很多。
html 代码

css 代码

仿写效果图部分截图,样式相同的模块太多了~

爱奇艺静态移动端仿写完成

爱奇艺静态移动端仿写完成

爱奇艺静态移动端仿写完成

爱奇艺静态移动端仿写完成

爱奇艺静态移动端仿写完成

爱奇艺移动端仿写用到的主要知识点:
盒模型
弹性盒模型
列表
背景图大小设置(background-size:x y;)
找行高的规律和计算
定位
a标签点击时候的高亮北京的处理(-webkit-tap-highlight-color:transparent;)
表单
表单点击时表单控件外围的一圈蓝色的线的处理(out-line:none;)
对头部盒和导航栏提升层级,避免被内容滑动的时候盖住
头部导航固定,内容大于可是区域就出现滚动条,需要取消html的滚动条,把滚动条给body:
html{
overflow:hidden;
height:100%;
}
body{
overflow:auto;
height:100%;
}

写的过程中遇到的问题和解决方案:
一.问题:在写到内容区域菜单部分,每个子项在悬停的情况下会出现一条比较短的居中的下划线,开始的时候想着下划线离文字位置很远不能用text-decoration,线很短还有圆角也不能用border写,那模块里面加span用padding-top撑下去,但是整个导航部分是用弹性盒模型做的,
如果给子项加文本居中,下划线span默认状态下隐藏,悬停的时候以块元素形式展示,居中不了;
解决方案:1.文本居中是居中文本,那整个span居中是不能用文本居中来实现的,应该用margin的左右atuo来写;
2.给下划线span在鼠标悬停的时候以块属性展示,给span设置背景图居中。
二.写搜索框的时候,之前一直都只知道submit属性的标签控件是边框不占位的,宽高设置没有包含边狂发现input不能撑满form的高,但用search去做搜索框的时候,发现也是不能的;
解决方案:给input设置宽高的时候不含边框;
三.父级元素设置圆角之后,子元素不会继承父级的圆角还是会超出圆角范围,需要逐一设置;
解决方案:父级设置圆角之后,再设置溢出隐藏,就不会出现子级超出圆角的问题了;

获益:
非常好的掌握了使用弹性盒模型的方法,便利到一部到位,不需要再跟之前使用列表一样痛苦的设置margin上下左右之类的问题,还要再去重置不应该又margin/padding的值;耐心真的是越来越好了~

评论 ( 12 )
最新评论
清风啊 2018-05-04 08:50:32 12F

感觉做这个有点磨人~

lucialiu 10F 2018-01-16 23:26:16 11F

代码都是自己电脑的相对路径,没有自己的服务器,所以只传代码是看不到图片的,所以才配了截图。如果可以帮忙指正的话,请留邮箱,我发送给你

aguinhb 2018-01-15 10:54:54 10F

楼主。没有图片啊。页面效果乱糟糟的

lucialiu 8F 2017-12-28 19:23:32 9F

我自己记录自己的,跟你有什么关系嘛

Liu19950923 2017-12-28 16:28:54 8F

这些东西?发上来干嘛的?秀皮毛?

lucialiu 5F 2017-12-27 22:28:08 7F

是ipad pro的模拟,换下其他的机型会变的

lucialiu 4F 2017-12-27 22:27:52 6F

是ipad pro的模拟,换下其他的机型会变的

1217257300 2017-12-27 15:57:25 5F

浏览效果是字太大了,不过还是很厉害

lawrence 2017-12-26 02:23:47 4F

显示的字体太大了?

lucialiu 2017-12-17 17:08:27 3F

表单点击时表单控件外围的一圈蓝色的线的处理(outline:none;) 上面多写了连接符了

lucialiu 1F 2017-12-17 17:08:01 2F

图片文件太大,没有上传到图片服务器做相对路径,所以只能用截图代替

lifezhu 2017-12-17 17:05:39 1F

请问,图片呢