php - HTML CSS 响应式
问题描述
当我缩小窗口时，导航也会适应。应该如此。到目前为止它可以工作，但超过一定尺寸，宽度不再填充。照片应该完成我的描述。
照片
PHP/HTML 索引.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Icon für Navigation -->
<title>Home</title>
</head>
<body>
<?php
require_once ('require/script/f_navigation.html');
require_once ('require/nagivation.html');
?>
<h1 class="home-h1-titel">Title</h1>
<!-- -------------------------------------- CONTAINER -------------------------------------- -->
<div class="home-container">
<div class="border padding" >
<h1 class="home-h1-container">Registrieren</h1>
<p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. </p>
<button onclick="window.location.href = 'registrieren.html';">Registrieren</button>
</div>
<div class="border padding" >
<h1 class="home-h1-container">Login</h1>
<p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. </p>
<button onclick="window.location.href = 'login.html';">Login</button>
</div>
<!-- -------------------------------------- FOOTER -------------------------------------- -->
<footer>
<p>Footer<br>
</footer>
</body>
</html>
HTML 导航.html
<div class="navigation" id="navigation">
<a href="index.php" class="right">Home</a>
<a href="#placeholder" class="right">Placeholder 1</a>
<a href="#placeholder">Placeholder 2</a>
<a href="registrierung.html" class="right">Registrierung</a>
<a href="login.html">Login</a>
<a href="javascript:void(0);" class="icon" onclick="f_navigation()">
<i class="fa fa-bars"></i>
</a>
</div>
HTML f_navigation.html
<script>
/* Wechseln Sie zwischen dem Hinzufügen und Entfernen der "responsive"-Klasse zur Navigation, wenn der Benutzer auf das Symbol klickt */
function f_navigation()
{
var x = document.getElementById("navigation");
if (x.className === "navigation") {
x.className += " responsive";
} else {
x.className = "navigation";
}
}
</script>
CSS 样式表.css
/*ALLGEMEIN*//*ALLGEMEIN*//*ALLGEMEIN*/
body
{
margin: 0;
padding: 0;
font-family: Arial, serif;
}
footer
{
position: fixed;
width: 100%;
text-align: center;
padding: 3px;
background-color: #282828;
color: white;
font-family: Arial, serif;
bottom: 0;
left: 0;
}
/********************************************************************************/
/* NAVIGATION*//* NAVIGATION*//* NAVIGATION*/
.navigation
{
overflow: hidden;
border-bottom: solid;
border-color: white;
border-width: 1px;
background-color: #282828;
width: 100%;
text-align: right;
/* position: fixed; MUSS DANN ENTFERNT WERDEN*/
}
/* Gestaltung der Links innerhalb der Navigationsleiste */
.navigation a
{
margin: 10px;
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 18px;
font-family: Arial, serif;
}
/* Ändert Style beim drüberfahren */
.navigation a:hover
{
}
/* Kennzeichnet die aktuelle Seite */
.navigation a.active
{
}
/* Hide the link that should open and close the navigation on small screens */
.navigation .icon
{
display: none;
}
/* Wenn der Bildschirm weniger als 600 Pixel breit ist, wird die navigation zusammen genommen (Smartphone Ansicht) */
@media screen and (max-width: 600px)
{
body
{
background-image: none;
background-color: #a7a7e7;
background-repeat: no-repeat;
background-size: cover;
}
.navigation a
{
display: none;
border: solid;
border-color: rgb(255, 255, 255, 0);
}
.navigation a.icon
{
float: right;
display: block;
}
.right
{
float: none;
}
.navigation.responsive /*Position der Navigation wenn das Icon gedrückt wurde*/
{
}
.navigation.responsive a.icon /*Icon wenn gedrückt*/
{
position: absolute;
right: 0;
top: 0;
}
.navigation.responsive a
{
display: block;
}
}
/********************************************************************************/
/*HOME*//*HOME*//*HOME*/
.home-container
{
display: grid;
grid-gap: 50px; /*Raster-Lücke*/
justify-content: center;
grid-template-columns: repeat(2, minmax(200px, 1fr));
margin-left: 10%;
margin-right: 10%;
}
.home-h1-container
{
margin: 5px;
text-align: center;
color: #282828;
font-size: 30px;
font-family: Arial, serif;
}
.home-h1-titel
{
text-align: center;
font-family: Arial, serif;
}
有人可以帮帮我吗？
太感谢了！
此致
解决方案
您似乎缺少几个结束标记（</p>和</div>），否则您的代码可以正常工作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0;" />
<link rel="stylesheet" type="text/css" media="screen" href="css/stylesheet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Icon für Navigation -->
<title>Home</title>
</head>
<body>
<script>
/* Wechseln Sie zwischen dem Hinzufügen und Entfernen der "responsive"-Klasse zur Navigation, wenn der Benutzer auf das Symbol klickt */
function f_navigation()
{
var x = document.getElementById("navigation");
if (x.className === "navigation") {
x.className += " responsive";
} else {
x.className = "navigation";
}
}
</script>
<div class="navigation" id="navigation">
<a href="index.php" class="right">Home</a>
<a href="#placeholder" class="right">Placeholder 1</a>
<a href="#placeholder">Placeholder 2</a>
<a href="registrierung.html" class="right">Registrierung</a>
<a href="login.html">Login</a>
<a href="javascript:void(0);" class="icon" onclick="f_navigation()">
<i class="fa fa-bars"></i>
</a>
</div>
<h1 class="home-h1-titel">Title</h1>
<!-- -------------------------------------- CONTAINER -------------------------------------- -->
<div class="home-container">
<div class="border padding" >
<h1 class="home-h1-container">Registrieren</h1>
<p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. </p>
<button onclick="window.location.href = 'registrieren.html';">Registrieren</button>
</div>
<div class="border padding" >
<h1 class="home-h1-container">Login</h1>
<p class="justify">A website (also written as web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. </p>
<button onclick="window.location.href = 'login.html';">Login</button>
</div>
</div>
<!-- -------------------------------------- FOOTER -------------------------------------- -->
<footer>
<p>Footer<br></p>
</footer>
</body>
</html>
这是更正后的版本：https ://jsfiddle.net/zrcwh3mn/
推荐阅读
- kubernetes - 在 Kubernetes 上部署弹性搜索
- javascript - Javascript/Typescript - 在初始 Arr 的某个键上填充新的 Arr
- excel - 在 Angular 5 应用程序中从 API 下载 Gembox ExcelFile 作为 ExcelFile
- elasticsearch - 如何按单词匹配所有子字符串？
- visual-studio-code - 替换字符串但保留数字（Visual Studio 代码）
- javascript - 如何刷新绑定？
- selenium-chromedriver - WCT 无法在 Redhat Linux 中检测到 google chrome 浏览器
- javascript - 如何将从 postgres 数据库中选择的数据转换为 json 或 csv 以将其与 d3js lib 一起使用？
- gradle - 使用 gradle 合并 jar 以进行拆分包
- android - 从 Play 商店下载 apk 后，Google 地图无法在 Android 中运行