Question

我正在尝试创建一个最大宽度为1024的响应式主页。但是，当我从css文件调用时，图像没有显示。

我确实在主页中包含了样式表，当前视口为1024。我找不到我的错误，请帮忙。感谢。

主页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Responsive design</title>
<link rel="stylesheet" href="res-style.css" type="text/css" media="screen and (max-width:1024px)"/>
</head>

<body>
    <table class="ct">
    <tr>

        <td class="1">

       <?php include 'menu.php'; ?>
        </td>

    </tr>
    <tr>
        <td class="2">
        </td>
    </tr>
    <tr>
        <td class='3'>
            <img src="NewLogo1.png"></td>
    </tr>
    <tr>
        <td class='4'>
        </td>
    </tr>
    <tr>
        <td class='5'>
            wefhuiweabhfuia</td>
    </tr>
</table>



</body>
</html>

样式表

@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1024px)
{

    .ct{min-width:1000px;height:898px;border:0;}
    .1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
    .2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
    .4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}

Answer 1

不要将数字用作css类。从数字开始就是打破它。 CSS类名称应以下划线，字母或 - 开头。以破折号开头的类名称保留用于浏览器扩展。通常，开始一个带字母的课程。

以下小提琴有效。您可以在控制台中看到它尝试加载图像，但在这种情况下会得到404。

http://jsfiddle.net/nks7S/

HTML

<table class="ct">
    <tr>

        <td class="a1"> </td>

    </tr>
    <tr>
        <td class="a2"></td>
    </tr>
    <tr>
        <td class='a3'><img src="NewLogo1.png"></td>
    </tr>
    <tr>
        <td class='a4'>
        </td>
    </tr>
    <tr>
        <td class='a5'>
            wefhuiweabhfuia</td>
    </tr>
</table>

CSS

@charset "utf-8";
/* CSS Document */

@media screen and (max-width:1024px)
{

    .ct{min-width:1000px;height:898px;border:0;}
    .a1{background-image:url('images/text-5_02.png');min-width:1000px;height:43px;margin-left:10px;background-repeat:no-repeat;display:inherit;}
    .a2{background-image:url('images/text-5_04.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .a3{background-image:url('images/text-5_05.png');min-width:1000px;height:288px;padding-left:25%;background-repeat:no-repeat;}
    .a4{background-image:url('images/text-5_06.png');min-width:1000px;height:256px;background-repeat:no-repeat;}
    .a5{background-image:url('images/text-5_07.png');min-width:1000px;height:55px;background-repeat:no-repeat;}
}

建议：在我的示例中，而不是1或a1，尝试在类名中更具描述性。除了你之外，任何人都可以轻松地跟随它。

无法通过样式表的媒体查询显示图像

1 个答案: