小白边学边联系前端笔记

练习笔记 专栏收录该内容
2 篇文章 0 订阅

小白边学边练习前端笔记

Q1:练习简单布局时,div中的列表li不能和父元素对齐。
A1:是因为没删除默认margin和padding
*{
margin:0;
padding:0;
}
仿b站首页笔记:
这是整体布局:
在这里插入图片描述
Q1:字体目标无法显示,整个主页的字体图标都用文字代替了。。。不知道为啥不显示,用的icomoon。
在这里插入图片描述

Q2:单行文字溢出省略。

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

Q3:/ 图片变圆直接在img标签上加borderradius /
Q4:/ 同一个父元素的多个绝对定位子元素按照html顺序,先写的在下面 /**
这导致了我hover之后显示的盒子被之后的盒子压住了。
解决办法:z-index。
在这里插入图片描述
Q5:写完这个live块,发现父盒子没有被子盒子撑开高度,父盒子标准子盒子浮动。
A5:这是典型的浮动造成的问题,我这里直接给父盒子设定高度来解决问题。
这种情况下的浮动还会有这些问题:

1、背景不能显示 父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开 父级边框不能随内容而被撑开。
3、margin padding设置值不能正确显示

解决办法:

  • 直接给父盒子设定高度。
  • 为父级再加上一个子盒子,使用clear:left/right/both; 来清除浮动。

在这里插入图片描述

  • 为父级盒子定义 overflow:hidden 的css代码。
  • 父级+:after伪元素。
  • 父级+:before :after 双伪元素。

Q6:hover之后显示蓝色border会撑大盒子,导致位置变化,没解决。
A6:给原来的盒子加上透明边框,hover后直接换颜色。

在这里插入图片描述
Q7:aside侧边栏的定位不会,拉倒某个地方开始定位,应该使用JS来做,我这里直接绝对定位了。
学完JS后做完了,使用Dom,window.scroll(x,y)和ele.scrollTop,到某点fixed定位,然后点击也可返回顶部。
Q8:这是是一个元素的显示hover,利用大盒子包起来,子元素各自设置,大盒子无设置。
本来以为hover的时候会作用于整个大盒子,但是发现没显示时候的盒子不会被hover。
这是display的问题,可以理解为未显示的盒子相当于没有。

<div class="tougao">
                <a href="#" class="pinkbtn">投稿</a>
                <div class="tougao_hover">
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 打赏
    打赏
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页

打赏作者

qq_40140755

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值