个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试构建响应式网站。我处于第一阶段，根据“内容至上”的方法，我必须考虑最小的移动布局。主页( build 中)是这样的:
例如，当用户单击第一个图标时，辅助导航栏会出现在主要导航栏下方。看这张图片(不要看图标，图片是随机的和临时的):
我想以某种方式将两个条形图以图形方式链接起来。我不知道，也许使用这些示例中的图像:
这是做这件事的正确方法吗？而且，如果这是一个很好的做法，我怎样才能以独立于屏幕宽度的方式定位“链接图像”？该位置必须基于其他元素的位置，或者可能基于百分比。它不能基于绝对定位。在这种情况下，确实，调整屏幕大小会造成如下图所示的困惑:
这是我的带有一些 jQuery 的 html 页面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Responsive Site</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
<!-- hide the secondary navigation bar -->
$("#socialnav").hide();
$("#social-icon").click(
function(){
$("#socialnav").toggle();
})
});
</script>
</head>
<body>
<!-- header -->
<div class="big">
<h1 class="big-font">
Responsive Website
</h1>
<h2 class="medium-font">
trytrytrytrytry
</h2>
<ul id="generalnav" class="nav big centered-content dark-background">
<li><img id="social-icon" alt="social_icon" src="img/social.png"></li><!--
--><li><img alt="sections_icon" src="img/sections.png"></li><!--
--><li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
</ul>
<ul id="socialnav" class="nav big centered-content dark-background">
<li><img alt="social_icon" src="img/social.png"></li><!--
--><li><img alt="sections_icon" src="img/sections.png"></li><!--
--><li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
</ul>
</div>
</body>
</html>
谢谢你帮助我!这是我的 jsFiddle (唯一有效(切换)的图标是左边的图标)。
最佳答案
首先，您应该嵌套列表，因为第二个是第一个的子项。
<ul id="generalnav" class="nav big centered-content dark-background">
<li><img id="social-icon" alt="social_icon" src="img/social.png">
<ul id="socialnav" class="nav big centered-content dark-background">
<li><img alt="social_icon" src="img/social.png"></li>
<li><img alt="sections_icon" src="img/sections.png"></li>
<li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
</ul></li>
<li><img alt="sections_icon" src="img/sections.png"></li>
<li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
</ul>
然后您可以执行以下操作:(您不需要任何 Javascript。)
#generalnav li ul { display:none; }
#generalnav li:hover ul { display:block; }
这还允许您对链接图像使用相对定位。
关于jquery - 以图形方式将主要导航栏与次要导航栏链接起来，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15650250/
25
4
0
我正在尝试执行 vagrant up 但一直遇到此错误: ==> default: IOError: [Errno 13] Permission denied: '/usr/local/lib/pyt
我在容器 div 中有一系列动态创建的不同高度的 div。 Varying text... Varying text... Varying text... Varying text.
通过 cygwin 运行 vagrant up 时遇到以下错误。 stderr: /bin/bash: /home/vagrant/.ansible/tmp/ansible-tmp-14872260
今天要向小伙伴们介绍的是一个能够快速地把数据制作成可视化、交互页面的 Python 框架：Streamlit，分分钟让你的数据动起来！ 犹记得我在做机器学习和数据分析方面的毕设时，
我是 vagrant 的新手，正在尝试将第二个磁盘添加到我正在用 vagrant 制作的虚拟机中。 我想出了如何在第一次启动虚拟机时连接磁盘，但是当我关闭机器时 然后再次备份(使用 'vagrant
我是一名优秀的程序员,十分优秀！