使用css / html的响应图像 [英] Responsive images with css/html

问题描述

我在做一个网站，我想让它回应。我想做出响应的第一件事是标题。在标题上，我有网站的徽标和首页，关于，团队和联系我们的5个按钮

I'm making a website and I'm trying to make it responsive. The first thing that I want to make responsive is the header. On the header I have the logo of the website and 5 buttons that are "Home", "About", "Team" and "Contact Us"

HTML看起来像this：

The HTML looks like this:

    <div class="clearfix" id="header" style="">            

        <div class="clearfix" id="logo" style="">
            <!-- Lynxus Logo -->
            <a class="nonblock nontext museBGSize grpelem" id="u223" href="index.html"><!-- simple frame --></a>
        </div>

        <div class="clearfix" id="nav" style="">
            <!-- Home -->
            <a class="nonblock nontext museBGSize grpelem" id="u224" href="index.html"><!-- simple frame --></a>
            <!-- About -->
            <a class="nonblock nontext museBGSize grpelem" id="u225" href="#"><!-- simple frame --></a>
            <!-- Team -->
            <a class="nonblock nontext museBGSize grpelem" id="u226" href="#"><!-- simple frame --></a>
            <!-- Blog -->
            <a class="nonblock nontext museBGSize grpelem" id="u227" href="http://lynxusapp.blogspot.com/" target="_blank"><!-- simple frame --></a>
            <!-- Contact Us -->
            <a class="nonblock nontext museBGSize grpelem" id="u228" href="#"><!-- simple frame --></a>
        </div>

，css如下所示：

#header
{
z-index: 1;
width: 100%;
min-height: 80px;        
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

#logo{
z-index: 1;
width: 228px;
min-height: 80px;        
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

#nav{
z-index: 1;
width: 732px;
min-height: 80px;        
position: absolute;
top: 0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;    
}

#u223
{
z-index: 16;
width: 228px;
height: 77px;
position: relative;
margin-right: -10000px;
margin-top: 10px;
left: 10px;
background: transparent url("../images/LynxusLogo.png") no-repeat left top;
background-size: contain !important;
}

#u224
{
z-index: 17;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 280px;
background: transparent url("../images/Home.png") no-repeat left top;
background-size: contain !important;
}

#u224:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Home-hover.png") no-repeat left top;
background-size: contain !important;
}

#u225
{
z-index: 18;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 430px;
background: transparent url("../images/About.png") no-repeat left top;
background-size: contain !important;
}

#u225:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/About-hover.png") no-repeat left top;
background-size: contain !important;
}

#u226
{
z-index: 19;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 580px;
background: transparent url("../images/Team.png") no-repeat left top;
background-size: contain !important;
}

#u226:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Team-hover.png") no-repeat left top;
background-size: contain !important;
}

#u227
{
z-index: 20;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 730px;
background: transparent url("../images/Blog.png") no-repeat left top;
background-size: contain !important;
}

#u227:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Blog-hover.png") no-repeat left top;
background-size: contain !important;
}

#u228
{
z-index: 21;
width: 131px;
height: 33px;
position: relative;
margin-right: -10000px;
margin-top: 30px;
left: 880px;
background: transparent url("../images/Contact.png") no-repeat left top;
background-size: contain !important;
}

#u228:hover
{
margin: 30px -10000px 0px 0px;
background: transparent url("../images/Contact-hover.png") no-repeat left top;
background-size: contain !important;
}

我一直在尝试使用min-height，min-我在互联网上发现的东西，但他们没有工作到目前为止。有人知道我该如何解决？

I've been trying to use min-height, min-width and other stuff that I've found on the Internet but they haven't worked so far. Does anyone know how I can solve it?

推荐答案

你可以使用这样的方案。看看我的例子。您可以展开和缩小显示面板，看看它是如何响应。 查看此示例

You could use a scheme like this. Check it out my example. You can expand and shrink down the display panel to see how it is responsive. Take a look at this example

如果你喜欢，也许我可以扩大一下。

If you like it maybe I could expand on this a bit.

#header {
    width:90%;
    float:left;
    background:#999;
    padding:20px 5%;
}

#logo {
    width:40%;
    height:100px;
    float:left;
    margin:0 10% 0 0;
    background:#666;
}

#nav {
    width:50%;
    float:left;

}

#nav .nav-item {
    width:14%;
    float:left;
    margin:0 1%;
    padding:10px 2%;
    background:#ccc;
}

这篇关于使用css / html的响应图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！