0

这是我的 .css 文件。(请记住,我是学习网页设计 1 的二年级 IT 学生!):

<style>

h1 {background: #48a627;} 
h1 {text-decoration:none;}
h1 {font-family: Ariel, Halavetica, sans-serif;}
h1 {color: white;}
h1 {font-size: 50px;}
h1 {text-align: center;}

body {background-color:#48a627} 
body {text-decoration:none;}
body {color: black}
body {font-family: font-family: Ariel, Halavetica, sans-serif}
body {font-style: normal}
body {font-size: 20px;}

p {background-color: #48a627}
p {text-decoration:none;}
p {color: #181818}
p {font-family: Ariel, Halavetica, sans-serif}

a:link {color: #FFFFFF; text-decoration: none;}
a:visited {color: white; text-decoration: none;}
a:hover {color: #FF0000; text-decoration: overline underline;}
a:active {background-color:#0d82df;}

ul 
{
 list-style-image:url('http://icons.iconseeker.com/png/32/vista-style-sport/golf-ball-   1.png');
}

</style>

这是我主页的 .css 文件的作业链接!我没有包含其余代码,因为我不认为这是问题所在。我遇到的另一个问题是,当鼠标悬停在图像上时,我的图像应该在它们周围显示一个红色边框。这仅适用于 Internet Explorer,不适用于指定的其他 2 个 Web 浏览器。我尝试更改 DOCTYPE 声明,但没有成功。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>
<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\InternetProgramming 2\Assignments\Assignment 2\Assignment 2.css">                       
</head>

谢谢您的帮助。请不要推荐使用<div>or 脚本或任何其他东西,因为作业规定我们不允许使用它。我的知识不是很丰富,请耐心等待!谢谢。

这是我的html代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<title>Home Page</title>

<head>

<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\Internet Programming 2\Assignments\Assignment 2\Assignment 2.css">
   </head>
<table align = center>
<tr>
<td colspan = "2"><img src = "http://logopond.com/logos/6f9f36e05089d690709ec2ac837ada82.png" width="400" height="344" alt = ""></td>
<td><img src = "http://t3.gstatic.com/images?q=tbn:ANd9GcQiNOQS9CNd9bKW92ZQDw7mh1Qjz-_XUcKRKRlsqB2ln0SyaMMg" width = "400" height = "344" alt = ""</td>
</tr>

<tr>
<td colspan = "3" align = center><h1> Hole In One Club </h1></td> 
</tr>
</table>

<body>
<table align = center>
<tr rowspan = "4">
<td >

    <p>Congratulations on your hole-in-one and welcome to the world of golf’s most prestigious achievers! Do you know that only 4% of golfers ever have the satisfaction of a hole-in-one?</p>

    <p>This is the official page for the hole in one club.</p>

      <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRzV8i9tkZv04EgGB4K2MLtVQgKl7B_cLtIanbawul0Dp_iQ0TXEw" width="250" height="200" align = "left" alt=""/>

    <p>We welcome all members and visitors to our website. We are a type of insureance club that offers golfers all around South Africa the oppertunity to "obtain hole in one insurance" 
   for a yearly fee of only <strong>R150</strong></p>

    <p>The odds of a golfer achieving a hole-in-one on any specific hole on any given day are 43 000:1. That makes a hole-in-one golfer a very special and unique person!</p>
 <img src = "http://www.framingedge.ca/images/sports/hole-in-one.jpg" width = "400" height = "200" align = "right"/>

    <p>The Hole In One Club is widely regarded as the most successful and most active society of its kind in South Africa.</p>

   <p>Launched in 2013, the Society has grown steadily over the past year and has 
   rewarded a staggering 500 South African golfers for their unique achievement during this year.</p>

    <p>We offer you with the prize of YOUR choice for every hole in one that you hit! To see all the prizes available please click on the link located to the right of the page.   </p>

</td>

<td valign = top>
    <ul>
        <li><a href = "C:\Users\THETANK\Desktop\page gallery.html"  ><strong>Prize's Gallery</strong></a></li>
        <li><a href = ><strong>Contact Us</strong></a></li>
    </ul>
 </td>

<tr align = center>
<td colspan = "2">
<br>
<br>
    <font size = "6"><strong>Sponsorships:</strong>
</td>
</tr>


<tr align = center>
<td colspan = "2">
    <a href = "http://www.nike.com/us/en_us/c/golf"><img src = "http://www.golf-isc.co.uk/wp-content/uploads/2013/01/9abd755b_nikegolf_logo_2.jpg" width = "200" height = "100"/></a>
    <a href = "http://www.ping.com/"><img src = "http://www.golfpitstop.com.au/Images/Brands/ping.jpg" width = "200" height = "100"/></a>
    <a href = "http://taylormadegolf.com/"><img src = "http://sosgolf.co.za/wp-content/uploads/2013/04/taylormade.jpg" width = "200" height = "100"/></a>
</td>
</tr>


<tr>
<td align = center colspan = "2"><a href = "s212204599@live.nmmu.ac.za" ><strong>  <italics>E-Mail: Andre Smith</italics></strong></a></td>
</tr>
</body>

</table>

</html>
4

4 回答 4

1

问题就在这里——

<link rel ="stylesheet" type = "text/css" href = "D:\NMMU\Second Year\InternetProgramming 2\Assignments\Assignment 2\Assignment 2.css">

只使用这个 -

<link rel ="stylesheet" type = "text/css" href = "Assignment 2.css">

并确保Assignment 2.css您的 html 文件位于同一目录中

于 2013-04-30T09:15:58.190 回答
0

样式链接的 Href 属性应该与您的页面相关。如果您有这样的层次结构:

folder0-> page.html folder0-> folder1-> style.css folder0-> folder2-> script.js

您的样式链接:<link rel ="stylesheet" type = "text/css" href = "folder1/style.css">

你的大概是这样的:<link rel ="stylesheet" type = "text/css" href = "Assignment 2.css">

这是jsfiddle,如果您可以正确导入样式,它就可以工作。

于 2013-04-30T09:12:00.637 回答
0

您的 CSS 字体名称不正确,并且您指定了两次“font-family”:

font-family: font-family: Ariel, Halavetica, sans-serif;

应该

font-family: arial, helvetica, sans-serif;

另一件事是字体继承,因此您只需要在根元素上设置字体系列,在这种情况下是您的“body”标签。

您可能会发现 Internet Explorer 以其无限的智慧忽略了字体系列选择器的双重规范。

最安全的做法是确保您的 CSS 以与您的元素在页面上出现的顺序相同的顺序排列,因此通常最好的做法是按以下顺序排列:

  1. HTML (html)
  2. 身体(身体)
  3. 段落 (p)
  4. 标题(h1、h2、h3 等)
  5. 锚点(a、a:hover 等)

然后,您可以使用类或选择器来覆盖 HTML 中的特定元素。

要让图像在 IE8、Chrome、FireFox 及更高版本中悬停时工作:

body { background-color: navy; color: white; }
a img { border: 1px solid transparent; }
a:hover img { border: 1px solid red; }

如图所示:http: //jsfiddle.net/khcb4/1/

我希望这有帮助!

于 2013-04-30T09:23:41.827 回答
0

你需要保持这样的形象

<ul>
    <li> <img src=""> </li>
    <li> <img src=""> </li>
</ul>

并为 img:hover 写 css

img:hover {
//display border
}
于 2013-04-30T09:17:35.090 回答