html页面缩小导航栏隐藏,html – 导航栏缩放问题[通俗易懂]

html页面缩小导航栏隐藏,html – 导航栏缩放问题[通俗易懂]我有一个问题,我的导航栏似乎与CSS中的.container缩放.现在,我是一个新手,但我已经尝试搞乱CSS中的值,但无济于事.这是HTML和CSS的代码:*{margin:0px;padding:0px;}body{font-family:verdana;background-image:url(images/bg2.jpg);max-width:100%;max-height:…

大家好,又见面了,我是你们的朋友全栈君。

我有一个问题,我的导航栏似乎与CSS中的.container缩放.现在,我是一个新手,但我已经尝试搞乱CSS中的值,但无济于事.这是

HTML和CSS的代码:

* {

margin: 0px;

padding: 0px;

}

body {

font-family: verdana;

background-image: url(images/bg2.jpg);

max-width: 100%;

max-height: auto;

background-position: 0px 100px;

background-repeat: repeat-x;

background-color: black;

background-size: 100%;

}

#header {

background-color: #000000;

height: 100px;

width: 100%;

}

.container {

background-color: grey;

width: 960px;

height: auto;

margin: 0 auto;

color: rgb(200, 200, 200);

}

#logoArea {

width: 300px;

height: 100px;

background-image: url(images/logo.png);

float: left;

display: block;

}

#navArea {

height: 50%;

float: right;

}

#nav {

list-style: none;

margin-top: 5%;

}

#nav a {

color: #C8C8C8;

text-decoration: none;

width: 75px;

height: 50px;

display: table-cell;

vertical-align: middle;

padding: 0;

}

#nav li {

width: 75px;

height: 50px;

float: left;

margin-left: 30px;

background-color: #252525;

border: 2px solid silver;

border-radius: 8px;

padding: 0px;

text-align: center;

display: table-cell;

vertical-align: middle;

}

#nav li:hover {

background-color: grey;

}

.page {

background-color: rgba(19, 19, 19, 0.9);

padding: 20px;

padding-bottom: 1px;

}

p {

margin-bottom: 20px;

}

.box1 {

position: relative;

width: 300px;

height: 100px;

background-image: url(images/logo.png);

background-repeat: no-repeat;

float: left;

}

#imageLogo {

width: 960px;

height: 324px;

background-image: url(images/Triicell-logo.png);

background-repeat: no-repeat;

background-position: center;

}

Test site

Test site

正如我所说的那样,我是一个新手,所以如果我错过了一些非常明显的东西,如果你能指出我正确的方向,我会很感激.我整个上午一直在绞尽脑汁,试着想想它会是什么.

以下是一些参考我正在谈论的截图:

在缩放.container之前:

5b7283c3bdfebca7ad5eb5a739b381b0.png

缩放.container后:

514b6c7d52ced65a7db7dd08c002e376.png

我正在做的是缩放它是我将.container的宽度更改为50%;.不要担心其他任何事情 – 我知道我将要做些什么来扩展其余部分,即图像等等 – 但它只是导航栏似乎跳出了原位.

但是,如果有人能帮我解决这个问题,我会非常感激.如果做不到这一点,至少指出我正确的方向.

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/140400.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • freemarker文件下,bootstrap 点击按钮,切换按钮上的图标

    freemarker文件下,bootstrap 点击按钮,切换按钮上的图标

  • Java系统日志管理「建议收藏」

    Java系统日志管理「建议收藏」在一个系统中日志管理是一个很重要的部分,因为当系统发布到线网后出了问题只能看系统日志了,这个时候系统日志起到了一个错误排查功能,同时也可以通过系统日志统计用户吞吐量等等,总之系统日志是系统管理一个重点。本系统架构为SpringMVC,myBatis,Shrio等等。1.SpringMVC异常处理SpringMVC负责接收用户请求并进行处理然后将结果返回给用户,那么为了不让异常抛给用户,我们一般在C…

  • mysql主从复制实现_oracle主从复制

    mysql主从复制实现_oracle主从复制操作系统环境:CentOS5.51.MySQL主从流程图2.MySQL主从说明a.主服务器一定要开启二进制日志文件.b.MySQL使用3个线程来执行复制功能(其中1个在主服务器上,另两个在从服务器上。当发出STARTSLAVE时,从服务器创建一个I/O线程,以连接主服务器并让它发送记录在其二进制日志中的语句。主服务器创建一个线程将二进制日志中的内容发送到从服务器。该线程可以识别为主服务器上S…

  • docker 常用操作命令_docker命令大全

    docker 常用操作命令_docker命令大全Docker常用命令使用1容器生命周期管理1.1dockerrun1.2dockerstart/stop/restart1.3dockerkill1.4dockerpause/unpause1.5dockerexec1.6dockerrm2容器操作2.1dockerps2.2dockerinspect2.3dockerlogs-查看docker容器日志2.4dockerexport2.5dockerport3本地镜像管理3.1dockerima

  • pycharm激活码2021年2月【2021免费激活】[通俗易懂]

    (pycharm激活码2021年2月)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html83…

  • 我为什么放弃Go语言

    我为什么放弃Go语言我为什么放弃Go语言?有好几次,当我想起来的时候,总是会问自己:这个决定是正确的吗?是明智和理性的吗?其实我一直在认真思考这个问题。开门见山地说,我当初放弃Go语言,就是因为两个“不爽”:第一,对Go语言本身不爽;第二,对Go语言社区里的某些人不爽。毫无疑问,这是非常主观的结论,但是我有足够详实的客观的论据。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号