时间戳

首页 > 解决方案 > 简单网页设计中的外部 CSS 有时工作，有时不在我的笔记本电脑中，有什么原因吗？

html - 简单网页设计中的外部 CSS 有时工作，有时不在我的笔记本电脑中，有什么原因吗？

问题描述

        body
        {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            font-family: consolas;
        }

        .container
        {
            width: 1000px;
            position: relative;
            display: flex;
            justify-content: space-between;
            background-color: #fff;
        }

        .card
        {
            position: relative;

        }

        .card .face
        {
            width: 300px;
            height: 200px;
            transition: 0.5s;
        }

        .card .face1
        {
            position: relative;
            background-color: #333;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1;
            transform: translateY(100px);
        }

        .card:hover .face1
        {
            transform: translateY(0);
        }

        .card .face2
        {
            position: relative;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
            transform: translateY(-100px);
        }

        .card:hover .face2
        {
            transform: translateY(0);
        }

        .card .content p 
        {
            margin: 0;
            padding: 0;

        }
<!DOCTYPE html>
<html>
<head>
    <title>Card Design</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

    <div class="container">
        <div class="card">
            <div class="face face1">
                <div class="content">
                    <img src="home.png">
                </div>
            </div>

            <div class="face face2">
                <div class="content">
                    <p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
                </div>
                <a href="#">Read More...</a>
            </div>  
        </div>

        <div class="card">
            <div class="face face1">
                <div class="content">
                    <img src="home.png">
                </div>
            </div>

            <div class="face face2">
                <div class="content">
                    <p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
                </div>
                <a href="#">Read More...</a>
            </div>  
        </div>      

        <div class="card">
            <div class="face face1">
                <div class="content">
                    <img src="home.png">
                </div>
            </div>
            
            <div class="face face2">
                <div class="content">
                    <p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
                </div>
                <a href="#">Read More...</a>
            </div>  
        </div>          
    </div>

</body>
</html>

我将 html(index.html) 和 CSS(style.css) 文件放在同一个目录中很多次我交叉检查链接标签有时它运行正确但有时 CSS 不工作任何人都可以帮助我，拜托！

我在 JS/HTML/CSS Snippet 中发布了我的两个文件这是简单的卡片设计，可以在悬停时展开此程序也可以在此处正确输出，但在我的笔记本电脑中有时无法获得 CSS 属性

标签： htmlcss

解决方案

快速检查了您的代码——在 macOS 上使用 Firefox 和 Safari，看起来没问题。您是否看到任何类型的错误？根据文件权限，如果您从系统上的公共文档文件夹中加载这些文件，这应该不是问题。

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: consolas;
}

.container {
  width: 1000px;
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #fff;
}

.card {
  position: relative;
}

.card .face {
  width: 300px;
  height: 200px;
  transition: 0.5s;
}

.card .face1 {
  position: relative;
  background-color: #333;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  transform: translateY(100px);
}

.card:hover .face1 {
  transform: translateY(0);
}

.card .face2 {
  position: relative;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  box-sizing: border-box;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
  transform: translateY(-100px);
}

.card:hover .face2 {
  transform: translateY(0);
}

.card .content p {
  margin: 0;
  padding: 0;
}
<div class="container">
  <div class="card">
    <div class="face face1">
      <div class="content">
        <img src="home.png">
      </div>
    </div>

    <div class="face face2">
      <div class="content">
        <p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
      </div>
      <a href="#">Read More...</a>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <img src="home.png">
      </div>
    </div>

    <div class="face face2">
      <div class="content">
        <p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
      </div>
      <a href="#">Read More...</a>
    </div>
  </div>

  <div class="card">
    <div class="face face1">
      <div class="content">
        <img src="home.png">
      </div>
    </div>

    <div class="face face2">
      <div class="content">
        <p>dfhj dkcfbjkfdcjbh fkcjbhfc.l igJSz/dfilbdo igjd;ofijvodlkjs spdjivorghosdje.kd oslghodf</p>
      </div>
      <a href="#">Read More...</a>
    </div>
  </div>
</div>

推荐阅读