个人中心
gpt4 book ai didi

html - 创建响应式网站标题？

转载 作者：太空宇宙 更新时间：2023-11-04 13:04:49 24 4
gpt4 key购买 nike

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

这是我正在使用的代码:

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

>

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 示例中)它不是。请提供有关此问题的任何提示或帮助。

最佳答案

将所有像素值转换为 % 或至少填充和左右边距，然后查看变化..我刚刚稍微编辑了你的 fiddle ..

看这个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 中有一种方法可以使用媒体查询 来指示如何根据不同的屏幕尺寸设置页面格式。这使得您的网站很容易适应没有任何页面重定向的移动屏幕

关于html - 创建响应式网站标题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25209914/

24 4 0
文章推荐： Linux - 将系统日期与文件中的日期进行比较并发送电子邮件给管理员
文章推荐： java - 按钮操作延迟或退出后执行
文章推荐： python - 在 GNU/Linux 上手动构建 python 2.7.10 加载从包安装的旧 python2.7.6 的 .so
文章推荐： javascript - 如何通过 javascript 设置 -webkit-mask-box-image？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com