文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

JavaScript实现自适应窗口大小的网页_html/css_WEB-ITnose

php中文网
发布： 2016-06-21 08:54:22
原创
1614人浏览过

  7. login
  9. body{
  10. text-align: left;
  11. background-color: f6f6f6;
  12. background-attachment: fixed;
  13. }
  14. #imgcenter{
  15. position:relative;
  16. height: auto;
  17. width:50%;
  18. left:20%;
  19. top:250px;
  20. }
  21. #center{
  22. position:relative;
  23. height: auto;
  24. width:50%;
  25. left:20%;
  26. top:220px;
  27. }
  28. #account{
  29. position:relative;
  30. height: auto;
  31. left:60%;
  32. top:-110px;
  33. padding:2%;
  34. width:50%;
  35. }
  36. #pwd{
  37. position:relative;
  38. height: auto;
  39. left:60%;
  40. top:-100px;
  41. padding:2%;
  42. width: 50%;
  43. }
  44. #login{
  45. position:relative;
  46. height: auto;
  47. left:60%;
  48. top:-95px;
  49. padding:1%;
  50. width: 25%;
  51. }
  52. #logo{
  53. padding:3%;
  54. width: 50%;
  55. height: auto;
  56. }
  57. #div_forgetpwd{
  58. position:relative;
  59. height: 30%;
  60. left: 90%;
  61. top:-115px;
  62. width: 25%;
  63. font-size: 1pt;
  64. white-space:nowrap;
  65. }
  66. #div_forgetpwd a{
  67. text-decoration: none;
  68. margin: auto;
  69. }
  70. #div_forgetpwd a:hover{
  71. text-decoration: underline;
  72. margin: auto;
  73. }
  74. .clew{
  75. position:relative;
  76. height: 15px;
  77. left:-10%;
  78. top:-80%;
  79. padding:2% 50%;
  80. white-space:nowrap;
  81. color: #ffffd5;
  82. font-weight: bold;
  83. font-family: century gothic, arial;
  84. background: #fcbe47;
  85. border-top: 2px solid #db6e3c;
  86. border-bottom: 2px solid #db6e3c;
  87. }
  91. //error clew
  92. var userflag=0;
  93. var pwdflag=0;
  94. $().ready(function() {
  95. $("form :input").blur(function() {
  96. var $parent = $(this).parent();
  97. $parent.find(".clew").remove();
  98. if($(this).is(".username")) {
  99. if(this.value=="" || this.value.length
  100. var errormsg = "please enter your account.";
  101. $parent.append(""+errormsg+"");
  102. }else
  103. userflag=1;
  104. }
  105. if($(this).is(".password")) {
  106. if(this.value=="" || this.value.length
  107. var errormsg = "please enter your password.";
  108. $parent.append(""+errormsg+"");
  109. }else
  110. pwdflag=1;
  111. }
  112. }).keyup(function() {
  113. $(this).triggerhandler("blur");
  114. }).focus(function() {
  115. $(this).triggerhandler("blur");
  116. });
  117. });
  118. //提交检验
  119. function validate_form(thisform){
  120. with (thisform){
  121. if (userflag==0||pwdflag==0){
  122. username.focus();
  123. return false;
  124. }
  125. }
  126. }
  • class="username">


  • 注册帐号
  • 忘记密码
  • //更改元素css属性
  • function set(){
  • var setimgdiv = document.getelementbyid("imgcenter");
  • setimgdiv.style.top = "150px";
  • setimgdiv.style.left = "36%";
  • var settextdiv = document.getelementbyid("center");
  • settextdiv.style.top = "280px";
  • settextdiv.style.left = "8%";
  • var setlogo=document.getelementbyid("logo");
  • setlogo.style.height="100px";
  • setlogo.style.width="240px";
  • var setaccount=document.getelementbyid("account");
  • setaccount.style.height="15px";
  • setaccount.style.width="240px";
  • var setpwd=document.getelementbyid("pwd");
  • setpwd.style.height="15px";
  • setpwd.style.width="240px";
  • var setlogin=document.getelementbyid("login");
  • setlogin.style.height="25px";
  • setlogin.style.width="100px";
  • var setforgetpwd=document.getelementbyid("div_forgetpwd");
  • setforgetpwd.style.width="100px";
  • setforgetpwd.style.left="100%";
  • }
  • function reset(){
  • var resetimgdiv = document.getelementbyid("imgcenter");
  • resetimgdiv.style.top = "250px";
  • resetimgdiv.style.left = "20%";
  • var resettextdiv = document.getelementbyid("center");
  • resettextdiv.style.top = "220px";
  • resettextdiv.style.left = "20%";
  • var resetlogo=document.getelementbyid("logo");
  • resetlogo.style.height="auto";
  • resetlogo.style.width="50%";
  • var resetaccount=document.getelementbyid("account");
  • resetaccount.style.height="auto";
  • resetaccount.style.width="50%";
  • var resetpwd=document.getelementbyid("pwd");
  • resetpwd.style.height="auto";
  • resetpwd.style.width="50%";
  • var resetlogin=document.getelementbyid("login");
  • resetlogin.style.height="auto";
  • resetlogin.style.width="25%";
  • var resetforgetpwd=document.getelementbyid("div_forgetpwd");
  • resetforgetpwd.style.width="100px";
  • resetforgetpwd.style.left="90%";
  • }
  • function setsizemid(){
  • var setsizemidimgdiv = document.getelementbyid("imgcenter");
  • setsizemidimgdiv.style.top = "150px";
  • setsizemidimgdiv.style.left = "22%";
  • var setsizemidtextdiv = document.getelementbyid("center");
  • setsizemidtextdiv.style.top = "280px";
  • setsizemidtextdiv.style.left = "-35px";
  • var setsizemidlogo=document.getelementbyid("logo");
  • setsizemidlogo.style.height="100px";
  • setsizemidlogo.style.width="240px";
  • var setsizemidaccount=document.getelementbyid("account");
  • setsizemidaccount.style.height="15px";
  • setsizemidaccount.style.width="240px";
  • var setsizemidpwd=document.getelementbyid("pwd");
  • setsizemidpwd.style.height="15px";
  • setsizemidpwd.style.width="240px";
  • var setsizemidlogin=document.getelementbyid("login");
  • setsizemidlogin.style.height="25px";
  • setsizemidlogin.style.width="80px";
  • var setsizemidforgetpwd=document.getelementbyid("div_forgetpwd");
  • setsizemidforgetpwd.style.width="80px";
  • setsizemidforgetpwd.style.left="110%";
  • }
  • function setsizemini(){
  • var setsizeminiimgdiv = document.getelementbyid("imgcenter");
  • setsizeminiimgdiv.style.top = "150px";
  • setsizeminiimgdiv.style.left = "6%";
  • var setsizeminitextdiv = document.getelementbyid("center");
  • setsizeminitextdiv.style.top = "280px";
  • setsizeminitextdiv.style.left = "-60px";
  • var setsizeminilogo=document.getelementbyid("logo");
  • setsizeminilogo.style.height="100px";
  • setsizeminilogo.style.width="240px";
  • var setsizeminiaccount=document.getelementbyid("account");
  • setsizeminiaccount.style.height="15px";
  • setsizeminiaccount.style.width="240px";
  • var setsizeminipwd=document.getelementbyid("pwd");
  • setsizeminipwd.style.height="15px";
  • setsizeminipwd.style.width="240px";
  • var setsizeminilogin=document.getelementbyid("login");
  • setsizeminilogin.style.height="25px";
  • setsizeminilogin.style.width="80px";
  • var setsizeminiforgetpwd=document.getelementbyid("div_forgetpwd");
  • setsizeminiforgetpwd.style.width="80px";
  • setsizeminiforgetpwd.style.left="125%";
  • }
  • //获取当前窗口尺寸
  • var winwidth = 0;
  • var winheight = 0;
  • function finddimensions() //函数：获取尺寸
  • {
  • //获取窗口宽度
  • if (window.innerwidth)
  • winwidth = window.innerwidth;
  • else if ((document.body) && (document.body.clientwidth))
  • winwidth = document.body.clientwidth;
  • //获取窗口高度
  • if (window.innerheight)
  • winheight = window.innerheight;
  • else if ((document.body) && (document.body.clientheight))
  • winheight = document.body.clientheight;
  • //通过深入document内部对body进行检测，获取窗口大小
  • if (document.documentelement && document.documentelement.clientheight && document.documentelement.clientwidth)
  • {
  • winheight = document.documentelement.clientheight;
  • winwidth = document.documentelement.clientwidth;
  • }
  • //结果输出至两个文本框
  • if(winwidth
  • setsizemini();
  • else if(420
  • setsizemid();
  • else if(595
  • set();
  • else
  • reset();
  • }
  • finddimensions();
  • //调用函数，获取数值
  • window.onresize=finddimensions;
    • java速学教程(入门到精通)
    java速学教程(入门到精通)

    java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

    下载
    来源：php中文网
    收藏 点赞
    上一篇：用electron写桌面应用_html/css_WEB-ITnose 下一篇：iOS UIView动画实践（五）：Keyframe Animation_html/css_WEB-ITnose
    本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
    最新问题
    HTML下载链接添加进度条怎么实现 实现HTML下载链接添加进度条的关键在于利用JavaScript和HTML5的FileAPI来监控下载进度。让我们深入探讨如何实现这一功能，并分享一些实际应用中的经验。在开始之前，先回答你的问题：HTML下载链接添加进度条可以通过JavaScript监听XMLHttpRequest对象的progress事件来实现。我们可以利用这个事件来更新进度条的显示，从而让用户实时了解下载进度的变化。现在，让我们详细展开这个话题。在我的职业生涯中，我曾多次遇到需要为下载链接添加进度条的需求。无论是大文件下载还
    2025-06-08 10:30:02
    1000
    HTML表单提交后清空输入框内容怎么操作 可以使用JavaScript在表单提交后通过form.reset()方法清空HTML表单的输入框内容。具体步骤包括：1.在表单的onsubmit事件中调用submitForm函数。2.使用event.preventDefault()阻止表单默认提交行为。3.获取表单元素并处理数据。4.调用form.reset()方法清空表单。
    2025-06-07 08:21:01
    613
    html中h1和h2的区别 一级二级标题的3个关键差异 h1和h2标签在HTML中的三个关键差异是：1.h1用于页面主标题，h2用于子主题；2.h1字体默认比h2大；3.一个页面通常只有一个h1，多个h2用于划分章节。
    2025-06-06 09:15:02
    884
    html中外边距怎么设置 html外边距margin调整技巧 在HTML中设置外边距需要使用CSS。具体方法包括：1.使用通用margin属性设置所有方向的外边距，如margin:20px。2.使用单独的margin属性设置不同方向的外边距，如margin-top:10px;margin-right:20px;margin-bottom:30px;margin-left:40px，或简写为margin:10px20px30px40px。
    2025-06-05 08:21:01
    714
    html中的行内标签有哪些 html行内标签完整列表解析 HTML中的行内标签在网页设计中起着关键作用，它们用于修饰和格式化文本内容，不会自动换行。常见的行内标签包括：1.用于灵活的样式定制；2.用于创建超链接；3.和用于强调文本；4.用于嵌入图像；5.用于创建表单控件；6.用于创建可点击按钮。使用这些标签时应注意语义化、样式与结构分离、无障碍设计、性能优化和表单设计，以提升网页的整体效果和用户体验。
    2025-06-04 08:06:01
    624
    html中tbody标签的作用 表格主体tbody的语义化意义 标签用于定义表格的主体部分，其作用是将表格数据与表头和表尾区分开来，提升表格的语义化和可访问性。使用的好处包括：1.增强可访问性，帮助屏幕阅读器正确识别表格结构；2.便于样式控制，可以对表格主体部分进行单独的样式设置；3.便于数据操作，支持动态增删改查，提高操作效率；4.性能优化，通过JavaScript动态操作内容，提升性能。
    2025-06-03 10:00:02
    860
    HTML导航栏怎么做？nav标签有什么优势？ 使用HTML创建导航栏推荐采用ul+li结构包裹在nav标签内，1.基本结构用ul+li搭建更清晰且方便CSS美化；2.nav标签具备语义化优势，提升SEO和可访问性；3.推荐使用flex布局进行样式处理，实现水平排列与悬停效果；4.需添加aria-label属性并考虑响应式设计适配移动端。
    2025-06-02 10:12:07
    891
    HTML如何实现轮播图？carousel怎么用HTML制作？ 要实现基础轮播图需结合HTML、CSS和JavaScript。首先用HTML搭建结构，外层div容器包含图片列表，默认第一张显示；接着用CSS将图片叠放并隐藏非active图片；再通过JavaScript定时切换active类实现自动播放；最后可添加按钮实现手动切换。步骤清晰，结构为先，样式控制显示，JS实现动态切换，扩展性强。
    2025-05-31 10:03:01
    859
    HTML里怎么插入YouTube视频 在HTML中插入YouTube视频可以通过以下步骤实现：1.使用标签嵌入视频，替换VIDEO_ID为YouTube视频ID。2.采用响应式设计，使用包装div和CSS确保视频在不同设备上保持16:9比例。3.应用懒加载技术，使用IntersectionObserverAPI减少页面加载时间。4.添加视频标题和描述，提升SEO和用户体验。5.考虑用户隐私，提供同意选项并控制自动播放。
    2025-05-30 08:18:02
    190
    怎样在HTML中创建底部导航栏 在HTML中创建底部导航栏使用和标签。1.使用和列出导航链接。2.通过CSS实现响应式设计，如媒体查询调整移动设备显示。3.优化用户体验，确保链接清晰易懂和可访问性。4.使用语义化标签提升SEO效果。5.考虑性能优化，如使用CSSSprites减少HTTP请求。6.使用position:fixed;使导航栏固定在屏幕底部。7.利用z-index和flexbox解决常见显示问题。
    2025-05-29 09:06:02
    611
    相关专题
    更多>
    热门推荐
    开源免费商场系统广告
    热门教程
    更多>
    相关推荐
    热门推荐
    最新课程
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网：公益在线php培训，帮助PHP学习者快速成长！
    关注服务号 技术交流群
    app下载
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部