在我的上一个问题取得快速成功之后,我在验证时想出了另一个。
我得到'文件类型不允许'P'在这里; ....'错误。简而言之,我正在尝试在DIV中编写文本并使用
标签来分隔段落。经过一番搜索,我发现了这个问题。当<p>
在<font .....>
定义内时(因为这是内联中的块),它会出错。所以我尝试使用<h6>
标签代替(第57行)并在CSS中单独定义它,我认为它可以工作,因为它被称为块级元素。
理想情况下,我想要一种最初定义文本属性的方法,让它为所有段落打开等等。然后在最后关闭它。 - 而不是每次创建新的<p>
时都必须重新输入。
再次 - 非常感谢任何帮助.-关于我的布局以及如何改进的建议。
守则:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
}
a:link {
color: #000;
}
a:visited {
color: #666;
}
a:hover {
color: #F00;
}
</style>
<link href="CSS/dg.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="dgbackground"> </div>
<div id="textwrapper">
<div id="spec">
<h4>Specification</h4>
<div id="specAQA"><a href="http://filestore.aqa.org.uk/subjects/AQA-9030-W-SP-14.PDF" target="_blank"><img src="images/gcse images/AQA_logo_RGB.jpg" width="150" height="50" alt="aqa link"/></a></div>
<div id="specDOC"><a href="documents/gcse/dg spec.docx"><img src="images/DOC.png" width="100%" height="100%" alt="word" /></a></div>
</div>
<br /> <br />
<h2>The Development Gap</h2>
<div id="contents">
<div id="extras">
<font face="cambria" color="black" size="5px">
<p>
<strong> EXTRAS </strong>
</p>
<p> 'Cool Geography' <a href="http://www.coolgeography.co.uk/GCSE/AQA/Development_Gap/Development%20Gap.htm" target="_blank">Website</a>
</p>
<p> BBC Bitesize <a href="http://www.bbc.co.uk/schools/gcsebitesize/geography/development/" target="_blank"><img src="images/bitesize1..png" width="35" height="25" alt="bitesize" /></a>
</p>
</font>
</div>
<h6>
<p>
<a href="re1.html">1. Contrasts using different measures of development to include
GNP, GNI per head, Human Development Index (HDI), birth
and death rates, infant mortality, people per doctor, literacy rate, access to safe water and life expectancy.
<br /> Correlation between the different measures.
Limitations/ways of using a single development measure.
<br /> Different ways of classifying different parts of the world.
<br /> The relationship between quality of life and standard of living. Different perceptions of acceptable quality of life in different parts of the world. Attempts made by people in the
poorer part of the world to improve their own quality of life.</a>
</p>
<p>
<a href="re2.html">2. Environmental factors – the impact of natural hazards. A case study of a natural hazard.
Economic factors – global imbalance of trade between different parts of the world.
Social factors – differences in the quantity and quality of water available on peoples’ standards of living.
Political influences – the impact of unstable governments.</a>
</p>
<p>
<a href="re3.html">3. The imbalance in the pattern of world trade and the attempts to reduce it.
The contributions of Fair Trade and Trading Groups.
The reduction in debt repayments through debt abolition and conservation swaps.
The advantages and disadvantages of different types of aid for donor and recipient countries.
The role of international aid donors in encouraging sustainable development.
A case study of one development project.</a>
</p>
<p>
4. (Case Study)
Conditions leading to different levels of development in two contrasting countries of the EU.
The attempts by the EU to reduce these different levels of development.
</p>
</h6>
</div><!-- end contents-->
</div> <!--end textwrapper-->
</body>
</html>
CSS:
h2 {
font-family: Cambria;
font-size: 60px;
line-height: 65px;
margin: 0;
Padding:0;
height: 100px;
width: auto;
}
h5 {
font-family: Cambria;
font-size: 20px;
text-shadow: 3px 3px 1px #666;
margin: 0;
Padding:0;
height: 100px;
width: auto;
}
h6 {
font-family: Cambria;
font-size: 25px;
color: #000;
}
h1 {
margin: 0;
padding: 0;
font-family: Cambria;
font-size: 100px;
text-shadow: 8px 8px 3px #333;
}
h4 {
margin: 0;
padding: 0;
font-family: Cambria;
font-size: 40px;
}
img{
box-shadow: 4px 4px 2px #000;
border-radius: 3px;
}
#textwrapper {
max-width: 1300px;
min-width: 800px;
position: relative;
margin-top: 0px;
margin-right: 5%;
margin-bottom: 0px;
margin-left: 5%;
padding-left: 10px;
}
#dgbackground {
height: 100%;
width: 100%;
min-width: 800px;
position: fixed;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
color: #F00;
top: 0px;
background-image: url(../images/gcse%20images/dg.jpg);
}
#dgtitle {
height: auto;
width: 150x;
margin: auto;
position: absolute;
left: 10px;
top: 10px;
color: #000;
}
#spec {
height: 200px;
width: 250px;
margin-top: 20px;
margin-right: 50px;
position: absolute;
right: 10px;
top: 10px;
float:right
}
#specAQA {
height: 50px;
width: 150px;
margin: auto;
position: absolute;
left: 0px;
top: 45px;
margin: 10px;
}
#specDOC {
height: 50px;
width: 50px;
margin: auto;
position: absolute;
left: 160px;
top: 45px;
margin: 10px;
}
#contents {
max-width: 1500px;
min-width: 800px;
margin: auto;
position: relative;
left: 0px;
top: 50px;
height: auto;
padding-right: 10px;
padding-left: 10px;
}
#centerIMG {
margin: 20px;
text-align: center;
}
#floatrightIMG {
float: right;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
#floatleftIMG {
float: left;
margin-top: 20px;
margin-bottom: 20px;
margin-right: 20px;
}
#extras {
float:right;
width: 250px;
height: 600px;
text-align:center
}
答案 0 :(得分:4)
<font>
被1996中的CSS取代。停止使用它。
您不能在标题中放置一个段落。
使用相应的标记。
如果要设置段落样式,请将CSS应用于<p>
。
如果您想将一堆段落组合在一起,请选择<section>
,例如<article>
,<aside>
或<div>
。如果HTML没有描述分组原因的元素,则使用通用块级元素:{{1}}。
如果您不想以相同的方式设置该类型的所有元素的样式,则添加编写an appropriate element所需的任何类和ID,以定位您想要影响的元素。
答案 1 :(得分:0)
就像昆汀所说,使用font元素毫无意义。
您应该创建一个段落类,而不是:
<font face="cambria" color="black" size="5px"><p><strong>EXTRAS</strong></p>
<p>'Cool Geography'<a href="http://www.coolgeography.co.uk/GCSE/AQA/Development_Gap/Development%20Gap.htm" target="_blank">Website</a></p>
<p>BBC Bitesize <a href="http://www.bbc.co.uk/schools/gcsebitesize/geography/development/" target="_blank"><img src="images/bitesize1..png" width="35" height="25" alt="bitesize" /></a>
</p>
</font>
应该是类似的段落样式:
<p class="yourclassname">Enter paragraph text</p>
<p class="yourclassname">Enter paragraph text</p>
然后将所需的字体和样式应用于CSS中的类:
.yourclassname {
font-family: cambria;
color: black;
font-size: 5px;
}
这应该可以解决问题。