(前端学习)寒假第三周周报

这周学完了css的所有视频,开始做仿微博的页面
1.下面是学习视频的进度

2.2D转换模块

做了翻转菜单的练习
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin:0;padding:0;}.nave{width:600px;height:50px;background-color: #5c5c5c;margin:0 auto;margin-top:100px;list-style:none;width:600px;color:white;}div{width:600px;height:300px;background-color: red;margin:0 auto;}.nave>li{float:left;line-height:50px;text-align:center;width:180px;margin-left:15px;background-color: black;position:relative;left:0;top:0;}.sub{/*display:none;不显示元素*/position:absolute;width:180px;}.sub li{list-style:none;background-color: pink;transform:rotate(180deg);transition:all 1s;opacity:0;}/*.nave>li:hover .sub{display:block;}*/.nave>li:hover .sub li{transform:none;opacity:1;}.nave>li:hover .sub li:nth-child(1){transition-delay:0ms;}.nave>li:hover .sub li:nth-child(2){transition-delay:200ms;}.nave>li:hover .sub li:nth-child(3){transition-delay:400ms;}.nave>li:hover .sub li:nth-child(4){transition-delay:600ms;}.nave>li:hover .sub li:nth-child(5){transition-delay:800ms;}.nave>li.sub li:nth-child(5){transition-delay:800ms;}.nave>li .sub li:nth-child(4){transition-delay:0ms;}.nave>li.sub li:nth-child(3){transition-delay:200ms;}.nave>li .sub li:nth-child(2){transition-delay:400ms;}.nave>li .sub li:nth-child(1){transition-delay:600ms;}</style>
</head>
<body><ul class="nave"><li>一级菜单<ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li><li>一级菜单<ul class="sub"><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li><li>二级菜单</li></ul></li></ul><div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字城市每一年都在倾斜、堕落、向海洋移动，最终会被海水覆盖。后来，我觉得，真正的颓废和美，不是被消灭之前苟延残喘的存在，而是被清除之后，无数次重建和改造之后，面目全非却轮廓完整的一具残骸</div>
</body>
</html>

效果如下

3.动画模块

做了练习无限滚动
代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin:0;padding:0;}div{width:500px;/*width:1000px*/height:280px;background-color: pink;margin:0 auto;margin-top:100px;overflow:hidden;}ul{width:2000px;height:280px;background-color: black;animation:move 5s linear 0s infinite normal;}@keyframes move{from{margin-left:0;}to{margin-left:-1000px;}}ul li{list-style:none;width:500px;height:280px;border: 1px solid #000;background-color: red;box-sizing:border-box;float:left;}ul:hover{animation-play-state:paused;}ul:hover li{opacity:0.5;}ul li:hover{opacity:1;}</style>
</head>
<body><div><ul><li><img src="data:images/手风琴1.webp"></li><li><img src="data:images/手风琴2.webp"></li><li><img src="data:images/手风琴3.jpg"></li><li><img src="data:images/手风琴4.jpg"></li><li><img src="data:images/手风琴1.png"></li><li><img src="data:images/手风琴2.jpg"></li></ul></div>
</body>
</html>

效果如下：

做了扑克牌练习
代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin:0;padding:0;}div{background-color:skyblue;margin:0 auto;width:219px;height:300px;perspective:500px;}div img{transform-origin:center bottom;transform:transform 5s;}div img:hover{transform:rotateX(45deg);}</style>
</head>
<body><div><img src="data:images/扑克牌.jpg"></div>
</body>
</html>

效果图：

4.3D转换模块

