zoukankan      html  css  js  c++  java
  • 原生态js展开高度自适应100%


    <!
    DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title>Document</title> <style type="text/css"> *{margin: 0; padding: 0;} body{max-width: 640px; margin: 0 auto; background-color: #ddd; font:14px/1.4 "Microsoft Yahei",Arial,Helvetica,sans-serif;} a{text-decoration: none; color: #333;} .friendship{ overflow: hidden; position: relative; height: 55px; background-color: #fff; } .friendship a{ float: left; display: block; margin: 5px; } .friendship i{ position: absolute; bottom: 10px; right: 10px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top:10px solid #0066cc; cursor: pointer;} .f_up{ transform:rotate(180deg); -ms-transform:rotate(180deg); -moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); -o-transform:rotate(180deg); } </style> </head> <body> <div class="friendship" id="friendship"> <i class="f_down" onclick="var obj_link=document.getElementById('friendship');this.className=='f_up'?(this.className='f_down',obj_link.style.height='55px'):(this.className='f_up',obj_link.style.height='auto');"></i> <a href="#">百度</a> <a href="#">淘宝</a> <a href="#">京东</a> <a href="#">第一星座</a> <a href="#">付费算命</a> <a href="#">取名网</a> <a href="#">爱花卉</a> <a href="#">福缘殿</a> <a href="#">水晶物语</a> <a href="#">命里网</a> <a href="#">百度</a> <a href="#">淘宝</a> <a href="#">京东</a> <a href="#">第一星座</a> <a href="#">付费算命</a> <a href="#">取名网</a> <a href="#">爱花卉</a> <a href="#">福缘殿</a> <a href="#">水晶物语</a> <a href="#">命里网</a> <a href="#">百度</a> <a href="#">淘宝</a> <a href="#">京东</a> <a href="#">第一星座</a> <a href="#">付费算命</a> <a href="#">取名网</a> <a href="#">爱花卉</a> <a href="#">福缘殿</a> <a href="#">水晶物语</a> <a href="#">命里网</a> <a href="#">百度</a> <a href="#">淘宝</a> <a href="#">京东</a> <a href="#">第一星座</a> <a href="#">付费算命</a> <a href="#">取名网</a> <a href="#">爱花卉</a> <a href="#">福缘殿</a> <a href="#">水晶物语</a> <a href="#">命里网</a> </div> </body> </html>

    效果如图:

    展开后

    如果文章中有不对之处,随时欢迎您的纠正~~ 

  • 相关阅读:
    udp用户数据报协议
    java调用url
    mybatis中的#和$的区别
    sun.misc.BASE64Encoder图片编码,并在页面显示
    oracle查看列数据类型
    MyBatis传入多个参数的问题
    ajax详解
    Comparable和Comparator的区别
    谈谈hashcode和equals的用法
    从为什么String=String谈到StringBuilder和StringBuffer
  • 原文地址:https://www.cnblogs.com/huanghuali/p/6489180.html
Copyright © 2011-2022 走看看