Web前端基础精品入门(HTML+CSS+JavaScript+JS)[爱前端]听课笔记(1):网页中的logo的制作

前边课程没有仔细记录

css 学习笔记

index.html如下:

网页显示

但是我们不需要在网页中显示文字,用如下式样

文字不见,但是搜索引擎还能找到文字

目前高度没有居中,如果直接在上边样式表中加margin-top,试样表会出问题

粉色的盒子没有和父亲的距离,反而其父亲的位置出现问题原因是:

margin是兄弟间的边距,儿子原则上不能用margin去”踹”父亲,只能用父亲的padding确定儿子的位置

此时粉盒子上方的白色区域是logo的padding

现在红色标签不是超链接,对调h1和a标签的层级关系

粉色盒子为超链接

如果在外置css文件使用背景,必须从css文件出发找到图片,而不是html文件出发,

另之,之前h1标签的背景色是为了设计方便,加上图片后,要去掉,否是会盖住图片

此时logo添加好

目前html文件和css文件如下:

index.html

index.css

最后效果:

补充项目的目录结构

Original: https://www.cnblogs.com/jilingxf/p/16181275.html
Author: jilingxf
Title: Web前端基础精品入门(HTML+CSS+JavaScript+JS)[爱前端]听课笔记(1):网页中的logo的制作

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/603684/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球