Fatal编程技术网
  • html/
  • Html I'；我在css方面遇到了麻烦，即'；它与我不知道的元素发生了冲突'；我不想这样

Html I'；我在css方面遇到了麻烦，即'；它与我不知道的元素发生了冲突'；我不想这样

html css

Html I'；我在css方面遇到了麻烦，即'；它与我不知道的元素发生了冲突'；我不想这样,html,css,Html,Css,这是我的网站。 css使锚元素具有特定的css属性，我只希望它像一个导航栏。只要登录按钮，当我添加菜单时。但现在你可以看到右上角图片后面的绿色。它不应该在每一个锚点后面，我只想在某些锚点上使用它，我不能或不知道如何只在带有a:visted和a:hover之类的菜单上使用内联css。解决办法是什么？我只需要让一些css只对特定的元素或元素起作用 我记下了正在交互的css的开始和结束位置 以下是我的消息来源： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

这是我的网站。

css使锚元素具有特定的css属性，我只希望它像一个导航栏。只要登录按钮，当我添加菜单时。但现在你可以看到右上角图片后面的绿色。它不应该在每一个锚点后面，我只想在某些锚点上使用它，我不能或不知道如何只在带有a:visted和a:hover之类的菜单上使用内联css。解决办法是什么？我只需要让一些css只对特定的元素或元素起作用

我记下了正在交互的css的开始和结束位置

以下是我的消息来源：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}

ul {                  <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}

li {
float: left;
}

a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;


a:hover, a:active {
background-color: #7A991A;
}                         <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">

function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;

var unArray = ["admin"];
var pwArray = ["password"];

for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}

if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}

}

</script>
</head>
<body>

<ul background="/victoria/cutiepie2.jpg" hidden>
<li><a href="/scripts/call.php" id="blue">Call</a></li>
<li><a href="/scripts/text.html" id="blue">Text</a></li>
<li><a href="/menu/home.html" id="blue">Home</a></li>
<li><a href="/menu/news.html" id="blue">News</a></li>
<li><a href="/menu/media.html" id="blue">Media</a></li>
<li><a href="/menu/downloads.html" id="blue">Downloads</a></li>
<li><a href="/menu/forum.html" id="blue">Forum</a></li>
</ul>

<a href="/index.html"><img src="/victoria/logo.jpg" width="250" height="75" class="logo"></a>

<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text-        decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>

<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>

<p id="p">Username: <input type="text" name="username">

Password: <input type="password" name="pword">

<input type="button" value="log in" onclick= "validate()"></p>

</form>

<center><h1 style="color: #003300;">GTA Resources</h1></center>

<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg" 

width="1000" height="500"></center>

<br><br>

<p id="para">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it.  From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all 
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless 
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics 
on anything Gta related. And just have a good time. Enjoi!!:)
</p>

<center><a href="/victoria/click_here_for_help.html">Click here for help</a></center>

<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>

</body>
<!--MTD(c) 2014-->
</html>


GTA资源
html
{
背景色：#003300；
右：11%；
左：11%；
}
身体
{
背景色：黑色；
}
#p
{
颜色：白色；
}
#帕拉
{
颜色：白色；
右：2%；
左：2%；
}
A.
{
颜色：#003300；
}
标志
{
垫面：4px；
左侧填充：4px；
}
ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
}
李{
浮动：左；
}
a:链接，a:已访问{
显示：块；
宽度：120px；
字体大小：粗体；
颜色：#FFFFFF；
背景色：#98bf21；
文本对齐：居中；
填充：4px；
文字装饰：无；
文本转换：大写；
a:悬停，a:活动{
背景色：#7A991A；
}                         
函数验证（）{
var un=document.myform.username.value；
var pw=document.myform.pword.value；
var-valid=false；
var unArray=[“admin”]；
var pwArray=[“密码”]；

对于（var i=0；i来说，实现这一点的干净方法是使用CSS类。在HTML中，向CSS元素添加一个应该具有绿色背景的类

HTML:

注意：类名，就像变量名可以是任何东西一样，甚至在类名中允许使用“连字符”。我给了“悬停时为绿色”，你可以随意调用它。
发现了这个非常简单的教程，可以帮助您学习课程：


希望有帮助。如果你有问题，请告诉我


一个建议是：下次尽量让你的问题更一般化。
你用绿色作为锚的背景，把图像放在锚的内部，然后你就会看到你的结果

试试这个


html:
<a href="/index.html">
  <img width="250" height="75" class="logo" src="/victoria/logo.jpg">
  <span></span>
</a>



你的网站现在关闭了吗？没有加载。你能在你的问题中提供实际的代码吗？是的，我试过了，但它要求我格式化，所以我做了，但它重新加载了我的文本并使我很难添加它。是的，我是这个网站的新手，谢谢。我以为它会是类。我只是不知道如何放置a:悬停和a:已访问。李那么，我应该把它放在哪里呢？我不会把它放在悬停时的绿色类下面，对吗？只要添加class=“悬停时的绿色”正如我在回答中所显示的，对于每个你需要绿色背景的a链接。然后，在你的CSS中将所有干扰a:hover和a:visited更改为a.green-on-hover:hover和a.green-on-hover:visited.Omg Rakesh Gopal。谢谢。我没有注意到你说的是“a.green-on-hover:hover”.我没有完全读过。这正是我需要的。我以为它会是一个类或id…但这正是我想说的，但我甚至不知道我需要什么。我不知道你可以将类应用于a:悬停的东西，我不知道它叫什么。它叫什么？但你回答了我的问题。多亏了另一个人哦，那也有帮助。我早该知道。--

a.green-on-hover:hover {
    background-color : green;
}



html:
<a href="/index.html">
  <img width="250" height="75" class="logo" src="/victoria/logo.jpg">
  <span></span>
</a>



a,a:link, a:visited {
    color: #ffffff;
    position:relative;
    display: block;
    font-weight: bold;
    padding: 4px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    width: 120px;
}
a span{
  position:absolute;
  width:100%;
  height:100%;
  background-color:#98bf21;
  z-index:2;
  left:0;
  top:0;
}
a img{
 position:relative;
 z-index:0;
}