1

我已经建立了一个页面，并且我有一个用于团队徽标的 html 代码，一旦您将鼠标悬停在它们上，就会在其中包含文本。我无法理解的是，为什么当两个图像在页面上有两个不同的链接用于 2 个不同的图像时，它们是相同的。为什么图像不在同一行。一个在左边，一个在中间。最后，我如何在其中添加一个链接。下面是网页和代码。

单击您要管理的团队并继续您的赞助协议！


.pic{ 宽度：350px; 高度：220px；背景：网址（http://oi67.tinypic.com/8xj85v.jpg）无重复；} .text{ 宽度：290px; 高度：160px；背景：#303030; 不透明度：0；} .pic:hover .text { 不透明度:0.8; 文本对齐：对齐；颜色：#fff; 字体大小：10.5px；字体粗细：500；font-family:"Arial", Times, serif; 填充：30px；} Scuderia Ferrari 是目前一级方程式中最成功和最古老的参赛车队。他们的总部设在意大利马拉内罗。

该团队成立于 1929 年，在运营阿尔法罗密欧之后于 1947 年开始制造自己的汽车。他们是 1950 年首届世界锦标赛的一部分。

法拉利在 1952 年、1953 年、1956 年、1958 年、1961 年、1964 年、1975 年、1977 年、1979 年、2000 年、2001 年、2002 年、2003 年、2004 年和 2007 年赢得了 15 次车手冠军。 1958 年成立）共 16 次，分别在 1961 年、1964 年、1975 年、1976 年、1977 年、1979 年、1982 年、1983 年、1999 年、2000 年、2001 年、2002 年、2003 年、2004 年、2007 年和 2008 年。


.pic{ 宽度：350px; 高度：220px；背景：网址（http://oi67.tinypic.com/2vjtz5u.jpg）无重复；} .text{ 宽度：290px; 高度：160px；背景：#303030; 不透明度：0；} .pic:hover .text { 不透明度:0.8; 文本对齐：对齐；颜色：#fff; 字体大小：10.5px；字体粗细：500；font-family:"Arial", Times, serif; 填充：30px；} Mercedes AMG Petronas 一级方程式车队，前身为 Mercedes GP Petronas F1 Team，是一支一级方程式赛车队，总部位于英国布拉克利，使用德国执照。梅赛德斯参加了战前的欧洲锦标赛，并在 1954 年和 1955 年期间参加过一级方程式锦标赛。

梅赛德斯-奔驰在购买了布朗 GP 车队的少数股权 (45.1%) 后，在 2010 赛季重返一级方程式赛车，并在涡轮增压时代凭借卓越的包装成为了多个承包商的赢家。

4

1 回答 1

0

1）相同的图像：

主要问题是您的 CSS 缺乏特异性。 .pic定义了两次——首先是在<style>最外层<left>标签内的内联标签中，然后是.picDIV；子标签中的第二个，<center>后面也跟着一个内联<style>标签。如果您检查.picDIV(s)，您会注意到第二个 CSS.pic声明踩在前面的声明之上。 在此处输入图像描述

要解决这个问题：

  1. 将所有 CSS 移动到 HTML<head>标记中加载的一个文件中。
  2. 添加特异性；给你几个选择：

A）在标签名中添加特异性

left > .pic {
    background-image: url(A);
}

center > .pic {
    background-image: url(B);
}

B）使用额外的类名添加特异性 .pic.first { background-image: url(A); }

.pic.second {
    background-image: url(A);
}

2）不在同一行：

要解决这个问题：

  1. 和标签是块级元素 - 因此您可以在 CSS 中将它们定义<left>为<center>left, center { display: inline-block; }
  2. 去掉<br>它们之间的

3）添加链接：

要解决这个问题：

只需将每组.img和.textDIV 包装在一个<a href= ...> ... </a>锚标记中

于 2016-08-03T00:03:13.563 回答