Javascript 在同一页面上获得导航栏和flexslider
我有一个导航栏和flexslider在同一页上，但导航栏弄乱了flexslider。如何使样式彼此分离？ 我试着把导航条放在1级以下，但似乎不起作用。请帮忙 这是页面顶部的样式：Javascript 在同一页面上获得导航栏和flexslider,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个导航栏和flexslider在同一页上，但导航栏弄乱了flexslider。如何使样式彼此分离？ 我试着把导航条放在1级以下，但似乎不起作用。请帮忙 这是页面顶部的样式： <head> <link rel="stylesheet" href="flexslider.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.j
<head>
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider();
});
</script>
<title>St. Anthony</title>
<style>
.flexslider {
width:700px;
}
ul {
list-style-type:none;
margin:0;
padding:0;
position: absolute;
}
li {
display:inline-block;
float: left;
margin-right: 1px;
}
li a {
display:block;
min-width:140px;
height: 40px;
text-align: center;
line-height: 40px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: goldenrod;
background: firebrick;
text-decoration: none;
}
li:hover a {
background: #FF0000;
}
li:hover ul a {
background: firebrick;
color: #goldenrod;
height: 30px;
line-height: 30px;
}
li:hover ul a:hover {
background: #000000;
color: goldenrod;
}
li ul {
display: none;
}
li ul li {
display: block;
float: none;
}
li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
ul li a:hover + .hidden, .hidden:hover {
display: block;
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px){
/*Make dropdown links appear inline*/
ul {
position: static;
display: none;
}
/*Create vertical spacing*/
li {
margin-bottom: 1px;
}
/*Make all menu links full width*/
ul li, li a {
width: 100%;
}
/*Display 'show menu' link*/
.show-menu {
display:block;
}
}
}
section {
display:block;
float:left;
margin:10px;
}
nav {
width:100%;
height:40px;
padding:2px;
}
div.opener {
font-size:120%;
text-align:center;
}
</style>
</head>
$（窗口）。加载（函数（）{
$（'.flexslider'）.flexslider（）；
});
圣安东尼
.柔性滑块{
宽度：700px；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
位置：绝对位置；
}
李{
显示：内联块；
浮动：左；
右边距：1px；
}
李阿{
显示：块；
最小宽度：140px；
高度：40px；
文本对齐：居中；
线高：40px；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
颜色：黄花；
背景：耐火砖；
文字装饰：无；
}
李：停一停{
背景：#FF0000；
}
李：悬停一下{
背景：耐火砖；
颜色：#黄花；
高度：30px；
线高：30px；
}
li:悬停ul a:悬停{
背景：#000000；
颜色：黄花；
}
李乌尔{
显示：无；
}
李宇莉{
显示：块；
浮动：无；
}
李宇莉{
宽度：自动；
最小宽度：100px；
填充：0 20px；
}
ul li a:悬停+.隐藏，.隐藏：悬停{
显示：块；
}
.显示菜单{
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
显示：无；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#菜单{
显示：块；
}
@媒体屏幕和屏幕（最大宽度：760像素）{
/*使下拉链接内联显示*/
保险商实验室{
位置：静态；
显示：无；
}
/*创建垂直间距*/
李{
边缘底部：1px；
}
/*使所有菜单链接全宽*/
ul li，li a{
宽度：100%；
}
/*显示“显示菜单”链接*/
.显示菜单{
显示：块；
}
}
}
部分{
显示：块；
浮动：左；
利润率：10px；
}
导航{
宽度：100%；
高度：40px；
填充：2px；
}
开沟器{
字体大小：120%；
文本对齐：居中；
}