正文
javascript蒙版,css3蒙版
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
网页设计需要学习什么？
学HTML，必须的。学好这个然后学DIV+CSS，当然要把网页做的好看。必须学会PS,也就是PHOTOSHOP。这两样学会了。就会做一般的静态网站了。如果想做一些动态效果，就得学FLASH。要是想做动态数据，就要学，PHP,ASP,JSP ,.NET中的某种。最重要的还是，HTML CSS 和PS了。这个是基础。
从哪入手，学什么软件，怎么学。
先学会做第一个HTML网页，学DREAMWEAVER做。看一本书，先大概看完，看完后，主要是手动操作，要忘记书，书这东西有时候是好东西，可是你看完后，到操作上了，就要忘记书。大概了解后。就可以直接操作了。不出一个星期你定能学会必要的操作。然后学TABLE做表格。两三天，这个学好了，然后学TABLE+CSS，做漂亮的表格。两三天，这个学好了。学DIV+CSS做网页，最多一个月。DIV+CSS是最高难度的。因为涉及到非常多的兼容仍属，这个你都学会了。就是一个基础前端了。会做网站了。
用案例来学，积极性会很高。建议，直接找一个网页。然后照那个网页的样子，模仿出来。等你能仿出任何网站了，说明你的基本功就到位了。
希望采纳！！
相关问答
Q1: 用JavaScript在PC上预览网页在移动设备上的效果，怎么弄？
可以通过以下代码实现
html
head
script language="JavaScript" src="jquery-1.11.3.min.js" type="text/javascript"/script
script language="JavaScript" type="text/JavaScript"
/**
弹出iframe页面(iframe后面会添加灰色蒙版)
**/
function showIframe(url){
//添加背景遮罩
$("div id='YuFrameMobilePreviewBg' style='cursor:pointer;width:100%;height:100%;background-color: Gray;display:block;z-index:9998;position:absolute;left:0px;top:0px;filter:Alpha(Opacity=30);/* IE */-moz-opacity:0.4;/* Moz + FF */opacity: 0.4; '/").prependTo('body');
$("div id='showMobilePreview'" +
"div class='mobile_preview_header'i class='mobile_preview_header_icon'/i/div" +
"div class='mobile_preview_frame'iframe id='YuFrameMobilePreview' name='YuFrameMobilePreview' /iframe/div" +
"div class='mobile_preview_footer'i class='mobile_preview_footer_icon'/i/div" +
"/div").prependTo('body');
$("#YuFrameMobilePreview").attr("src", url);
//点击背景遮罩移除iframe和背景
$("#YuFrameMobilePreviewBg").click(function() {
$("#showMobilePreview").remove();
$("#YuFrameMobilePreviewBg").remove();
});
}
/script
style type="text/css"
#showMobilePreview {
z-index: 9999;
width: 387px;
height: 768px;
min-height: 396px;
max-height: calc(100vh - 64px);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
text-align: center;
border-radius: 50px;
box-shadow:-10px 10px 30px #333333;
}
.mobile_preview_header {
display: block;
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 387px;
background: #eeeff2;
text-align: center;
line-height: 40px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
}
.mobile_preview_header_icon {
display: inline-block;
width: 65px;
height: 10px;
background: #c8c9cc;
border-radius: 9px;
vertical-align: middle;
margin-top: 18px;
}
.mobile_preview_frame {
width: 375px;
min-height: 294px;
height: 667px;
max-height: calc(100vh - 166px);
top: 40px;
left: 0;
border: 6px solid #eeeff2;
position: relative;
background-color: #fff;
display: block;
}
#YuFrameMobilePreview {
border: none;
width: 375px;
height: 100%;
}
.mobile_preview_footer {
display: block;
position: absolute;
bottom: 0;
left: 0;
height: 52px;
width: 387px;
background: #eeeff2;
text-align: center;
line-height: 45px;
border-bottom-right-radius: 50px;
border-bottom-left-radius: 50px;
}
.mobile_preview_footer_icon {
display: inline-block;
width: 43px;
height: 43px;
background: #c8c9cc;
border-radius: 50%;
vertical-align: middle;
}
#mobilePreview{
background: url("mobile-preview.png") no-repeat;
padding-left: 20px;
color: #bcbdc1;
}
#mobilePreview:hover{
background: url("mobile-preview-hover.png") no-repeat;
padding-left: 20px;
color: #009ddc;
}
/style
/head
body
input type="button" style="content: "\F17c";" onClick="showIframe('')" value="加载"/
hr/
div
span id="mobilePreview" onclick="showIframe('')"手机预览/span
/div
/body
html
Q2: js怎么改变 系统可能不会保存你所做的更改
var a = confirm( "OK?" ) ;
执行了 confirm( "OK?" ) 弹出一个确认框后，javascript 就不再执行，等到点完按钮、返回一个值后，才能完成赋值语句的执行。
想要模拟这个功能，除非能弹出另外一个模态窗口，否则只用 普通的蒙版和 div 层是做不到阻塞 Javascript 的执行的。
修改方法改成：
function Confirm(msg,callback_OK,callback_CANCEL) {
btnok.onclick = function(){
if(callback_OK typeof callback_OK == "function")
callback_OK( true );
close();//你应该有这个功能吧？
}
btncancel.onclick = function(){
if(callback_CANCEL typeof callback_CANCEL== "function")
callback_CANCEL( false );
close();//你应该有这个功能吧？
}
}
这样的话，如果想执行类似这样的功能：
if(confirm( "OK?" )){
okHandlerCode();
}else{
cancelHandlerCode();
}
Confirm( "OK?" , okHandlerCode , cancelHandlerCode );
利用这种方式，就解决了确认对话框的返回值接收的问题：
Q3: 如何在jquery中实现蒙版的效果？？
用animate，animate是用来实现动画效果的，jquery下拉滑动有专门的方法
jQuery 拥有以下滑动方法：
slideDown() 向下滑动
slideUp() 向上滑动
slideToggle() 点一下向下滑动展开，再点一下还原！
