引言
作为一名web开发人员，前端知识是必不可少的，页面布局，浏览器兼容性，js，jQuery，异步调用及CSS样式等等。现在最流行的h5,懂得h5之后，PC端和移动端都轻松搞定，音频视频处理等等，比之前的h4方便很多，速度和性能提高很多。
之前一直做后端，前端的知识接触的比较少，虽然有时候都是模块开发，前端和后台都要设计，但是那些对前端要求不高的。最近做一个智慧城市项目，客户对前端要求很多的，自己这次把自己安排到主要进行前端设计这一块，很久没有写前端东西了，突然感觉生疏了。通过这个项目，又从新开始拿起来我的前端的知识，在开发过程中遇到了很多问题，虽然都是基础性的问题，但是这些也是大家最常见的一些问题。也许大家都觉得简单，就不记住了，都是用的时候去查，但是这样浪费浪费时间的。工作之余整理了一下这几天遇到的一些问题，都是一些简单的前端问题，越是简单的东西越是容易被大家忽略的，空闲整理一下记录下来。
一、页面自动刷新
1、在HTML头地方添加<meta http-equiv="refresh" content="5"> 这样一行代码，页面就会定时刷新。content是设置多长时间刷新一次
2、在页面中使用js设置一个时间间隔，调用刷新函数refresh。 setInterval("refresh();", 5000); --5秒刷新一次
二、背景图随着屏幕变化而变化
通过CSS设置：
body {
background:url(‘img/index/bk.jpg‘) no-repeat;
background-size:100% 100%;
background-position:center center;
background-size:cover;
background-attachment:fixed;
}
三、页面滚动字幕
<div id="main" style="width:500px;height:500px;background-color:gray;border:1px solid;">
<div id="d1"><marquee scrollamount=2; style="width:100%;">向左滚动</marquee></div>
<div id="d2"><marquee scrollamount=2 style="width:100%;"><a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d3"><marquee scrollamount=2 style="width:100%;" onmouseover=stop() onmouseout=start()>鼠标放在文字上停止滚动</marquee></div>
<div id="d4"><marquee scrollamount=2 style="width:100%;" behavior=alternate>来回移动</marquee></div>
<div id="d5"><marquee scrollamount=2 style="width:100%;height:200px;" direction=up>·上下滚动<br>·调用了JavaScript代码<br>·可以点击链接<p>·<a href="http://www.baidu.com">百度</a></marquee></div>
<div id="d6"><marquee scrollamount=2 style="width:100%;"><a style="color:#CC6600">颜色设置</a></marquee></div>
</div>
四、消息弹出框，在右边底部显示
以下是message.js文件的代码：
(function (jQuery) { /* * jQuery Plugin - Messager * Author: corrie Mail: corrie@sina.com Homepage: www.corrie.net.cn * Copyright (c) 2008 corrie.net.cn * @license http://www.gnu.org/licenses/gpl.html [GNU General Public License] * * $Date: 2008-08-30 * $Vesion: 1.1 @ how to use and example: Please Open demo.html */ this.version = ‘@1.1‘; this.layer = { ‘width‘: 200, ‘height‘: 100 }; this.title = ‘信息提示‘; this.time = 114000; this.anims = { ‘type‘: ‘slide‘, ‘speed‘: 600 }; this.inits = function (title, text) { if ($("#message").is("div")) { return; } $(document.body).prepend(‘<div id="message" style="border:#b9c9ef 1px solid;z-index:100;width:‘ + this.layer.width + ‘px;height:‘ + this.layer.height + ‘px;position:absolute; display:none;background:#cfdef4; bottom:0; right:0; overflow:hidden;"><div style="border:1px solid #fff;border-bottom:none;width:100%;height:25px;font-size:12px;overflow:hidden;color:#1f336b;"><span id="message_close" style="float:right;padding:5px 0 5px 0;width:16px;line-height:auto;color:red;font-size:12px;font-weight:bold;text-align:center;cursor:pointer;overflow:hidden;">×</span><div style="padding:5px 0 5px 5px;width:100px;line-height:18px;text-align:left;overflow:hidden;">‘ + title + ‘</div><div style="clear:both;"></div></div> <div style="padding-bottom:5px;border:1px solid #fff;border-top:none;width:100%;height:auto;font-size:12px;"><div id="message_content" style="margin:0 5px 0 5px;border:#b9c9ef 1px solid;padding:10px 0 10px 5px;font-size:12px;width:‘ + (this.layer.width - 17) + ‘px;height:‘ + (this.layer.height - 50) + ‘px;color:#1f336b;text-align:left;overflow:hidden;">‘ + text + ‘</div></div></div>‘); }; this.show = function (title, text, time) { if ($("#message").is("div")) { return; } if (title == 0 || !title) title = this.title; this.inits(title, text); if (time) this.time = time; switch (this.anims.type) { case ‘slide‘: $("#message").slideDown(this.anims.speed); break; case ‘fade‘: $("#message").fadeIn(this.anims.speed); break; case ‘show‘: $("#message").show(this.anims.speed); break; default: $("#message").slideDown(this.anims.speed); break; } $("#message_close").click(function () { setTimeout(‘this.close()‘, 1); }); //$("#message").slideDown(‘slow‘); this.rmmessage(this.time); }; this.lays = function (width, height) { if ($("#message").is("div")) { return; } if (width != 0 && width) this.layer.width = width; if (height != 0 && height) this.layer.height = height; } this.anim = function (type, speed) { if ($("#message").is("div")) { return; } if (type != 0 && type) this.anims.type = type; if (speed != 0 && speed) { switch (speed) { case ‘slow‘:; break; case ‘fast‘: this.anims.speed = 200; break; case ‘normal‘: this.anims.speed = 400; break; default: this.anims.speed = speed; } } } this.rmmessage = function (time) { setTimeout(‘this.close()‘, time); //setTimeout(‘$("#message").remove()‘, time+1000); }; this.close = function () { switch (this.anims.type) { case ‘slide‘: $("#message").slideUp(this.anims.speed); break; case ‘fade‘: $("#message").fadeOut(this.anims.speed); break; case ‘show‘: $("#message").hide(this.anims.speed); break; default: $("#message").slideUp(this.anims.speed); break; }; setTimeout(‘$("#message").remove();‘, this.anims.speed); this.original(); }; this.original = function () { this.layer = { ‘width‘: 200, ‘height‘: 100 }; this.title = ‘信息提示‘; this.time = 114000; this.anims = { ‘type‘: ‘slide‘, ‘speed‘: 600 }; }; jQuery.messager = this; return jQuery; })(jQuery)
下面是demo：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title></title> 6 <script type="text/javascript" src="js/jquery.min.js"></script> 7 <script type="text/javascript" src="js/Message.js"></script> 8 <script type="text/javascript"> 9 function GetMessage() { 10 $.ajax({ 11 type: "POST", 12 url: "Ashx/GetMessage.ashx", 13 data: "", 14 //出错处理 15 error: function () { 16 alert("网络出现故障!请重试!"); 17 }, 18 //发送前事件 19 beforeSend: function () { 20 }, 21 //成功后事件 22 success: function (data) { 23 if (data != null && data != "") { 24 $.messager.lays(350, 300); 25 $.messager.show(‘<font style="color:red;">智慧城市报警提示</font>‘, ‘<font style="font-size:12px; text-align:left;color:green;">‘ + unescape(data) + ‘</font>‘); 26 } 27 } 28 }); 29 } 30 setInterval("GetMessage();", 5000);//设定秒调用一次 31 </script> 32 </head> 33 <body> 34 </body> 35 </html>
四、Div的布局设计
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <script type="text/javascript" src="js/jquery.min.js"></script> 6 <title>主页-背景随着屏幕大小改变</title> 7 <style type="text/css"> 8 body { 9 background:url(‘img/index/bk.jpg‘) no-repeat; 10 background-size:100% 100%; 11 background-position:center center; 12 background-size:cover; 13 background-attachment:fixed; 14 } 15 #div_top { 16 width:100%; 17 height:50px; 18 } 19 #div_center { 20 width:100%; 21 height:90%; 22 margin-top:100px; 23 float:left; 24 } 25 #div_left { 26 width:45%; 27 height:100%; 28 margin-left:4%; 29 float:left; 30 } 31 #div_right { 32 width:45%; 33 height:100%; 34 margin-left:3%; 35 float:left; 36 } 37 </style> 38 </head> 39 <body> 40 <div id="main"> 41 <div id="div_top"> 42 <img alt="logo" src="img/index/logo.png" /> 43 </div> 44 <div id="div_center"> 45 <div id="div_left"> 46 <div id="div_left_row1"> 47 <img alt="zhzk" src="img/index/zhqk.png" /> 48 <img alt="szyy" src="img/index/szyy.png" /> 49 </div> 50 <div id="div_left_row2"> 51 <img alt="wyfw" src="img/index/wyfw.png" /> 52 <img alt="jfsbzt" src="img/index/jfsbzt.png" /> 53 </div> 54 <div id="div_left_row3" > 55 <img alt="xtgl" src="img/index/xtgl.png" /> 56 </div> 57 </div> 58 <div id="div_right"> 59 <div id="div_right_row1"> 60 <img alt="crk" src="img/index/crk.png" /> 61 <img alt="fjdc" src="img/index/fjdc.png" /> 62 </div> 63 <div id="div_right_row2"> 64 <img alt="rqbj" src="img/index/rqmj.png" /> 65 <img alt="tcc" src="img/index/tcc.png" /> 66 </div> 67 <div id="div_right_row3"> 68 <img alt="dzxg" src="img/index/dzxg.png" /> 69 <img alt="lymj" src="img/index/lymj.png" /> 70 <img alt="spjk" src="img/index/spjk.png" /> 71 </div> 72 </div> 73 </div> 74 </div> 75 </body> 76 </html>
运行效果：这里的背景设置的全屏的，还有div使用百分比，无论屏幕大小多少，分辨率多少，怎么缩放，布局不会改变，位置不会被移动，永远全屏显示。
原文：http://www.cnblogs.com/dannyhaospace/p/6287531.html
