<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type="text/css">
<!--
ul,li { list-style:none}
.wrap { width:100% line-height:2em}
.nav1 { float:left width:10% background:#ccc}
.nav2 { float:left width:10% background:#00cc66}
.nav2 ul { display:none}
.content { float:left width:20% background:#cc0066}
-->
</style>
<script type="text/javascript">
<!--
$(function(){
$(".nav1").find("a").each(function(index){
$(this).click(function(){
$(".nav2").children().css("display","none")
$(".nav2").children().eq(index).css("display","block")
})
})
$(".nav2").find("a").each(function(){
$(this).click(function(){
$(".content").text($(this).text())
})
})
})
//-->
</script>
</head>
<body>
<div class="wrap">
<!--栏目-->
<div class="nav1">
<ul>
<li><a href="#">栏目一</a></li>
<li><a href="#">栏目二</a></li>
<li><a href="#">栏目三</a></li>
<li><a href="#">栏目四</a></li>
<li><a href="#">栏目五</a></li>
</ul></div>
<!--分类-->
<div class="nav2">
<ul>
<li><a href="#">栏目一分类1</a></li>
<li><a href="#">栏目一分类2</a></li>
<li><a href="#">栏目一分类3</a></li>
<li><a href="#">栏目一分类4</a></li>
<li><a href="#">栏目一分类5</a></li>
</ul>
<ul>
<li><a href="#">栏目二分类1</a></li>
<li><a href="#">栏目二分类2</a></li>
<li><a href="#">栏目二分类3</a></li>
<li><a href="#">栏目二分类4</a></li>
<li><a href="#">栏目二分类5</a></li>
</ul>
<ul>
<li><a href="#">栏目三分类1</a></li>
<li><a href="#">栏目三分类2</a></li>
<li><a href="#">栏目三分类3</a></li>
<li><a href="#">栏目三分类4</a></li>
<li><a href="#">栏目三分类5</a></li>
</ul>
<ul>
<li><a href="#">栏目四分类1</a></li>
<li><a href="#">栏目四分类2</a></li>
<li><a href="#">栏目四分类3</a></li>
<li><a href="#">栏目四分类4</a></li>
<li><a href="#">栏目四分类5</a></li>
</ul>
<ul>
<li><a href="#">栏目五分类1</a></li>
<li><a href="#">栏目五分类2</a></li>
<li><a href="#">栏目五分类3</a></li>
<li><a href="#">栏目五分类4</a></li>
<li><a href="#">栏目五分类5</a></li>
</ul></div>
<!--分类内容-->
<div class="content"></div>
</div>
</body>
</html>
不支持font-family属性，也就是说，在UC浏览器你只能看到一种字体；不支持font-szie属性，也就是说，在UC浏览器你只能看到一样大小的字体；
不支持width、height、padding、margin、line-height属性，也就是说，在UC浏览器只能通过p、br等HTML标签来换行以达到字符上下间隔；
不支持固定像素的宽度，100%显示页面，也就是说，在UC浏览器始终将看到的是“满屏的”；
不支持浮动、层叠布局，float和position属性无效，也就是说，在UC浏览器你只能看到“左对齐”。
支持background-color，但不支持background-image，也就是说不支持CSS背景图显示，在UC浏览器你只能看到背景色。
不支持padding margin border line-height strong ul li float
但是，看百度：
2015年7月，UC浏览器发布新版10.6版本，开创第三代浏览器新纪元。
UC浏览器拥有独创的U3内核和云端架构，完美地支持HTML5应用。
如今的UC比起以前好很多，已经可以不用担心不支持的问题了。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）