Fatal编程技术网
  • php/
  • 如何清理php文件，使其不包含html和css？

如何清理php文件，使其不包含html和css？

php html css

如何清理php文件，使其不包含html和css？,php,html,css,Php,Html,Css,下面是导航栏的html和css，我想在我的网站上普遍使用，有没有办法把它放在一个单独的文件中，然后在我的网页的html和php文件的开头调用这个文件？我试着把它们放在单独的文件中，并将它们包含在其他html页面中。至于php，我能做一个include“path/to/html/file”吗，还是把它放在php之上？我只是想用一种更有条理的方式来做这件事。感谢您的帮助，谢谢 <!DOCTYPE html> <html> <head> <meta name=

下面是导航栏的html和css，我想在我的网站上普遍使用，有没有办法把它放在一个单独的文件中，然后在我的网页的html和php文件的开头调用这个文件？我试着把它们放在单独的文件中，并将它们包含在其他html页面中。至于php，我能做一个include“path/to/html/file”吗，还是把它放在php之上？我只是想用一种更有条理的方式来做这件事。感谢您的帮助，谢谢

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>


body, html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.bg-image {
  /* Full height */
  height: 50%; 

  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Images used */
.img1 { background-image: url("logo.jpeg"); }


/* Position text in the middle of the page/image */
.bg-text {

  color: black;
  font-weight: bold;
  font-size: 80px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}
</style>
</head>

<style>
.navbar {
    overflow: hidden;
    background-color: #333;
    font-family: Arial, Helvetica, sans-serif;
}

.navbar a {
    float: left;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

.dropdown {
    float: left;
    overflow: hidden;
    }

.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    }

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: red;
    }

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    float: none;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<div class="navbar">
    <a href="../login/homePage.html">Lewis University</a>
    <div class="dropdown">
        <button class="dropbtn">Colleges</button>
        <div class="dropdown-content">
            <a href="../colleges/show_college.php">List Colleges</a>
            <a href="../colleges/search_college.html">Search Colleges</a>
            <a href="../colleges/new_college.html">Add Colleges</a>
        </div>
    </div> 
    <div class="dropdown">
        <button class="dropbtn">Department</button>
        <div class="dropdown-content">
            <a href="../department/show_department.php">List Department</a>
            <a href="../department/search_department.html">Search Department</a>
            <a href="../department/new_department.html">Add Department</a>
        </div>
    </div> 
    <div class="dropdown">
        <button class="dropbtn">Program</button>
        <div class="dropdown-content">
            <a href="../program/show_program.php">List Program</a>
            <a href="../program/search_program.html">Search Program</a>
            <a href="../program/new_program.html">Add Program</a>
        </div>
    </div> 
    <div class="dropdown">
            <button class="dropbtn">Concentration</button>
            <div class="dropdown-content">
                <a href="../concentration/show_concentration.php">List Concentration</a>
                <a href="../concentration/search_concentration.html">Search Concentration</a>
                <a href="../Concentration/new_concentration.html">Add Concentration</a>
            </div>
        </div> 

     <div class="dropdown">
            <button class="dropbtn">prefix</button>
            <div class="dropdown-content">
                <a href="../prefix/show_prefix.php">List Prefixes</a>
                <a href="../prefix/search_prefix.html">Search Prefixes</a>
                <a href="../prefix/new_prefix.html">Add Prefixes</a>
            </div>
        </div> 

    <div class="dropdown">
            <button class="dropbtn">Course</button>
            <div class="dropdown-content">
                <a href="../courses/show_course.php">List Course</a>
                <a href="../courses/search_course.html">Search Course</a>
                <a href="../courses/new_course.html">Add Course</a>
            </div>
        </div> 
    <div class="dropdown">
            <button class="dropbtn">Coures & Concentration</button>
            <div class="dropdown-content">
                <a href="../course_concentration/show_course_concentration.php">List Coures & Concentration</a>
                <a href="../course_concentration/search_course_concentration.html">Search Coures & Concentration</a>
                <a href="../course_concentration/new_course_concentration.html">Add Coures & Concentration</a>
            </div>
        </div> 

    <div class="dropdown">
        <button class="dropbtn">Course Type</button>
        <div class="dropdown-content">
            <a href="../course_type/show_course_type.php">List Course Type </a>
            <a href="../course_type/search_coures_type.html">Search Course Type</a>
            <a href="../course_type/new_course_type.html">Add Course Type</a>
        </div>
    </div> 


    <div class="dropdown">
        <button class="dropbtn">Course & Prereq</button>
        <div class="dropdown-content">
            <a href="../course_prereq/show_course_prereq.php">List Course & Prereq</a>
            <a href="../course_prereq/search_course_prereq.html">Search Course & Prereq</a>
            <a href="../course_prereq/new_course_prereq.html">Add Course & Prereq</a>
        </div>
    </div> 

    <div class="dropdown">
        <button class="dropbtn">Phrase</button>
        <div class="dropdown-content">
            <a href="../phrase/show_phrase.php">List Phrase</a>
            <a href="../phrase/search_phrase.html">Search Phrase</a>
            <a href="../phrase/new_phrase.html">Add Phrase</a>
        </div>
    </div> 

