我遇到的问题是当我调整页面大小时,它会在标题和导航之间以及h1和段落内容之间创建巨大的猿。我这样做是为了一个学校的任务,他们给了我一步一步的指示,但即使我跟着他们,它创造了所有这些空间。
这是我的网页CSS代码:
header, main, nav, footer, figure, figcaption, aside, section,
article { display: block; }
body {background-color: #3F2860;
font-family: arial;
color: #3F2860;
}
nav a:link {
color: #3F2860;
}
nav a:visited {
color: #497777;
}
nav a:hover{
color: #A26100
}
nav a:hover{
border: 3px inset #333333;
}
* {box-sizing: border-box; }
#wrapper{margin-left: auto;
margin-right: auto;
width: 80%;
min-width: 550px;
max-width: 1280px;
background-color: #F5F5F5;
color: #3F2860;
}
header{height: 150px;
}
main{padding-bottom: 3em;
padding-top: 0;
padding-left: 3em;
padding-right: 3em;
display: block;
margin-left: 170px;
}
#mathero{height: 300px;
background-image: url(images/yogamat.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#loungehero{height: 300px;
background-image: url(images/yogalounge.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
#mobile{display: none;
}
#desktop{display: inline;
}
/*img{padding-left: 2em;
padding-right: 2em;
padding-top: 0;
padding-bottom: 0;
}*/
nav{text-align: center;
font-weight: bold;
padding: 1em;
float: left;
width: 190px;
}
nav > ul {
padding-left: 0;
font-size: 1.2em;
list-style-type: none;
}
nav a {text-decoration: none;
display: block;
text-align: center;
font-weight: bold;
border: 3px outset #CCCCCC;
margin-bottom: 1em;
padding: 1em;
}
li {font-size: 90%;
}
h1 {background-color: #9BC1C2;
padding-top: 50px;
padding-left: 2em;
background-image: url(images/lilyheader.jpg);
background-repeat: no-repeat;
background-position: right;
}
footer {background-color: #9BC1C2;
text-align: center;
font-style: italic;
font-size: small;
padding: 1em;
}
.floatleft {
float: left;
margin-right: 4em;
}
.clear {
clear: both;
padding-left: 15em;
}
@media only screen and (max-width: 64em){
body{margin: 0;
padding: 0;
}
#wrapper{min-width: 0;
width: auto;
margin: 0;
padding: 0;
}
header{padding-top: 1px;
}
main{padding-top: 0;
padding-bottom: 2.5em;
padding-left: 1em;
padding-right: 1em;
margin: 0;
font-size: 90%;
clear: both;
}
nav{float: none;
width: auto;
padding-left: 2em;
}
nav a{padding: .2em;
margin-left: .3em;
float: left;
width: 23%;
}
h2, h3, p, dl{padding: 2em;
}
main ul{margin-left: 2em;
}
.floatleft{margin-left: 2em;
margin-bottom: 1em;
}
.clear{padding-left: 2em;
}
mathero, loungehero{height: 150px;
width: 80%;
margin-left: auto;
margin-right: auto;}
}
@media only screen and (max-width: 37.5em) {
h1{font-size: 2em;
padding-top: .25em;
padding-left: 1.5em;
width: 85%;
text-align: center;}
nav a{padding: 0.5em;
width: 45%;
float: left;
min-width: 6em;
margin-left: .5em;}
li{font-size: 100%;}
.floatleft{float: none;
display: none;}
mathero, loungehero{background-image: none;
height: 0;}
footer{padding: 0.5em;
margin: 0;}
#mobile{display: inline;
}
#desktop{diplay:none;
}
}
我的某个网页的HTML代码:
<!DOCTYPE html>
<html>
<head>
<link href="yoga.css" rel="stylesheet" type="text/css"/>
<title>Path of Light Yoga Studio</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="wrapper">
<header>
<h1>Path of Light Yoga Studio</h1>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="classes.html">Classes</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
<main>
<img src="images/yogadoor2.jpg" alt="Yoga Door" height="280"
width="225" class="floatleft"/>
<h2>Find Your Inner Light</h2>
<p>
Path of Light Yoga Studio provides all levels of yoga practice
in a tranquil, peaceful environment. Whether you are new to yoga or an
experienced practitioner, our dedicated instructors can develop a practice
to meet your needs. Let your inner light shine at the Path of Light
Yoga Studio.
</p>
<ul>
<li>Hatha, Vinyasa, and Restorative Yoga classes</li>
<li>Drop-ins Welcome</li>
<li>Mats, blocks, and blankets provided</li>
<li>Relax in our Serenity Lounge before and after your class</li>
</ul>
</main>
<div class="clear">
<p>
612 Serenity Way <br>
El Dorado, AZ 86336 <br>
<a id="mobile" href="tel:888-555-5555">888-555-5555</a>
<span id="desktop">888-555-5555</span>
</p>
</div>
<hr>
<footer>
Copyright © 2018 Path of Light Yoga Studio <br>
This page was created by Audrey Boyd for IT2040, Section 004 Spring 2018, Lab #4
<br>
<a href="mailto:boydau@mail.uc.edu">boydau@mail.uc.edu</a>
</footer>
</div>
</body>
</html>
答案 0 :(得分:0)
首先,首先,没有名为&#34; ariel的字体系列或字体。&#34;这是Arial。其次,当你没有向页面提供HTML时,我很难帮助你。你可以把它联系起来吗?我把它作为答案而不是问题,因为我没有这个特权,但是一旦你向我描述,我会编辑它给你答案。