Question

我正在创建一个网站，我希望在不同的显示器上看起来几乎相同，如果我将边距缩小到更小 - 我想你知道我想说的是什么。我正在寻找另一个网站，看看它是如何工作的。您可以在此处查看：http://motika.com.mk/。尝试放大那里。我不知道问题是什么。这是我的代码：

<head>
<link rel="stylesheet" href="dodatoci/stilovi/stilovi.css">
<meta charset="utf-8"/>
<title>Услуги | Што се нуди?</title>
</head>

<body>
<div id = "glavendrzac">
    <!--<table id = "goretabela">
        <tr>
            <td style="width:220px;"><a href="index.php"><img src="dodatoci/sliki/logo.png" id = "logoslika" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></a></td>
            <div class="dropdown">
                <td style="width:220px;"><button class = "dropbtn"></button></td>

                </div>
            </div>
        </tr>
    </table>-->
    <div id = "meni">
        <nav>
            <ul id = "meninav">
                <li><a href="index.php"><img src="dodatoci/sliki/logo.png" onmouseover="this.src='dodatoci/sliki/logohover.png';" onmouseout="this.src='dodatoci/sliki/logo.png';"/></a></li>
                <li><div class="dropdown" style="float:left;">
                    <button class="dropbtn"></button>
                    <div class="dropdown-content" style="left:0;">
                        <table id = "tabelamenispusti">
                            <tr>
                                <td>
                                    <a href="#">Берово</a>
                                    <a href="#">Битола</a>
                                    <a href="#">Богданци</a>
                                    <a href="#">Валандово</a>
                                    <a href="#">Велес</a>
                                    <a href="#">Виница</a>
                                    <a href="#">Гевгелија</a>
                                    <a href="#">Гостивар</a>
                                    <a href="#">Дебар</a>
                                </td>
                                <td>
                                    <a href="#">Делчево</a>
                                    <a href="#">Демир Капија</a>
                                    <a href="#">Демир Хисар</a>                             
                                    <a href="#">Кавадарци</a>
                                    <a href="#">Кичево</a>
                                    <a href="#">Кочани</a>
                                    <a href="#">Кратово</a>
                                    <a href="#">Крива Паланка</a>
                                    <a href="#">Куманово</a>                                        
                                </td>
                                <td>
                                    <a href="#">Крушево</a>
                                    <a href="#">М. Брод</a>
                                    <a href="#">M. Каменица</a>
                                    <a href="#">Неготино</a>
                                    <a href="#">Охрид</a>
                                    <a href="#">Пехчево</a>
                                    <a href="#">Прилеп</a>
                                    <a href="#">Пробиштип</a>
                                    <a href="#">Радовиш</a>
                                </td>
                                <td>
                                    <a href="#">Ресен</a>
                                    <a href="#">Свети Николе</a>
                                    <a href="#"><strong>Скопје</strong></a>
                                    <a href="#">Струга</a>
                                    <a href="#">Струмица</a>
                                    <a href="#">Тетово</a>
                                    <a href="#">Штип</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div></li>
            </ul>
        </nav>
    </div>
    <div id = "uslugibn">
        <img style="width:100%; height: 300px;" src="dodatoci/sliki/banner.png"/>
    </div>
    <div id = "reklama">
        <a href = "http://setec.mk" target="_blank"><img src="dodatoci/reklami/setec1.jpg" style = "width:100%;"/></a>
    </div>
</div>
</body>

这是CSS代码：

body{
    background-color: #e4e4e4;
    margin: 0;
}

#glavendrzac{
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 1em;
    background-size: contain;
}

.logoslika:hover{
    cursor:text;
}

#goretabela{
    border-collapse: collapse;
    background-color: #41c2ac;
    width: 100%;
}

#goretabela td{
    border-collapse: collapse;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
}

#goretabela td tr{
    border-collapse: collapse;
}

.dropbtn {
    background-image: url("../sliki/meni.jpg");
    width: 220px;
    height: 60px;
    border: none;
    cursor: pointer;
    display: inline;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 0;
    margin: 0;
}

.dropdown-content a {
    color: black;
    padding: 10px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #51d2bc}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
   background-image: url("../sliki/menihover.jpg");
}

#uslugibn{
    background-image: url("../sliki/banner.png");
    width: 100%;
    height: 300px;

}

#meninav{
    background-color: #41c2ac;
    height: 60px;
    margin: 0;
}

#meninav li{
    display: inline-block;
}

#tabelamenispusti{
    border: 2px solid #41c2ac;
    padding: 0;
    margin: 0;
}

#tabelamenispusti a{
    width: 150px;
}

#tabelamenispusti td{
    padding: 0;
    margin: 0;
}

制作响应式容器

0 个答案: