慕课静态页面制作周记

最新推荐文章于 2022-11-20 22:22:01 发布

Isco也是O型腿

最新推荐文章于 2022-11-20 22:22:01 发布

阅读量256

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_53926719/article/details/115312858

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

慕课静态页面临摹制作周记

第一周周记

3.13日记

今天是工作第一天，一个中午弄好了顶部导航栏，但是功能不完善，下载二维码和课程没有显示出来，搜索框的文字鼠标点击时也没有置空，登陆的鼠标悬停变色没有原页面的渐变效果。但也解决了一些bug。

导航栏注意点：

一般用li包含链接（li+a）

1.语义更清晰，有条理

2.直接用a，搜索引擎容易辨别为堆砌关键字嫌疑

bug：在设置搜索框（提交按钮）时，点击会有原本的框出现。

解决方案：

outline：none
/* 取消选中时的文本框 */

bug：制作左侧选课栏时，鼠标悬停背景时，盒子内部链接不变色。

解决方案

.list div:hover a{
    color: #00c758;
}

bug：制作左侧选课栏时，文字过长但不换行，用…代替时，行距会自动增高

解决方案：原本设置盒子时，将div盒子改成了行内块元素，多了外边距，删去则好

新学知识：

定位position，更好使单一元素移动到指定位置

相对定位（relative），相对盒子中的定位。

绝对定位（absolute），相对浏览器定位。

文字不换行自动省略

  /*强制不换行 */
    white-space: nowrap;
     /*文字隐藏后添加省略号 */
    text-overflow: ellipsis;
     /*自动隐藏文字 */
    overflow: hidden;

鼠标悬停盒子，盒子内部元素变化

div：hover a（span）

鼠标样式变化

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
  <li style="cursor:not-allowed">我是文本</li>
</ul>

display:flex; /*弹性盒子*/

justify-content: space-between; /*两端对齐，子元素之间有间隙*/

flex-flow: row wrap;/*子元素溢出父容器时换行*/

3.14日记

今天休息了一下，只完成了中间一小部分。在直播的交互页面卡了，还没能想明白，所以先放下了。

新学知识：

:nth-child(n) 选中父元素的第n个子元素。快速选择有规律的元素。

3.15日记

今天中午正想继续完成，但是滚动原界面时，发现顶部导航栏时固定不动的，所以要修改一下。

总体感觉比昨天做的更顺手，可能是样式比较固定的原因，保持学习的劲头！

bug：顶部导航栏会只是固定在页面顶部，不随浏览器变化

解决方案：使用position：fix，但会脱标，即头部导航栏不占位置，所以下一个盒子的上外边距要适当增加。

bug：设置向右滑动箭头时，背景图片不能显示

解决方案：background-size: contain; 缩小图片来适应元素的尺寸（保持像素的长宽比），保证在设定的框内。

3.16日记

今天做了个闹乌龙的bug，设置课程的样式时，ul里用li装着div，第一个div怎么输入都不显示，发现是对齐方式的row按回车按成了row-reverse，对齐方式变成了右边，也就是倒序，所以第一个盒子在最后面，而我隐藏了后面几个，所以自然看不到。

还有几个小图标用了定位，也更好的理解了定位的使用，比如子绝父相什么的，有时候还可以在外面套一个空盒子当作相对定位，内容也就可以在盒子内定位了。

新学内容：

calc函数，width:cal(50% -50px);当前宽度为页面的50%再减去50像素，符号可变，数字可变，同理。-号前一定要加空格。

box-sizing: border-box;改变盒子样式，将边框和内边距算进盒子大小里，即100*100包含内边距和边框大小，不用担心边框会影响盒子大小了

-webkit-line-clamp: 2;限制文字行数为两行，超出则用省略号，这是一个是一个不规范的属性，它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。

-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

3.17日记

今天大多是套用样式，修改图片和介绍。就是在做弹性盒子时，了解到不同的情况要适用不同的对齐方式，灵活变通。

flex为弹性布局，可以达到自适应或自动调节子盒子间的距离，默认值为0 1 auto。

flex属性有3个值，分别是flex-grow，flex-shrink，flex-basis。

flex-grow为放大倍数，当盒子有空隙时，则按该系数自动分配空间。flex-shrink为缩小倍数，子盒子超出父盒子空间时，按该系数缩减空间。flex-basis为盒子原大小。

弹性布局还有关键的对齐方式justify-content，align-content，align-items。

justify-content设置同一行子元素在X轴的对齐方式，即为横向排列。align-content设置同一列子元素在Y轴的对齐方式，即为纵向排列。align-items设置同一行子元素在Y轴的对齐方式，即为横向布局的盒子纵向排列。一半利用justify-content，align-items就能使内容居中显示。

1.当flex-direction:row时，这时水平轴为主轴，垂直轴为侧轴

justify-content：调整水平轴上的对齐方式；
align-content：调整垂直轴上各行间的对齐方式（仅在多于一行时有效）；
align-items：调整每一行里各个item垂直轴上的对齐方式
justify-content：调整垂直轴上的对齐方式；
align-content：调整水平轴上各行间的对齐方式（仅在多于一行时有效）；
align-items：调整每一行里各个item水平轴上的对齐方式；

åœ¨è¿™é‡Œæ’å¥å›¾ç‰‡æè¿°

注意当多行对齐时，如果不能填充满一行，则会出现空间过剩，分配空间过多现象

åœ¨è¿™é‡Œæ’å¥å›¾ç‰‡æè¿°

3.18日记

再做用户故事的背景图时，导不出图片了，借鉴了下网页源码，发现原来背景是渐变的。

