dtml3340 2015-03-11 01:57
浏览 229
已采纳

'include'不包含样式

I'm trying to set up a universal navigation bar. I'm using include to import menu.php into index.php. When I do, it works fine; however, when I add something after the menu.php include, the menu's CSS rules carries on.

index.php

<!DOCTYPE HTML>
<html>
<head>
    <link rel=stylesheet href="css/style.css" />
    <title>Home | Website</title>
</head>
<body>
    <?php include 'menu.php'; ?>
    <p>Test</p>
</body>
</html>

menu.php

<head>
    <title>Menu | Website</title>
    <style>
        // menu-only styles...
    </style>
</head>
<body>
    <a href="/">Home</a>
</body>
<?php return; ?>
  • 写回答

3条回答 默认 最新

  • doushichun9409 2015-03-11 02:03
    关注

    You're essentially including an HTML page within an HTML page doing it your way.

    To get your CSS to target only your menu, keep it in your style.css file, but make your div have a "menu" class.

    Something like this should do what you're looking for, I believe.

    index.html

    <!DOCTYPE HTML>
<html>
<head>
  <link rel=stylesheet href="css/style.css" />
  <title>Dare Network | Home</title>
</head>
<body>
  <?php include 'menu.php'; ?>
  <p>Test</p>
</body>
</html>

    style.css

    html,body {
  padding: 0;
  margin: 0;
  background-color: #777777;
}

.menu {
  /* padding: top&&bottom left&&right; */
  padding:10px 0;
  background-color: #7786ff;
  text-align: center;
}

.menu a {
  /* merge transitions into one line to make both functional */
  transition: background-color .25s ease-in-out, padding-bottom .25s ease-in-out;
  background-color: #b20000;
  color: #ffffff;
  text-decoration: none;
  /* padding:top right bottom left */
  padding:10px 10px 5px 10px;
}

.menu a:hover {
  background-color: #cc0000;
  padding-bottom: 10px;
}

    menu.php

    <div class="menu">
  <a href="/">Home</a>
</div>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题？

悬赏问题

  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉，不会对a-b<-200mv有影响吗，就是接受时，对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构，轴与轴承是否发生了碰撞？
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法，和Jdk11自带的加密结果会一样吗，不一样的话有什么解决方案，Jdk不能升级的情况
  • ¥15 画两个图 python或R