做了正方体的练习（有两种方法）
1.先平移再旋转

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding:0;margin:0;}ul{width:200px;height:200px;box-sizing:border-box;margin:100px auto;position:relative;transform-style:preserve-3d;transform:rotateY(0deg) rotate(0deg);}ul li{width:200px;height:200px;list-style:none;border: 1px solid #000;text-align:center;line-height:200px;position:absolute;left:0;top:0;font-size:40px;}li:nth-child(1){background-color:pink;transform:translateX(-100px) rotateY(90deg);}li:nth-child(2){background-color:purple;transform:translateX(100px) rotateY(90deg);}li:nth-child(3){background-color:skyblue;transform:translateY(-100px) rotateX(90deg);}li:nth-child(4){background-color:red;transform:translateY(100px) rotateX(90deg);}li:nth-child(5){background-color:violet;transform:translateZ(-100px);}li:nth-child(6){background-color:yellow;transform:translateZ(100px);}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
</body>
</html>

2.先旋转再平移

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding:0;margin:0;}ul{width:200px;height:200px;box-sizing:border-box;margin:100px auto;position:relative;transform-style:preserve-3d;transform:rotateY(0deg) rotateX(0deg);}ul li{width:200px;height:200px;list-style:none;border: 1px solid #000;text-align:center;line-height:200px;position:absolute;left:0;top:0;font-size:40px;}li:nth-child(1){background-color:pink;transform:rotateX(90deg) translateZ(-100px);}li:nth-child(2){background-color:purple;transform:rotateX(180deg) translateZ(100px);}li:nth-child(3){background-color:skyblue;transform:translateX(100px) rotateY(90deg);}li:nth-child(4){background-color:red;transform:translateX(-100px) rotateY(90deg);}li:nth-child(5){background-color:violet;transform:rotateY(270deg) translateZ(100px);}li:nth-child(6){background-color:yellow;transform:rotateY(360deg) translateZ(-100px);}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
</body>
</html>

间接旋转后效果如下：

做了3D轮播图的练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding:0;margin:0;}body{perspective:500px;}ul{width:200px;height:200px;box-sizing:border-box;margin:100px auto;position:relative;transform-style:preserve-3d;transform:rotateY(0deg) rotateX(0deg);transform-style:preserve-3d;animation:move 5s linear 0s infinite normal;}@keyframes move{from{transform:rotateX(0deg);}to{transform:rotateX(360deg);}}ul li{width:200px;height:200px;list-style:none;text-align:center;line-height:200px;position:absolute;left:0;top:0;font-size:40px;overflow:hidden;}ul li img{width:200px;height:200px;}li:nth-child(1){background-color:pink;transform:rotateX(90deg) translateZ(100px) scale(1.5,1);}li:nth-child(2){background-color:purple;transform:rotateX(180deg) translateZ(100px) scale(1.5,1);}li:nth-child(3){background-color:skyblue;transform:translateX(150px) rotateY(90deg) scale(1,1);}li:nth-child(4){background-color:red;transform:translateX(-150px) rotateY(90deg) scale(1,1);}li:nth-child(5){background-color:violet;transform:rotateX(270deg) translateZ(100px) scale(1.5,1);}li:nth-child(6){background-color:yellow;transform:rotateY(360deg) translateZ(100px) scale(1.5,1);}</style>
</head>
<body><ul><li><img src="data:images/轮播图1.png"></li><li><img src="data:images/轮播图2.png"></li><li><img src="data:images/轮播图4.png"></li><li><img src="data:images/轮播图5.png"></li><li><img src="data:images/轮播图7.png"></li><li><img src="data:images/轮播图8.png"></li></ul>
</body>
</html>

效果如下：（它可以动的…）

