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

第一周周记

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日记：

昨天晚上学了点动画，今天运用了一下，将侧边导航栏的更多的那个下拉栏用动画实现出来了，但是没有整个表格都动画效果，运用还不够熟练啊

慕课静态页面制作周记相关推荐

HTML5期末大作业——中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品
HTML5期末大作业--中华传统文化题材学生网页设计成品(6页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 DW静态页面制作 web网页成品常见 ...
使用html5静态页面的总结,幸福西饼：静态页面制作项目总结
在coursera上学完了密歇根大学开的前端入门课,仍然不得要领,听朋友建议从网上找了个实站项目跟着撸了一遍代码,感悟比单纯上课多得多. 这个项目主要是复刻[幸福西饼]的主站和产品列表页,纯静态页面, ...
静态页面制作—Magnet
利用html+css进行制作静态网页制作,熟悉项目制作流程,建立起编写代码习惯. 一.项目分析 1.以下为静态网页的效果图,此文章目的利用html+css完成效果图: 2.此页面为三栏式结构,div+ ...
微享商盟系统功能与小程序开发方案（静态页面制作）
在平时开发程序的过程中,自己经常会写一些控制台小程序进行测试某个功能,事后我们会寻找这些小程序, 如果不仔细管理,经常会找不到. 由于每个控制台小程序都有自己独立的 Main方法,所以我们不能把他们都 ...
用phpcms如何将静态页面制作成企业网站（中）
上篇博客中讲到了该修改网页的中间部分中间的内容是这样的,有标题和内容,里面的内容被代码替代,运行起来就这样的里面的内容就可以在后台管理那里添加再来看代码部分 <div class=&quo ...
用phpcms如何将静态页面制作成企业网站（下）
上篇讲到了子页部分这样的有分页选择列表项的代码部分最后输出变量pages就可以了看一下运行的效果点击下一页再来改一下子页显示的样式点击人才将会出来的一个子页面路径要统一再来更改后台 ...
用phpcms如何将静态页面制作成企业网站（上）
首先,先要准备好这个静态网页的源文件,如图 bs里面是一些css和js的文件,img则是放图片的,文件中的index是网页的首页运行一下,看看是这样的然后打开phpcms文件,上篇博客中有提到, ...
HTMLCSS仿京东详情页静态页面制作总结
目录 1.页面效果 2.页面分析 3.页面制作 (1)产品介绍模块编辑 (2)产品细节模块编辑 1.页面效果接上面 2.页面分析头部导航栏和底部栏跟前面的大相径庭,这里就不再总结了. 详情页的 ...
php静态页面制作,ps制作静态的html页面
这篇教程是分享ps如何制作静态的html页面方法,教程制作出来的效果还是挺不错的,难度不是很大,喜欢的朋友快快来学习吧 ps是一个强大的修图软件,那你知道其实ps也可以制作html页面吗.小编将告诉你 ...
临摹中国慕课静态网页第二周周记（CSS3+JS）
临摹中国慕课静态网页第二周周记(CSS3+JS) 第二周这周主要是对细节,轮播图,下拉菜单等地完善和JS的学习学习内容 (1)CSS word-break 属性属性规定自动换行的处理方法. 语法 ...

慕课静态页面制作周记

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

第一周周记

3.13日记

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

解决方案：

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

解决方案

新学知识：

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

文字不换行自动省略

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

鼠标样式变化

3.14日记

新学知识：

3.15日记

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

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

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

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

3.16日记

新学内容：

3.17日记

3.18日记

3.19日记

3.20日记

3.21日记

3.22日记：

慕课静态页面制作周记相关推荐

最新文章

热门文章