发表于: 2021-04-17 23:11:14
1 917
今天完成的事情:
解决
div下不同元素同时触发hover效果的实现
在同一个DIV下有一个块元素与一个文字标签,要求无论鼠标指向哪个元素另外一个元素也会被激活。可以利用最外层的div元素来选择下面的两个子元素,鼠标指向最外层的div时候触发激活效果。
父元素:hover 子元素2 { 。。。。。 }
父元素:hover 子元素2 { 。。。。。 }
当小于屏幕宽度768px时。使三个logo变成登录、注册
使用媒体查询,小于屏幕宽度768px时,让首页的按钮消失
发现添加bootstap里的样式 点击它的按钮没有出现下拉的效果,原本以为是不是我的布局有问题,
然后我重新创建一个html,直接复制粘贴效果就出来了
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">菜鸟教程</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">iOS</a></li>
<li><a href="#">SVN</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
已导入bootstrap.min.css和bootstrap.min.js文件,但出现点击按钮无反应现象
解决方案:
1>.检查代码是否有错误;
2>.代码无错,检查jQuery版本,jQuery版本不能太低,否则是没有效果的;
3>.jQuery版本没问题,检查jQuery引入是否在bootstrap.min.js引入之前,因为bootstrap的js依赖于jquery的js。
发现是我添加媒体查询的原因
明天计划的事情:继续首页添加媒体查询
遇到的问题:对媒体查询的用法不熟练
收获:媒体查询初步使用
评论