学习做了长方体
只需要给正方体加上transform:scale(,);就好了，它会拉伸正方体的四个面
代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding:0;margin:0;}ul{width:200px;height:200px;box-sizing:border-box;margin:100px auto;position:relative;transform-style:preserve-3d;transform:rotateY(0deg) rotateX(0deg);}ul li{width:200px;height:200px;list-style:none;border: 1px solid #000;text-align:center;line-height:200px;position:absolute;left:0;top:0;font-size:40px;}li:nth-child(1){background-color:pink;transform:rotateX(90deg) translateZ(-100px) scale(1.5,1);}li:nth-child(2){background-color:purple;transform:rotateX(180deg) translateZ(100px) scale(1.5,1);}li:nth-child(3){background-color:skyblue;transform:translateX(100px) rotateY(90deg) scale(1.5,1);}li:nth-child(4){background-color:red;transform:translateX(-100px) rotateY(90deg) scale(1.5,1);}li:nth-child(5){background-color:violet;transform:rotateY(270deg) translateZ(100px) scale(1.5,1);}li:nth-child(6){background-color:yellow;transform:rotateY(360deg) translateZ(-100px) scale(1.5,1);}</style>
</head>
<body><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li></ul>
</body>
</html>

做了3D播放器的练习

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{margin:0;padding:0;}body{background:pink url("images/QQ图片20200101221107.jpg") no-repeat fixed;background-size:cover;}ul{width:200px;height:150px;position:absolute;left:50%;margin-left:200px;bottom:130px;transform-style:preserve-3d;animation:move 12s linear 0s  infinite  normal;}@keyframes move{from{transform:rotateX(-10deg) rotateY(0deg);}to{transform:rotateX(-10deg) rotateY(360deg);}}ul li{width:200px;height:150px;border: 1px solid #000;position:absolute;left:0;top:0;border: 5px solid white;box-sizing:boder-box;background-color: black;}ul:hover{animation-play-state:paused;}ul:hover li img{opacity:0.5;}ul li:hover img{opacity:1;}ul li img{width:200px;height:150px;}ul li:nth-child(1){background-color: black;transform:rotateY(60deg) translateZ(200px) ;}ul li:nth-child(2){background-color: black;transform:rotateY(120deg) translateZ(200px);}ul li:nth-child(3){background-color:black;transform:rotateY(180deg) translateZ(200px) ;}ul li:nth-child(4){background-color: black;transform:rotateY(240deg) translateZ(200px);}ul li:nth-child(5){background-color:black;transform:rotateY(300deg) translateZ(200px);}ul li:nth-child(6){background-color:black;transform:rotateY(360deg) translateZ(200px);}.bili{width:50px;height:50px;animation:bi 5s linear 0s infinite normal;position:absolute;left:0;bottom:100px;}@keyframes bi{0%{left:0;top:100px;}25%{left:300px;top:100px;}}</style>
</head>
<body><ul><li><img src="data:images/QQ图片20191204234833.jpg"></li><li><img src="data:images/QQ图片20191204234857.jpg"></li><li><img src="data:images/QQ图片20200101220745.jpg"></li><li><img src="data:images/QQ图片20200101221107.jpg"></li><li><img src="data:images/QQ图片20200101221114.jpg"></li><li><img src="data:images/QQ图片20191204234943.jpg"></li></ul><img src="data:images/扑克牌.jpg" class="bili"><audio src="data:images/封茗囧菌 - 遇见你的时候所有星星都落到我头上.mp3" autoplay="autoplay" loop="loop"></audio>
</body>
</html>

效果如下:（它们都会动！！）

5.背景图片相关
6.仿微博网页的练习（js还没学到就只是简单的模仿(╹▽╹)）
暂时就只做了这么一点

遇到了挺多问题，如下
1.如何使用文字图标
在度娘和同学的帮助下学会使用了iconfont
关键代码：

<head>
<link rel="stylesheet" href="images\font_1632003_es1hwudwjej\iconfont.css">
</head>
<i class="iconfont icon-shouye"> 首页</i>

2.搜索框聚焦时如何变色
使用:focus伪类选择器就可以
关键代码：

 input:focus{outline:none;/*去除焦点框*/border: 1.5px solid #eb7350;}

3.制作搜索框时的图标
还是使用那个iconfont文字图标（我觉得它好像比插图片简单一点）
要使用button标签创建按钮，因为它内部可以放置内容（文字和图片）

button{height:25px;margin-top:13px;position:absolute;left:455px;cursor:pointer;/*改变鼠标的样式*/background: transparent;border:none;}<form><input type="text" placeholder="大家正在搜:锦衣之下" class="kuang"><button type="submit"><i class="iconfont icon-sousuo"></i></button></form>

效果如下：

4.如何制作登录
可以使用a标签包裹，再设置背景样式

  .kuang1 .dl{width:270px;height:34px;display:block;color:white;line-height:34px;margin:0 auto;text-align:center;background-color:#eb7350;}

5.如何用css控制文字，超出部分显示省略号

如果是单行的话

实现方法：
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
width:px;

如果是多行的话

实现方法：
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

我用这个单行设置的时候一直显示不出来，后来发现应该给直接包裹文字的标签设置这个属性
效果如下:

以上就是这周的总结啦

(前端学习)寒假第三周周报相关推荐

Java学习---第三周周报
第三周周报收获 1.正则表达式的进阶应用-计算器通过再次对正则表达式的学习,记住了各个符号的应用,通过下题的展示,得到了一种思路,可以用于设计计算器,在计算器的设计中,让用户输入一连串的数字包括运 ...
学习Python第三周总结
学习Python第三周总结一.函数和模块 1.1 函数的定义 Python中的函数的自变量称为函数的参数,而因变量称为函数的返回值在Python中可以使用def关键字来定义函数,命名规则跟变量 ...
软件工程学习进度第三周暨暑期学习进度之第三周汇总
第三周,本周并未将重心放在java学习上,只是在教数据结构的刘老师留的暑假作业PTA练习题上使用java进行编程,本周的重心主要放在机器学习上,javaweb只是了解了一部分jQuery的内容,优化了 ...
吴恩达深度学习-Course4第三周作业 yolo.h5文件读取错误解决方法
这个yolo.h5文件走了不少弯路呐,不过最后终于搞好了,现在把最详细的脱坑过程记录下来,希望小伙伴们少走些弯路. 最初的代码是从下面这个大佬博主的百度网盘下载的,但是h5文件无法读取.(22条消息) ...
吴恩达深度学习(一)-第三周：Planar data classification with one hidden layer
Planar data classification with one hidden layer 本练习会建立只有一个隐藏层的神经网络,我们将看到这与逻辑回归有多大的差别. You will lear ...
寒假第三周学习总结与反思
这次一共是11天的时间,学了很多东西,首先是结束了操作系统的学习,开学在做一个项目熟悉一下,又重新学了一遍Python基础,又学了直流电机.PID.机械臂.后面又学了怎么用openmv跑神经网络.再接 ...
重学前端学习笔记（三十六）--Flex 布局
笔记说明重学前端是程劭非(winter)[前手机淘宝前端负责人]在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入winter的专 ...
软件构造学习笔记-第三周
本周介绍了软件开发的几种模型,并重点介绍了Git.Git是分布式版本控制系统,可以通过SSH key建立远程与本地的连接,通过Git Bash中的命令进行文件的上传和下载.对于这门课程,Git的主要作 ...
WDK李宏毅学习笔记第三周02_高斯分布与逻辑回归编程实践
第一周学过的机器学习知识的总结与实践摘要在第一周知道了机器学习是什么,以及用Regression解决预测问题,用高斯分布和逻辑回归解决分类问题,以及在解决这些问题时用到的梯度下降算法.为了加深理解 ...

(前端学习)寒假第三周周报

(前端学习)寒假第三周周报相关推荐

最新文章

热门文章