不在全屏时，标题会更改字体和位置

时间：2017-06-06 17:54:42

标签： html css

我正在使用HTML和CSS创建一个网站，标题在全屏显示正常但是当我将其设置为屏幕大小的一半时，标题（h1）会更改为默认字体并与左侧而不是中心对齐，因为它应该。

这是我的HTML代码：

<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="css/filesheet1.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>

这是我的CSS代码（对不起，如果有很多，因为我不知道什么导致了这个问题，我把它全部放在那里）：

    /* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}

/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360x;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
@media{
min-width: 900px
}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}

1 个答案:

答案 0 :(得分：0)

＆＃13;
＆＃13; 
/* Styles go here */

/* set sizing to border box method */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/* set maximum and minimum widths for the body and centre within the viewport */
body {
text-align: center;
border: solid;
border-radius: 15px;
border-color: #CACFD2;
box-shadow: 0 0 100px 0 #888888;
background-color: #CACFD2;
font-family: 'Inconsolata', monospace;
margin-left: auto;
margin-right: auto;
max-width: 1024px;
min-width: 256px;
padding-top: 8px;
padding-bottom: 24px;
padding-left: 24px;
padding-right: 24px;
}
html, html body{
height: 100%;
}
html{
background-color: white;
}
/* header */
header{
}
header p {
float: left;
font-size: 16px;
font-weight: bold;
margin-top: 0px;
}
header h1 {
font-size: 16px;
text-align: center;
}
/* the menu */
nav ul {
text-align: center;
list-style-type: none;
background-color: none;
border: none;
font-family: 'Inconsolata', monospace;
font-weight: 400;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid #111111;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: #111111;
}
nav li.selected{
color: #606060;
}
nav ul li a:hover {
font-weight: 900;
}
/* biographies */
section {
background-color: #FFFFFF;
margin-bottom: 24px;
min-height: 320px;
padding-left: 24px;
padding-right: 24px;
}
/* the aside */
aside {
}
/* footer */
footer {
}
footer p.copyright {
float: left;
margin-top: 0px;
}
footer p.contact {
text-align: right;
}

/* small images are set to 200px in height */
img.small {
float: left;
height: 200px;
margin-bottom: 24px;
margin-right: 24px;
}
/* medium images can be 50% of the container element’s width, up to 360px */
img.medium {
max-width: 360px;
width: 50%;
}
/* large images are 100% of the container element’s width */
img.large {
width: 100%;
}
/* add the same style of border to the elements which are to have borders */
section, img {
border: 2px solid #B1B1B1;
border-radius: 16px;
}
/* the bits that are specific to a wide viewport (over 56em) */
@media all and (min-width: 900px) {

}
article {
float: left;
width: 66%;
}
aside {
float: left;
padding-left: 24px;
width: 34%;
}
footer {
clear: both;
}
h1{
text-align: center;
font-family: 'Inconsolata', monospace;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<title>Home page</title>
<link type="text/css" rel="stylesheet"
href="style.css"/>
</head>
<body>
<nav>
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about us.html">About us</a></li>
<li><a href="our songs.html">Our songs</a></li>
<li><a href="see us play.html">See us play</a></li>
<li><a href="Contact us.html">Contact us</a></li>
<li><a href="merchandise.html">Merchandise</a></li>
<li><a href="playing a concert.html">Playing a concert</a></li>
</ul>
</nav>
<h1>Home</h1>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

这应该适合你。

相关问题
最新问题