欢迎访问覃师宁博客!
帝国cms使用教程手册

覃师宁博客 覃师宁博客

qinshining.com

当前位置:覃师宁博客 > 网页制作

网站h1标签嵌套img图片使用float:left下沉解决办法

来源:qinshining.com 编辑:覃师宁 时间:2020-12-17

在网站头部页面设计中,我们通常会把网站logo图片嵌套在h1标签中,然后设置float:left左浮动,但是h1下设置左浮动会导致图片下沉,那么我们如何解决呢?

html代码:

  • <h1 class="logo"><a href=""><img src="images/logo.png" target="_blank"></h1>

css代码:

  • .logo{float:left;}

这样设置的结果就是图片下沉,这是因为没有进行h1样式重置的结果,可以针对h1重置样式就可以完美解决

  • h1{
  •     border: 0;
  •     margin: 0;
  •     outline: 0;
  •     padding: 0;
  •     vertical-align: baseline;
  • }

如果对css样式重置还不是很了解的,可查看文章:什么是css样式重置,css重置样式的目的是什么

文章评论

人参与,共有条评论

为了响应国家网信办《网站要对跟帖评论审核管理规定》,网站评论将审核后发表