设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 关于前端的若干问题
返回列表 发新帖
查看: 1775|回复: 3

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

[复制链接]
krpa
发表于 2018-8-20 12:42:17 | 显示全部楼层 |阅读模式

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

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

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

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

html代码
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <meta name="viewpoint" content="width=device-width,initial-scale=1.0"/>
  6.         <title>事件</title>
  7.         <script src="../jquery-3.3.1.js"></script>
  8.         <link rel="stylesheet" type="text/css" href="事件的css.css"/>
  9.         <link rel="stylesheet" type="text/javascript" href="事件的js.js"/>
  10.     </head>
  11.     <body>
  12.         <div id="panel">
  13.             <div id="H5">
  14.                 <h5 class="head">内容示例</h5>
  15.             </div>
  16.             <div class="content">
  17.                 adsewfsaravsdaserwdsd<br/>
  18.                 dasxawxawedsaxqdwdxwd<br/>
  19.                 casdsafdsacasdsxdsdsa<br/>
  20.             </div>
  21.         </div>
  22.     </body>

  24. </html>
复制代码




js代码
  1. <script type="text/javascript">
  2.             $(function(){
  3.                 $("#panel h5.head").(function(){
  4.                     $(this).next("div.content").hide(600);
  5.                 },function(){
  6.                     $(this).next("div.content").show(600);
  7.                 });
  8.             });
  9. </script>
复制代码



css代码

  2. #panel{
  3. border:solid 1px red;
  4. padding:100px;
  5. margin-right:900px;

  7. }

  9. .head{
  10. color:white;
  11. background-color:gray;
  12. text-align:center;
  13. }
复制代码




问题二：请问如何解决图片中的文本溢出问题？
最佳答案
月排行榜 / 总排行榜
不二如是
2018-8-20 13:43:27

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


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


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

  10.         #panel{
  11.             border:solid 1px red;
  12.             padding:100px;
  13.             margin-right:900px;

  15.         }

  17.         .head{
  18.             color:white;
  19.             background-color:gray;
  20.             text-align:center;
  21.         }

  23.     </style>
  24. </head>
  25. <body>
  26. <div id="panel">
  27.     <div id="H5">
  28.         <h5 class="head">内容示例</h5>
  29.     </div>
  30.     <div class="content">
  31.         adsewfsaravsdaserwdsd<br/>
  32.         dasxawxawedsaxqdwdxwd<br/>
  33.         casdsafdsacasdsxdsdsa<br/>
  34.     </div>
  35. </div>
  36. <script type="text/javascript">
  37.     $(function(){
  38.         $("#panel h5.head").(function(){
  39.             $(this).next("div.content").hide(600);
  40.         },function(){
  41.             $(this).next("div.content").show(600);
  42.         });
  43.     });
  44. </script>
  45. </body>
  46. </html>
复制代码


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


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

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

Aug-20-2018 13-42-48.gif





全屏情况下的div

全屏情况下的div

缩小窗口后的div

缩小窗口后的div
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

krpa
 楼主| 发表于 2018-8-20 12:43:29 | 显示全部楼层
发上来发现字体好大。。。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

不二如是
发表于 2018-8-20 13:43:27 | 显示全部楼层    本楼为最佳答案   

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


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


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

  10.         #panel{
  11.             border:solid 1px red;
  12.             padding:100px;
  13.             margin-right:900px;

  15.         }

  17.         .head{
  18.             color:white;
  19.             background-color:gray;
  20.             text-align:center;
  21.         }

  23.     </style>
  24. </head>
  25. <body>
  26. <div id="panel">
  27.     <div id="H5">
  28.         <h5 class="head">内容示例</h5>
  29.     </div>
  30.     <div class="content">
  31.         adsewfsaravsdaserwdsd<br/>
  32.         dasxawxawedsaxqdwdxwd<br/>
  33.         casdsafdsacasdsxdsdsa<br/>
  34.     </div>
  35. </div>
  36. <script type="text/javascript">
  37.     $(function(){
  38.         $("#panel h5.head").(function(){
  39.             $(this).next("div.content").hide(600);
  40.         },function(){
  41.             $(this).next("div.content").show(600);
  42.         });
  43.     });
  44. </script>
  45. </body>
  46. </html>
复制代码


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


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

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

Aug-20-2018 13-42-48.gif





想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

krpa
 楼主| 发表于 2018-8-21 10:36:00 | 显示全部楼层
不二如是 发表于 2018-8-20 13:43
1、关于规范，请用英文命名：

哦哦哦。。。谢谢大神~！
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-4-20 01:37

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表