linear-gradient(90deg,rgb(81, 113, 146) 0%,rgba(75,107,148,1) 100%);

属性分别是：渐变方向，初始颜色，初始位置（在版面的百分之几），最终颜色，最终位置。

åœ¨è¿™é‡Œæ’å¥å›¾ç‰‡æè¿°

若将源码中初始颜色和结束位置改一下，则有如下效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LTX1ea2A-1617026759478)(C:\Users\Lenovo\Desktop\数智考核\img\image-20210320224604632.png)]

3.19日记

今天终于完成了整个静态页面了。自己做的时候，想法还是很固定，就是盒子套盒子，布局时没有想好下一步该怎么走，做到往后发现不合适才倒回去修改，很多盒子都是一个套一个，不够灵活，对比原网页源码，发现别人是很灵活，运用不同的知识，有时浮动有时又弹性盒子，往后还是要多学习别人的思路。还有动态交互跟鼠标悬停时显示的内容没有处理，下周尽快学习进行完善。

transform：rorate（45deg）进行旋转45°

3.20日记

之前的日记忘了保存，电脑重启了…所以很多记录的bug都忘了，只记得一些新学到的知识。

今天看了下被人视频怎么做网页，学到了很多小细节，做了导航栏课程的小箭头。

箭头可以用盒子边框实现，若是实心箭头，可设置盒子为0*0，边框则会被分成正方形的四个对角，我们4个边框都要写，只保留需要的边框颜色，其余的不能省略，都改为 transparent 透明就好了，同时改变边框宽度就能改变三角的大小

div {

    width: 0; 

    height: 0;
    line-height:0；
    font-size: 0;
   border-top: 10px solid red;

   border-right: 10px solid green;

   border-bottom: 10px solid blue;

   border-left: 10px solid #000; 

     }

还学到了伪元素选择器：：before：：after。

还有transform，可以控制变化的时间和样式

结合昨天的旋转，就完成了会动的箭头啦。

还有文本框鼠标悬停时默认值隐藏的问题，

 
onfocus="if(this.value=='123456')this.value='';" onblur="if(this.value=='') this.value='123456';"

聚焦时如果值为默认值，则清空，失去焦点时，则回复默认值。

3.21日记

缩小页面时发现，顶部导航栏固定了，横向移动滚动条时不移动，而原网页是随滚动栏移动。查看我的代码发现是display：fixed，固定住了，所以改成了display：sticky粘性定位，可以随滚动条移动了，且不脱标，但是之前的第二个盒子设置了上边距，可以取消了。

还有昨天设置的小三角，缩小也会跑到其他位置，发现是父盒子相对定位给错了，只给了上一级盒子，没有给最外层盒子。

3.22日记：

昨天晚上学了点动画，今天运用了一下，将侧边导航栏的更多的那个下拉栏用动画实现出来了，但是没有整个表格都动画效果，运用还不够熟练啊😥。而且也算用了一种比较巧妙的方法，没有用到display：none或者visibility: visible;感觉用不明白，试的时候消失是消失了，但是也没有显现出来。所以用了其他方法。就是将多出来的部分另外用盒子装着，用定位定到列表的下面，将背景颜色和字体调成透明，然后用动画效果做成背景有颜色和盒子长度逐渐变长，有弹出的那种效果。这种做法应该算“投机“吧，不太实用，因为要改变盒子内的全部样式，鼠标悬停时也有不同的样式，而动画选择范围也有限，所以会比较麻烦，如果样式较少，应该可以试一试。

还做了悬浮下载app就出来下载二维码，跟课程的变化窗口，用了定位跟做小三角的技巧，发现还挺简单的。就是课程的内容，跟下面热门分类是一样的，但是套用样式却不行，将a改成div又好了。

新学内容：

overflow-y:auto的使用，div中内容超出指定高度，出现滚动条

3.23日记

昨晚冥思苦想，突然灵感来了，原因是设置了导航栏的链接有其他统一的样式，所以会覆盖掉新加的链接样式，所以还是要回去复习一下css标签优先级。

原样式为命名为.hot1，为一个类选择器，权重0010，但是导航栏中的链接有.nav a样式，虽然都是类选择器，但是还加了一个元素选择器，所以权重为0010+0001.

后期学习时发现有趣的东西，：hover前加不加空格，是有不同的效果的。

当:hover有空格时，元素本身不会受到改变，会改变其子元素。
当:hover没有空格时，元素本身受到改变，但不会影响其子元素。
如div a :hover,影响a里面的子元素
div a:hover，只影响a，不影响其子元素。

总结：由于时间进度不够，还没有弄轮播图跟选项卡，下拉菜单也只是做了几个，还没有完善。结合自己的学习进度还可以，但还是要加快进度。有时候还是不熟练，做的时候不够灵活，有些地方没有统筹全局，容易被其他样式覆盖。整体还是没什么大问题，加油！

Isco也是O型腿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
慕课静态页面制作周记

慕课静态页面临摹制作周记第一周周记3.13日记今天是工作第一天，一个中午弄好了顶部导航栏，但是功能不完善，下载二维码和课程没有显示出来，搜索框的文字鼠标点击时也没有置空，登陆的鼠标悬停变色没有原页面的渐变效果。但也解决了一些bug。导航栏注意点：一般用li包含链接（li+a）1.语义更清晰，有条理2.直接用a，搜索引擎容易辨别为堆砌关键字嫌疑bug：在设置搜索框（提交按钮）时，点击会有原本的框出现。解决方案：outline：none/* 取消选中时的文本框 */bug：制作左侧选课
复制链接

扫一扫