• 简单的HTML选项卡效果


    <style type="text/css">
    .box{ 200px;height: 30px;background: #0000FF;color: #FFFFFF;margin: 0 auto;line-height: 30px;text-align: center;}
    body{text-align: center;}
    #ul{display: inline-block;background: #CCCCCC;overflow: visible;position: relative; list-style:none; padding:0; margin:0;}
    #ul>li{ 120px;height: 40px;float: left;line-height: 40px;text-align: 40px;}
    #ul>li>div{ 600px;height: 300px;background: #D92D37;display: none;font-size: 20px;color: #FFFFFF;text-align: center;line-height: 300px;}
    #ul>li:hover>div{display: block;position: absolute;left: 0px;top: 40px;}
    #ul>.one div{display: block;}
    #ul>.one:hover{background: #666666;}
    #ul>.two:hover{background: #666666;}
    #ul>.three:hover{background: #666666;}
    #ul>.fore:hover{background: #666666;}
    #ul>.five:hover{background: #666666;}
    </style>
    <ul id="ul">
    <li class="one"><span>1</span><div>第一</div></li>
    <li class="two"><span>2</span><div>第二</div></li>
    <li class="three"><span>3</span><div>第三</div></li>
    <li class="fore"><span>4</span><div>第四</div></li>
    <li class="five"><span>5</span><div>第五</div></li>
    </ul>
    <scritp></scritp>

  • 相关阅读:
    一. js高级(1)-面向对象编程
    tips01- 定位
    h5c3 part6 flex
    h5c3 part5 background and transform
    template and pagination
    h5c3 part4
    h5c3 part3
    h5c3 part2
    h5c3 part1
    学习博客
  • 原文地址:https://www.cnblogs.com/ince/p/9375002.html
Copyright © 2020-2023  润新知