发表于: 2021-07-14 22:12:12

2 1032


今天完成的事情:

1.完成了任务六顶部和底部。

2.第二行所在地的一部分

昨天已经附上底部,今天附上底部:

明天计划的事情

1.继续做任务六,由于第二行字体和三角一直捆绑,设置margin-right字体和三角一起移动,继续优化。

2.明天争取把做下拉线和内容的部分做好。

遇到的问题:

  • first:

由于今天写的代码需要用到行内块状元素知识,一直搞不懂,最后通过百度搜索:

一,行内元素与块级元素的区别:

1.行内元素与块级元素直观上的区别二、行内元素与块级元素的三个区别

    行内元素会在一条直线上排列(默认宽度只与内容有关),都是同一行的,水平方向排列。

    块级元素各占据一行(默认宽度是它本身父容器的100%(和父元素的宽度一致),与内容无关),垂直方向排列。块级元素从新行开始,结束接着一个断行。

2.块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素,只能包含文本或者其它行内元素。

3.行内元素与块级元素属性的不同,主要是盒模型属性上:行内元素设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效

二、行内元素和块级元素转换

        display:block; (字面意思表现形式设为块级元素)

       display:inline; (字面意思表现形式设为行内元素)

三、inline-block

inline-block 的元素(如input、img)既具有 block 元素可以设置宽高的特性,同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性,比如 inline-block 元素也可以设置 vertical-align(因为这个垂直对齐属性只对设置了inline-block的元素有效) 属性。
HTML 中的换行符、空格符、制表符等合并为空白符,字体大小不为 0 的情况下,空白符自然占据一定的宽度,使用inline-block 会产生元素间的空隙。

  • second :

准备做第二行菜单的时候,师兄告诉我三角形可以通过css制作,最后通过百度搜索,学会了这个技能,但是不是很熟练,以后多看多练,效果如下:

但是下拉三角位置不对,准备明天学习。
收获:

1.通过今天的学习,学到了行内元素,块状元素,行内块状元素的区别。

2.知道了如何用css制作三角形。


返回列表 返回列表
评论

    分享到