Question

我是代码新手，我正在慢慢学习使用W3schools但我仍然需要帮助而且并不完全理解某些事情。

<html>
<body style="background-color:#D2563C;">
<a href="">
<img src="C:\Users\Burke\Desktop\hillbilly 
 \Pictures\bert.png" alt="HTML tutorial" 
 style="width:725px;height:90px;">
</a>
 <style>

a:link, a:visited #tabs{
    box-align: center;
    border-style: solid;
    border-color: white;
    border-width: 1px;
    background-color: #057A8C;
    color: white;
    padding: 10px 31px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    list-style-type:none
}


a:hover, a:active #tabs{
     background-color: white;
     color: #057A8C
}
</style>
</head>
<body>



<div class="center">
<a href="\Desktop\bob\cool.html" 
 target="_blank">Home</a>
<a href="\Desktop\bob\Contact Us.html" 
target="_blank">Contact Us</a>
<a href="Desktop\bob\Printing.html" target="_blank">Printing</a>
<a href="Desktop\bob\Technology.html" 
target="_blank">Technology</a>
<a href="Desktop\bob\Printership.html" 
target="_blank">Printership</a>
</div>

<script type="text/javascript" 
src="https://platform.linkedin.com/badges/js/profile.js" async defer>
</script>


<div class="LI-profile-badge"  data-version="v1" data-size="medium" data-
locale="en_US" data-type="vertical" data-theme="dark" data-
vanity="sullivanstrong"><a class="LI-simple-link" 
href='https://www.linkedin.com/in/sullivanstrong?trk=profile-
badge'>James T kirk</a></div>





</body>
</html>

这是我的代码

this

点击我如何查看图片

Answer 1

您正在将样式应用于元素本身 - 这意味着将始终应用样式。

有几种方法可以解决这个问题，但最好的方法是使用＆＃34;类＆＃34;。

可以将类添加到任何元素中。语法是：

<a href="/example" class="example-class test">Example Link</a>

＆＃34;级＆＃34;作为＆＃34;属性＆＃34;添加到元素中。使用空格分割类。上面的例子将有2个单独的类。＆＃34;例如级＆＃34;和＆＃34;测试＆＃34;。

然后，您可以使用类将样式直接应用于元素。课程前面带有＆＃34;。＆＃34; （ID＆＃39;是用＃

进行的

＆＃13;

.example-class {
  /* styling here */
}

＆＃13;

上面添加的任何样式都只会应用于该类。您在横幅上获得蓝色边框的原因是因为您正在将样式直接应用于元素，因此所有＆＃34; a＆＃34;元素将附加样式。

只是补充一点 - 您发布的代码存在一些基本问题。我建议阅读HTML和CSS的一些基础知识，并查看结构和格式。 Codeacademy是一个很好的起点： https://www.codecademy.com/ar/tracks/htmlcss

示例：

<a href="\Desktop\bob\jamespak.html" class="tab-class"
 target="_blank">Home</a>

.tab-class {
   /*styling*/
}

Answer 2

检查出来。该代码段显示不正确。但是在外面试试吧。它正在发挥作用。

https://ibb.co/cG74im

a:link,
a:visited #tabs {
  box-align: center;
  border-style: solid;
  border-color: white;
  border-width: 1px;
  background-color: #057A8C;
  color: white;
  padding: 10px 31px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  list-style-type: none
}

a.title {
  border: none;
  display:block !important;
  text-align:center;
}

.center {
  display: block;
  margin:0 auto;
  text-align:center;
  }


a:hover,
a:active #tabs {
  background-color: white;
  color: #057A8C
}

<html>
<body style="background-color:#D2563C;">
<a class='title' href="">
<img src="C:\Users\SullivanStrong\Desktop\Hazion 
 Tech\Pictures\HazionTechbanner.png" alt="HTML tutorial" 
 style="width:725px;height:90px;">
</a>
<div class="center">
<a href="sullivanstrong\Desktop\Hazion Tech\Hazion Tech.html" 
 target="_blank">Home</a>
<a href="sullivanstrong\Desktop\Hazion Tech\Contact Us.html" 
target="_blank">Contact Us</a>
<a href="Desktop\Hazion Tech\Printing.html" target="_blank">Printing</a>
<a href="Desktop\Hazion Tech\Technology.html" 
target="_blank">Technology</a>
<a href="Desktop\Hazion Tech\Printership.html" 
target="_blank">Printership</a>
</div>

<script type="text/javascript" 
src="https://platform.linkedin.com/badges/js/profile.js" async defer>
</script>


<div class="LI-profile-badge"  data-version="v1" data-size="medium" data-
locale="en_US" data-type="vertical" data-theme="dark" data-
vanity="sullivanstrong"><a class="LI-simple-link" 
href='https://www.linkedin.com/in/sullivanstrong?trk=profile-
badge'>Sullivan Strong</a></div>





</body>
</html>

如何保持CSS样式不影响我网站的其他部分？

2 个答案: