Question

我是HTML5＆amp;自HTML开始以来的CSS和New

无论如何我正在研究如何在HTML5和HTML中编码。目前CSS3 ..但已遇到障碍......

我想在页脚背景左侧获取我的Copy权限信息，并在我的页脚背景右侧显示我的浏览器图标....我一直在玩这个问题9个小时我不能给我甚至尝试了一些我在这里找不到的建议......

如果您想查看实际页面，可以转到 http://cowboy0629.ddns.net/test

＆＃13;

.mainFooter {
  width: 97%;
  float: left;
  height: 40px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  background-color: #141476;
  margin: 2% 1.5% 2% 1.5%;
}
.footerIcons img.chrome {
  width: auto;
  height: 20px;
}
.footerIcons img.firefox {
  width: auto;
  height: 23px;
}
.footerIcons img.safari {
  width: auto;
  height: 23px;
}
.footerIcons { 
  float: right;
  height: 9px;
}
.footerIcons ul {
  float: right;
  padding: 0;
  margin: 0 auto;
}
.footerIcons li {
  float: right;
  list-style:none;
  margin-left:5px;
}
.footerIcons span p {
  height: 20px;
  float: left;
  color: #3399FF;
  width: 97%;
  margin: 9px;
}

＆＃13;

<footer class="mainFooter">
  <div class="footerIcons">
    <span>
    <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com">cowboyDesigns.com</a></p>
    </span>

    <ul>			
      <li>
        <img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
      </li>
      <li>
        <img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
      </li>
      <li>
        <img class="safari" src="images/icons/black-safari-icon2.png" alt="">
      </li>
    </ul>
  </div>	
</footer>

＆＃13;

Answer 1

您可以在<ul>元素上使用相对定位。

.footerIcons ul {
    position: relative;
    top: -47px;
}

这可能是一个草率的解决方案，而不是像将容器大小设置为30％并获得div对齐那样。

Answer 2

我可以通过多种方式来实现这一目标。

这有效：

[root@ts ~]# kubectl apply -f https://git.io/weave-kube
error validating "https://git.io/weave-kube": error validating data: [unexpected type: object, unexpected type: object, unexpected type: object, unexpected type: object]; if you choose to ignore these errors, turn validation off with --validate=false

它可以在垂直对齐方面使用一点点爱，但它有效。

我不会在导航栏中设置链接到<footer class="mainFooter"> <ul> <li style="float:left"><a href="http://cowboy0629.ddns.net" title="cowboydesign.com">Copyright © 2017 cowboyDesigns.com</a></li> <li style="float:right"><img class="chrome" src="images/icons/black-chrome-icon.png" alt=""></li> <li style="float:right"><img class="firefox" src="images/icons/black-firefox-icon.png" alt=""></li> <li style="float:right"><img class="safari" src="images/icons/black-safari-icon2.png" alt=""></li> </ul> </footer>，因为它会让它们更难点击（因为它们没有填满它们周围的块）...我也使用实用程序CSS浮点类，而不是内联样式。

浮动和定位是CSS中最难学的东西之一，但有一种简单快捷的方法可以解决它。

查看此video on using Chrome DevTools as an IDE

您不仅可以实时查看更改，还可以将它们映射回源文件，以便保存更改。

或者你可以使用一个框架，为这样的事情提供解决方案。我是基金会的忠实粉丝，grid and alignment classes非常适合这个问题。

看来你正在为学校做这个，所以也许你不能使用框架，但你可以看看他们如何解决问题以及他们使用了什么代码。

Answer 3

上述解决方案将解决问题，但它们似乎更容易被黑客攻击， p和ul是块元素，默认情况下它们不会在同一行。 你需要用下面的CSS设置替换现有的CSS规则

.mainFooter p {
color: #3399FF;
display: inline-block;
margin: 9px;
}

.mainFooter ul {
display: inline-block;
float: right;
list-style: none;
margin: 0 auto;
}

.mainFooter img {
width: 30px;
height: 30px;
margin: 5px;
}

不需要为每个浏览器图标设置单独的规则，并使用相同宽度和高度的图标。

Answer 4

只要建立你所创造的东西，你就会有类似的东西：

＆＃13;

footer {
  width: 97%;
  height: 40px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  background-color: #141476;
  margin: 2% 1.5%;
}
footer p,
.footerIcons{
  line-height: 20px;
  margin: 9px;
}
footer p{
  float: left;
  color: #3399FF;
}
.footerIcons { 
  float: right;
}
.footerIcons img.firefox,
.footerIcons img.safari,
.footerIcons img.chrome{
  width: auto;
  height: 23px;
}

＆＃13;

<footer>
  <p>Copyright &copy; 2017 <a href="http://cowboy0629.ddns.net" title="cowboydesign.com" target="_blank">cowboyDesigns.com</a></p>
  <div class="footerIcons">
    <img class="chrome" src="images/icons/black-chrome-icon.png" alt="">
    <img class="firefox" src="images/icons/black-firefox-icon.png" alt="">
    <img class="safari" src="images/icons/black-safari-icon2.png" alt="">
  </div>	
</footer>

＆＃13;

新手HTML5＆amp;查找一些图标的CSS3问题

4 个答案: