Html 如何在页面左下角添加3个图像_Html_Css

Html 如何在页面左下角添加3个图像

html css

Html 如何在页面左下角添加3个图像,html,css,Html,Css,我试图在页面左下角添加3张社交媒体图片，因此效果可能如下所示：以及它现在的样子（尽管设置了宽度和高度，我还是得到了3张非常大的图片）：我想知道我做错了什么。这3张图片位于社交文件夹中 Index.html <!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <title>DingDog</title> <link rel="s

我试图在页面左下角添加3张社交媒体图片，因此效果可能如下所示：

以及它现在的样子（尽管设置了宽度和高度，我还是得到了3张非常大的图片）：

我想知道我做错了什么。这3张图片位于社交文件夹中

Index.html

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <title>DingDog</title>
  <link rel="stylesheet" href="style.css" >
</head>

<body>
  <header>
    <div class="row">
      <ul id ="logo"> <img src="dingdog-logo.png"> </ul>

      <ul class="main-nav">
        <li ><a href="">NEWS FEED</a></li>
        <li><a href="">ABOUT DINGDOG</a></li>
        <li><a href="">AUTHORS</a></li>
        <li><a href="">CONTACT</a></li>
        <li id ="sign"><a href="">SIGN IN</a></li>
      </ul>

  </header>
  <div class="sociale">
    <img src="social/instagramOficial.png" />
    <img src="social/twitter.png" />
    <img src="social/facebook.png" />
  </div>
  </body>
</html>

您需要使社交区块的子区块内联

*
{
保证金：0；
填充：0；
}
标题
{
背景：949E9B0%0%无重复填充框；
宽度：自动；
高度：78px；
}
身体{
背景图片：url（“dog.jpg”）；
背景色：#中交；
}
.主导航
{
浮动：对；
颜色：#000000；
利润上限：35px；
右边距：0px；
}
主导航李先生
{
显示：内联块；
}
.主导航李a
{
颜色：#000000；
文字装饰：无；
字体：粗体20px/12px Arial；
填充物：5px；
}
#标志
{
边缘顶部：5px；
浮动：左；
}
#签
{
背景色：#DCDFDE；
填充：30px 15px 23px 15px；
边框顶部：3件纯黑；
底部边框：3倍纯黑；
左边框：3倍纯黑；
右边框：3倍纯黑；
}
sociale先生
{
显示：块；
}
.social>img
{
显示：内联块；
高度：20px；
宽度：20px；
}


小狗

我为什么需要继承？为什么它不像我那样工作？

*
{
  margin: 0;
  padding: 0;
}

header
{
  background: #949e9b 0% 0% no-repeat padding-box;
  width: auto;
  height: 78px;
}

body {
  background-image: url("dog.jpg");
  background-color: #cccccc;
}

.main-nav
{
  float: right;
  color: #000000;
  margin-top: 35px;
  margin-right: 0px;
}

.main-nav li
{
  display: inline-block;
}

.main-nav li a
{
  color: #000000;
  text-decoration: none;
  font: Bold 20px/12px Arial;
  padding: 5px;
}

#logo
{
  margin-top: 5px;
  float: left;
}

#sign a
{
  background-color: #DCDFDE;
  padding: 30px 15px 23px 15px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
  border-left: 3px solid black;
  border-right: 3px solid black;
}

.sociale
{
  display:inline-block;
  height: 20px;
  width: 20px;
}