[已解决]关于前端的若干问题

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

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

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

在学习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;
}

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

最佳答案

月排行榜 / 总排行榜

不二如是

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-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、关于规范，请用英文命名：

哦哦哦。。。谢谢大神~！

账号		自动登录	找回密码
密码			立即注册