krpa 发表于 2018-8-20 12:42:17

关于前端的若干问题

问题一：请问以下动画为什么无法运行？

在学习jQ的时候，我照着书上的示例代码敲了一遍，可以没有显示动画效果？为啥？

html代码
<!DOCTYPE HTML>
<html>
    <head>
      <meta charset="utf-8"/>
      <meta name="viewpoint" content="width=device-width,initial-scale=1.0"/>
      <title>事件</title>
      <script src="../jquery-3.3.1.js"></script>
      <link rel="stylesheet" type="text/css" href="事件的css.css"/>
      <link rel="stylesheet" type="text/javascript" href="事件的js.js"/>
    </head>
    <body>
      <div id="panel">
            <div id="H5">
                <h5 class="head">内容示例</h5>
            </div>
            <div class="content">
                adsewfsaravsdaserwdsd<br/>
                dasxawxawedsaxqdwdxwd<br/>
                casdsafdsacasdsxdsdsa<br/>
            </div>
      </div>
    </body>

</html>



js代码
<script type="text/javascript">
            $(function(){
                $("#panel h5.head").(function(){
                  $(this).next("div.content").hide(600);
                },function(){
                  $(this).next("div.content").show(600);
                });
            });
</script>


css代码

#panel{
border:solid 1px red;
padding:100px;
margin-right:900px;

}

.head{
color:white;
background-color:gray;
text-align:center;
}




问题二：请问如何解决图片中的文本溢出问题？

krpa 发表于 2018-8-20 12:43:29

发上来发现字体好大。。。

不二如是 发表于 2018-8-20 13:43:27


1、关于规范，请用英文命名：


2、基于CDN，做了一个jq调用，然后整合你提供的代码：


代码：
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewpoint" content="width=device-width,initial-scale=1.0"/>
    <title>事件</title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <style>

      #panel{
            border:solid 1px red;
            padding:100px;
            margin-right:900px;

      }

      .head{
            color:white;
            background-color:gray;
            text-align:center;
      }

    </style>
</head>
<body>
<div id="panel">
    <div id="H5">
      <h5 class="head">内容示例</h5>
    </div>
    <div class="content">
      adsewfsaravsdaserwdsd<br/>
      dasxawxawedsaxqdwdxwd<br/>
      casdsafdsacasdsxdsdsa<br/>
    </div>
</div>
<script type="text/javascript">
    $(function(){
      $("#panel h5.head").(function(){
            $(this).next("div.content").hide(600);
      },function(){
            $(this).next("div.content").show(600);
      });
    });
</script>
</body>
</html>

3、关于文本溢出，由于你的css中，设置最外层div（#panel）的内边距为固定100px：
padding:100px;

所以当缩小浏览器直到整体页面小于100px时，自动会被“挤”出屏幕外，看不到。

最简单解决文本溢出，就是固定div，为#panel样式设置一个最小宽度：
min-width: 200px;





krpa 发表于 2018-8-21 10:36:00

不二如是 发表于 2018-8-20 13:43
1、关于规范，请用英文命名：




哦哦哦。。。谢谢大神~！
页: [1]
查看完整版本: 关于前端的若干问题