</div>

</head>

<body>
    <main role="main" class="container-fluid">
    <h1> Colleges </h1>


正文，html{
身高：100%；
保证金：0；
字体系列：Arial、Helvetica、无衬线字体；
}
* {
框大小：边框框；
}
.bg图像{
/*全高*/
身高：50%；
/*将图像居中并精确缩放*/
背景位置：中心；
背景重复：无重复；
背景尺寸：封面；
}
/*使用的图像*/
.img1{背景图像：url（“logo.jpeg”）；}
*在页面/图像中间位置的文本*/
.bg文本{
颜色：黑色；
字体大小：粗体；
字号：80px；
位置：固定；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
z指数：2；
宽度：300px；
填充：20px；
文本对齐：居中；
}
navbar先生{
溢出：隐藏；
背景色：#333；
字体系列：Arial、Helvetica、无衬线字体；
}
纳瓦尔先生{
浮动：左；
字体大小：16px；
颜色：白色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
.下拉列表{
浮动：左；
溢出：隐藏；
}
.下拉菜单{
字体大小：16px；
边界：无；
大纲：无；
颜色：白色；
填充：14px 16px；
背景色：继承；
字体家族：继承；
保证金：0；
}
.navbar a:悬停，.dropdown:悬停.dropbtn{
背景色：红色；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
浮动：无；
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#ddd；
}
.下拉：悬停.下拉内容{
显示：块；
}
学院
部门
程序
浓度
前缀
课程
法庭与集中
课程类型
课程及预科
短语
学院
虽然我建议您使用类似Laravel的框架，这样您就可以使用Blade更高效地完成这项工作，并更好地组织它，但这也会起作用：


//内容
并让
路径/to/file
包含头HTML代码。

对于CSS，使用外部样式表。在标题中，包括以下行：

然后从
中删除所有css，并将其粘贴到
mystyle.css
中

这样做的目的是，只要链接了上述代码行，该页面就会调用
mystyle.css
中的css样式

要清理html代码，不应该清理整个html，而应该只清理重复出现在其他页面中的
html
代码。比如你的导航菜单

您可以通过使用名为
include

试试这个：

1） 创建一个名为
navigation.php的新文件
——在该文件中，从
…
开始粘贴整个导航html代码

2） 现在，对于html，您必须将其重命名为
.php
。因此，它应该是
index.php
，而不是
index.html

3） 现在，
通过这样做将导航包含在其中：


<body>
   <?php include 'navigation.php';?>
   // your html codes of other things below your navigation
</body>




//导航下面的其他内容的html代码


因此，通过这种方式，您可以调用重复的内容，如导航菜单、页脚等。
如果您是
内容也会重复，这意味着如果您需要这种字体，并且在整个过程中使用一个
mystyle.css
，您还可以使用
包含
并对它们进行分组。