前端入门篇（三十）logo导航栏问题记录(1)

.header-logo和.test是嵌套关系，中间要写空格

a与.test不是嵌套关系，所以不能写成：

.header-logo a .test，

而是：.header-logo a.test

或者：.header-logo .test

3.实现：有加载css时不显示图片背后的文字，无css时显示文字

在背景图片上加跳转链接时，有时遇到网络不佳，不能显示图片，此时为了确保用户依然可以跳转页面，会备份写文字，让用户点击文字处跳转，如下：

用户点击“官网链接”完成页面跳转

但是如果只是简单写在链接对应位置，效果很丑，如：

html文件：

官网链接

效果：

解决办法：设置超大的负缩进

html文件不变

css文件：

.header-logo a.lr{

text-align: center;

text-indent: -99992em;

}

效果：

有加载到css文件时看不到文字：

没有加载到css文件时看得到文字：

4.只要加了浮动，都要记得清除，可以给要清除浮动的标签都命名为clearfix，然后只要写一次清除浮动的代码即可

html文件：

登录|

注册|

消息通知

css文件：

.clearfix::before,.clearfix::after {

content: “”;

display: table;

}

.clearfix::after {

clear:both;

}

5.如果子标签设置了浮动，父标签要清除浮动影响

此处使用after伪对象清除浮动

html文件：

小米商城|

MIUI|

IOT|

云服务|

金融|

有品|

小爱开发平台|

政企服务

购物车（0）

登录|

注册|

消息通知

最后

面试题千万不要死记，一定要自己理解，用自己的方式表达出来，在这里预祝各位成功拿下自己心仪的offer。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

解视频】](https://bbs.csdn.net/topics/618166371)**

[外链图片转存中…(img-7oQiNUYE-1714562335597)]

[外链图片转存中…(img-9i60pAQQ-1714562335598)]

[外链图片转存中…(img-T4pkfWVu-1714562335599)]

[外链图片转存中…(img-feI6URFw-1714562335599)]