发表于: 2021-05-13 23:01:54
1 1052
今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin)
1,多列布局中的全体布局,进行了学习
<div class="parent">
<div class="top">top</div>
<div class="middle">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</div>
.parent{display:flex;flex-direction:column;}
.top{height:100px;}
.bottom{height:50px;}
.middle{flex:1;display:flex;}
.left{width:200px;}
.right{flex:1;overflow:auto;}
2,对bootstrap进行了学习,会引用样式,并进行修改样式了
3,对响应式设计,进行了初步了解
【响应式设计】
响应式Web设计是网站制作使用的一个叠层样式表( CSS3media queries),结合流体网格适应各种布局,还可灵活使用图像。用户可跨越不同设备和浏览器的限制,访问相同内容,布局也利于阅读和浏览,只需细微的调整、平移或滚动。
【视口viewport】
<meta name="viewport" content="width=device-width, initial-scale=1.0">
【网格视图】
给人的感觉就是长长的纵列。
网格视图的特点就是比较突出图片,它主要适用于文字较少,主要展示图片的页面,还有就是层级比较明显的页面。
还有一个就是展示量大,不管在哪些屏幕下看到的内容都要比列表视图多得多。
* { box-sizing: border-box;}
【媒体查询】
媒体查询是向不同设备提供不同样式的一种不错方式,它为每种类型的用户提供了最佳的体验。
【响应式图像】
如果 width 属性设置为百分比,且高度设置为 "auto",则图像将进行响应来放大或缩小:
img { width: 100%; height: auto;}
【响应式视频】
如果 width 属性设置为100%,则视频播放器将响应并放大和缩小:
video {width: 100%;height: auto;}
4,对网格方面进行初步了解
【网格布局模块】
提供了带有行和列的基于网格的布局系统,它使网页设计变得更加容易,而无需使用浮动和定位。
网格布局由一个父元素以及一个或多个子元素组成。
display 属性设置为 grid 或 inline-grid 时,它就会成为网格容器。
【网格容器】
grid-template-columns 属性定义网格布局中的列数,并可定义每列的宽度。
grid-template-rows 属性定义每列的高度。
justify-content 属性用于在容器内对齐整个网格。
align-content 属性用于垂直对齐容器内的整个网格。
【网格项目】
grid-column 属性定义将项目放置在哪一列上。
grid-row 属性定义了将项目放置在哪一行。
grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性。
5,task8首页做了大半部分
明天计划的事情:(一定要写非常细致的内容)
1,计划复习今天学过的知识点
2,计划继续搞task8
3,计划优化完成了的task,让师兄满意
遇到的问题:(遇到什么困难,怎么解决的)
1,对于元素较多,不规律的布局,不知如何下手,明天学删格系统尝试解
2,细节方面很不到位,做完的任务,反复修改,效果总是差了点
3,代码不规范,这个问题存在较长时间,明天得好好请教师兄
4,白天状态很散乱,晚上能集中注意力做任务,真的是很奇怪。。。
收获:(通过今天的学习,学到了什么知识)
1,初步学会bootstrap
2,对响应式设计有初步了解
3,对网格方面有初步了解
评论