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/610253/

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

(0)

大家都在看

  • QString转char *

    故事背景:最近用到阿里云的OSS,里面用到了好多char *,但是我QT里面都是QString,我尝试用QString::fromstdstring(“”)…

    Linux 2023年6月13日
    0104
  • sql server的简单分页

    — 显示前条数据 select top(4) * from students; –pageSize: 每页显示的条数 –pageNow: 当前页…

    Linux 2023年6月7日
    0135
  • centos 7 安装KVM

    一、安装KVM 实验环境如下: 虚拟机版本:VMware 12.5.7虚拟机需要开启虚拟化,如下图: 系统版本:CentOS Linux release 7.5.1804 (Cor…

    Linux 2023年6月7日
    0109
  • JAVA设计模式-建造者模式

    JAVA设计模式-建造者模式 介绍 建造者模式是通过一步一步的步骤构建一个包含多个部件的对象,每个不同的对象都是具有相同的构建过程。适用于复杂对象的构建,用户不需要知道具体的构建细…

    Linux 2023年6月6日
    0114
  • macbook air 2019 安装win10单系统

    目前不考虑写的太详细了,如果有同学遇到问题了我再完善,主要是把遇到的坑讲下第一步,准备2个U盘(如果不嫌麻烦一个也可以)1.用大白菜或者老毛桃将其中一个做成启动盘2.在window…

    Linux 2023年6月14日
    0148
  • js中div显示和隐藏钮为什么页面总是跳一下到最上面

    中心动态 产权动态 财经聚焦 点击onclick事件 是因为的href属性,使用了#的缘故,你点击a的时候回到页面的开始,然后才在做click函数,你可以不使用href属性。但是这…

    Linux 2023年6月13日
    0120
  • 中土批量运维神器《ps1屠龙刀》 pk 西域批量运维圣器《ansible圣火令》

    据故老相传,运维界有句话:”脚林至尊,宝刀【ps1屠龙】,号令被控,莫敢不从”。 https://gitee.com/chuanjiao10/kasini3…

    Linux 2023年5月27日
    0140
  • Markdown基础语法

    Markdown语法 ## 欢迎使用Markdown编辑器 你好! 这是你第一次使用 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下M…

    Linux 2023年6月14日
    0117
  • 分布式锁

    非分布式下使用锁 利用版本号来检测数据是否发生变化,从而判断是否能进行更新 JAVA 使用比较交换机制-CAS(Compare And Swap)机制实现 i++非线程安全,使用原…

    Linux 2023年6月7日
    0107
  • 数据库备份数据脚本

    #!/bin/bash currentpath=dirname $0 if [ ${currentpath} == ‘.’ ];then currentpath=pwd fi ba…

    Linux 2023年6月8日
    097
  • 如何使用 systemctl 管理服务

    systemd是一个服务管理器,目前已经成为Linux发行版的新标准。它使管理服务器变得更加容易。了解并利用组成systemd的工具将有助于我们更好地理解它提供的便利性。 syst…

    Linux 2023年6月13日
    096
  • 关于ubuntu执行32位程序报错execvp():No such file or directory的解决方案

    一、前言 在ubuntu 执行一个程序时,居然报错 execvp():No such file or directory ,报错截图如下图所示: ls -al…

    Linux 2023年6月8日
    0136
  • podman对容器映像签名和分发

    熟悉podman 如何使用 Podman 对容器映像进行签名和分发 熟悉podman 此示例容器将运行一个非常基本的 httpd 服务器,该服务器仅为其索引页提供服务 [root@…

    Linux 2023年6月7日
    0105
  • 玩转redis-简单消息队列

    使用 go语言基于 redis写了一个简单的消息队列源码地址使用demo redis的 list 非常的灵活,可以从左边或者右边添加元素,当然也以从任意一头读取数据 添加数据和获取…

    Linux 2023年5月28日
    0115
  • Xshell+Xftp SSH隧道代理

    参考:https://blog.csdn.net/firetreesf/article/details/53287633 Original: https://www.cnblogs…

    Linux 2023年5月28日
    097
  • Python 中 map() zip() list() 函数的介绍

    map() map(function , iterable, ….) : 依次将函数function作用在可迭代的list上,并返回对应的函数返回值,组成新的list(…

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