我有个问题。我在网页设计方面是个灾难,我必须为大学工作建立一个网站,所以这是我的查询:/
我正在尝试制作一个插入所有页面的菜单。由于框架在 html5 中已被弃用(至少这是我读到的),我尝试使用 iframe。
问题是我将样式应用于 iframe 并且它们不适用。我尝试调整它的大小,让它不滚动,等等......没有任何效果。
您需要的是干净地插入菜单,宽度为 100%,最小高度为 15 - 20%。我正在使用 iframe,但如果您知道 html5 有更好的替代方案,欢迎。
我希望你能帮助我。非常感谢!
目前我有这个代码:
索引.html
<html>
<head>
<title>Grabarino</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<iframe id="frame" src="header.html"></iframe>
<div>TODO write content</div>2
</body>
header.html:
<html>
<head>
<title>Header</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
</head>
<body>
<header>
<p id="titulo">Grabarino.com</p>
<p id="subtitulo">Tu tecno, Tu casa</p>
</header>
<nav>
<ul class="menu">
<li><a class="linkMenu" href="www.google.com">Inicio</a></li>
<li><a class="linkMenu" href="www.google.com">Tienda Online</a></li>
<li><a class="linkMenu" href="www.google.com">Sucursales</a></li>
</ul>
</nav>
</body>
样式.css
#titulo{
color:red;
}
body{
padding: 0px;
margin: 0px;
border:none;
}
#frame{
width: 100%;
padding: 0px;
margin: 0px;
border:2px;
height: 550px;
overflow:hidden;
}
nav{
width: 100%;
min-height: 100px;
border:0px;
padding: 0px;
margin: 0px;
background: #66ccff;
}
.menu{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li{
display: inline;
}
.linkMenu{
color:black;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
padding:15px;
text-decoration: none;
}
这是因为必须在 中明确指出专用样式,否则
iframe/object
将不会考虑它们:header.html
header.css
请注意,
body
我们已经给出了overflow: hidden
. 这将使滚动不显示。然后在 a 中添加标题
object/iframe
:索引.html
不,你不能把
height
车给一个iframe/object
。a的默认iframe/object
尺寸是300px x 150px。这就是为什么您会留下该图像作为空白。您需要做的是创建一个在加载时
iframe/object
执行的小函数,以便它根据内容调整高度:默认情况下,iframe 中的元素作用于它们自己的 document,这包括
anchor
. 解决方案是添加标签<base />
,告诉它使用target="parent"
. 如果要在另一个选项卡中打开它们,请将parent更改为_blank。你header.html
会是这样的:最后,你的网站会是这样的。