您的位置：首页 > Web前端 > HTML5

简单的导航分页效果

2017-07-13 12:03 190 查看 
<body>
<div class="wrap" >
<ul>
<li class="section checked">  page1</li>
<li class="section">  page2</li>
</ul>
</div>

<div>
<div class="page page1">
这是第一个分页
</div>

<div class="page page2">
这是第二个分页
</div>

</div>
下面是css
.section{cursor: pointer;border: 1px solid #00a0e9;border-radius: 3px;padding-left: 10px;}.checked{cursor: pointer;border: 1px solid #E45A3A;}.page1 {display: block;width: 500px;margin: 0 auto;}.page2 {width: 500px;margin: 0 auto;display: none;}.wrap ul li {float: left;list-style: none;/*去掉默认的圆点符号*/padding: 10px;margin-left: 10px;}
只是实现最简单的效果，没有做任何美化，望见谅
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html5
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航