文章/答案/技术大牛

发布

社区首页 >问答首页 >无法通过媒体查询显示图像，形成样式表

问无法通过媒体查询显示图像，形成样式表
EN

Stack Overflow用户

提问于 2014-06-12 03:22:24

回答 1查看 45关注 0票数 1

我正试图创建一个响应的首页与最大宽度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;}
}

css

html

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-06-12 03:30:55

不要将数字用作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，尝试在类名中做一些描述性的工作。这会让别人比你更容易理解。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/24175966

复制

相似问题

问无法通过媒体查询显示图像，形成样式表
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法通过媒体查询显示图像，形成样式表EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法通过媒体查询显示图像，形成样式表
EN