zoukankan      html  css  js  c++  java

  • 样式的使用

    样式的使用

    [doc]

    代码

    1. <!DOCTYPE html> 
    2. <html> 
    3. <head lang="en"> 
    4. <meta charset="UTF-8"> 
    5. <title>添加样式</title> 
    6. <!--样式表--> 
    7. <style> 
    8. .Item1{ 
    9. font-size: 2em; 
    10. color: #00FF00; 
    11. background-color: black; 
    12. } 
    13.  
    14. .Item2{ 
    15. font-size: 3em; 
    16. color: #37C2FB; 
    17. background-color: saddlebrown; 
    18. } 
    19. </style> 
    20. <script src="jquery-1.11.1.min.js"></script> 
    21. <script> 
    22. $(document).ready(function(){ 
    23. //设置样式 
    24. /*$("li").eq(2).css("background","red"); 
    25. $("li").eq(3).css({ 
    26. "background":"skyblue", 
    27. });*/ 
    28. //添加样式 
    29. $("li").addClass("Item1"); 
    30. $("li").eq(4).addClass("Item2"); 
    31. //删除样式 
    32. $("li").eq(7).removeClass("Item1"); 
    33. //切换样式 
    34. $("input").click(function(){ 
    35. $("li").eq(6).toggleClass("Item2"); 
    36. }); 
    37. }); 
    38. </script> 
    39. </head> 
    40. <body> 
    41. <input type="button" value="切换样式" id="demo"/> 
    42. <ul > 
    43. <li>样式表的颜色1</li> 
    44. <li>样式表的颜色2</li> 
    45. <li>样式表的颜色3</li> 
    46. <li>样式表的颜色4</li> 
    47. <li>样式表的颜色5</li> 
    48. <li>样式表的颜色6</li> 
    49. <li>样式表的颜色7</li> 
    50. <li>样式表的颜色8</li> 
    51. </ul> 
    52. </body> 
    53. </html> 
    54.  

    效果

    enter description here

    样式的效果.png

    每天叫醒的不是闹钟，而是梦想
  • 相关阅读:
    QML的默认属性default property
    QtCreator下QML翻译
    QML开发常见错误（原）
    qt下的跨目录多工程编译（转）
    git使用笔记
    osgQt支持触摸屏
    Qt资源整理ING
    Visual assint x（转）
    C#开发重用方法
    UDP问题
  • 原文地址：https://www.cnblogs.com/shuiyaodongwu310988929/p/5994447.html
Copyright © 2011-2022 走看看