Question

我是网络开发的新手，我建立了我的第一个网站。我想创建一个标题，在中心有一个图像，并在其周围的导航菜单。

以下是我正在使用的代码：

HTML：

</head>
    <body>
    <div id ="header">    

        <div id="nav">
            <ul>

                <li><a href="#">About</a></li>
                <li><a href="#">Philanthropy</a></li>
                <li><a href="index.html"><img src="http://i.imgur.com/cosDXx1.png"/></a></li>
                <li><a href="#">Why Join?</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>

    </div>
</body

＆GT;

CSS：

body {
    margin:0px;
    padding:0px;
}

#header{
    width:100%;
    height:110px;
    background-color:black;
}

#nav ul{
    list-style-type:none;
    font-family:"Slabo 13px",serif;
    float:center;
}

#nav ul li{
    padding:10px;
    display:inline;
    margin-left:60px;
    margin-bottom:20px;
}

#nav ul li a{
    text-decoration:none;
    color:#006600;

}

#nav ul li a:hover{
    color:#CC0000;
}

JSfiddle链接：

http://jsfiddle.net/5g6sm01q/

在我的屏幕上，它是一条线但是当我收缩它时（在jsfiddle示例中）它不是。请提出任何有关此问题的提示或帮助。

Answer 1

将所有像素值转换为％或至少填充和左右边距，并查看更改..我刚刚编辑了你的小提琴..

请参阅此http://jsfiddle.net/5g6sm01q/2/

像这样切换css

body {
    margin:0px;
    padding:0px;
}

#header{
    width:100%;
    height:110px;
    background-color:black;
}

#nav ul{
    list-style-type:none;
    font-family:"Slabo 13px",serif;
    float:center;
}

#nav ul li{
    padding:0.5%;
    display:inline;
    margin-left:2%;
    margin-bottom:20px;
}

#nav ul li a{
    text-decoration:none;
    color:#006600;

}

#nav ul li a:hover{
    color:#CC0000;
}

<强>更新

正如@Krodmannix在评论中提到的，CSS中有一种方法可以决定如何使用媒体查询根据不同的屏幕尺寸格式化页面。它使您的网站很容易适应没有任何页面重定向的移动屏幕

创建响应式网站标题？

1 个答案: