date: 2014/10/30

呃,要用markdown写文章呢差点忘了……

这期作业写了我八九个小时啊,翻阅了好多资料,干脆写份总结算了。下面就按照我做作业的思路、途中遇到的问题及解决方法展开来写吧——


大致设想


首先,模仿百度主页嘛,找张图片,做个输入框,搞个submit的按钮,简单安上导航栏,右上角意思意思搞个“登陆”、“注册”的鬼玩意。


input text的尺寸调整



text和submit之间总存在缝隙


取消缝隙,首先要设置两个元素的margin为0,另外submit默认是有边框的,所以还要设置submit的border为0。但如果将两元素的代码分成两行,则间隙仍不能取消



<input type="text" style="margin:0px">
<input type="submit" style="margin:0px;border:0;background-color:blue">



<input type="text" style="margin:0px"><input type="submit" style="margin:0px;border:0;background-color:blue">


text和submit高低错位


首先考虑用top,bottom属性设置上下留空白解决,但是无论怎么改变值都没有变化

查过资料后知道,设置left,right,top,bottom前需要设置position


position有五种值:

static(默认):不定位

relative:相对于块

absolute:相对于页面

fixed:相对于视窗

inherit:继承父元素的值


栅格系统


我直接在<body></body>中加入


<div class="container">
    <div class="row">
        <div class="col-md-1">...</div>
        <div class="col-md-offset-1">...</div>
    </div>  
</div>


结果什么都没发生!!!

后来才知道,是忘了<link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">……呵……呵……简直逗比~


说道栅格系统,顺便截一段资料过来吧:

栅格系统  bootstrap

  • 行列必须包含在.container里
  • 列(.col-xx-xx)必须包含在行(.row)里
超小屏幕 手机( 小屏幕 平板 (>=768px) 中等屏幕 桌面显示器 (>=992px) 大屏幕 大桌面显示器 (>=1200px)
栅格系统行为总是水平开始是堆叠在一起的,当大于这些阈值时将变为水平排列C
.container最大宽度None(自动)750px970px1170px
类前缀.col-xs-.col-sm-.col-md-.col-lg-
列(column)数12
最大列宽自动~62px~81px~97px
槽(gutter)宽30px(每列左右均有15px)
可嵌套
偏移(offsets)
列排序


逗比功能:鼠标悬浮事件


效果:鼠标移到submit上,submit会自动跳到输入框的另外一侧,就是不给你点,还要在输入框上出现(don't touch me!),但是不要影响搜索!要搜索的话只能点击图片,为了别太坑还得做一个小小的提示框,但不能太大——简直逗比的我……


submit跳动



在输入框中出现don't touch me



点击图片自动跳转到百度搜索



警告框



注意


使用JQ的格式——

注意:fuction紧跟后面只有一个右括号

ready的右括号在最后边,中间的代码即花括号的内容是fuction的内容


$(document).ready**<font color="red">(</font>**function**<font color="green">()</font>**{       
</br>
}**<font color="red">)</font>**;
</br>   
$(document).ready(function(){
    $("...").click(function(){
        $("...").attr("","");
    });
});



登陆、注册弹框


在百度搜到一种遮罩式弹框的模板


jQuery+css+html实现页面遮罩弹出框

具体代码如下:


CSS部分:


body { 
    font-family:Arial, Helvetica, sans-serif; 
    font-size:12px; 
    margin:0; 
} 
#main { 
    height:1800px; 
    padding-top:90px;   //打开弹窗的按钮
    text-align:center; 
} 
#fullbg { 
    background-color:gray; 
    left:0; 
    opacity:0.5;        //背景设置为灰色
    position:absolute; 
    top:0; 
    z-index:3; 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity:0.5; 
} 
#dialog { 
    background-color:#fff; 
    border:5px solid rgba(0,0,0, 0.4); 
    height:400px; 
    left:50%; 
    margin:-200px 0 0 -200px; 
    padding:1px; 
    position:fixed !important; //弹出的浮动对话框 
    position:absolute; 
    top:50%; 
    width:400px; 
    z-index:5; 
    border-radius:5px; 
    display:none; 
} 
dialog p { 
    margin:0 0 12px; 
    height:24px; 
    line-height:24px; 
    background:#CCCCCC; 
} 
#dialog p.close { 
    text-align:right; 
    padding-right:10px; 
} 
#dialog p.close a { 
    color:#fff; 
    text-decoration:none; 
}


HTML部分:


<div id="main"><a href="javascript:showBg();">点击这里查看效果</a> 
    <div id="fullbg"></div> 
    <div id="dialog"> 
        <p class="close"><a href="#" onclick="closeBg();">关闭</a>  
        <div>正在加载,请稍后....</div> 
    </div> 
</div>


JQ部分:


<script type="text/javascript">
    //显示灰色 jQuery 遮罩层
    function showBg() {
        var bh = $("body").height();
        var bw = $("body").width();
        $("#fullbg").css({
            height:bh,
            width:bw,
            display:"block"
        });
        $("#dialog").show();
    }
    //关闭灰色 jQuery 遮罩
    function closeBg() {
        $("#fullbg,#dialog").hide();
    }
</script>


只要稍微修改一些数值就可以直接拿来用啦!!


第二个弹框


但是……直接套用模板,把html再复制一份企图创建第二个弹框就出现问题了,两个按钮弹出的是同一个框,咋办咧?

观察一下代码,发现JQ部分的$("#dialog").show();语句是对id为dialog的操作,如果在html里直接复制了第一个弹框,id都为dialog,show只为作用于第一个匹配项………    

如果想要第二个弹框,就得让两个弹框的id不同,改为dialog1和dialog2单击后调用两个不一样的函数,也就是简单的复制一下showBg()函数,并且改为showBg1()和showBg2,并在css部分做出相应的修改就可以啦~


模态框


上面这个弹框太low了,其实bootstrap已经给我们提供了一个模态框的组件,方便又好看

但是偶尔会出现一些奇怪的bug…………


给鼠标悬浮在submit上的时候加个音频


嘿嘿,逗比功能就是拿来搞怪的,既然如此干嘛不个它加个笑声的音频呢?


找到一个简短的小黄人笑声的音频


添加一个<audio>标签


controls属性:如果不设置的话,默认不显示播放器;如果设置为controls="controls"则显示播放器

play()方法:让指定的播放器播放音频

具体代码如下:


html部分:


<audio id="laugh">
    <source src="..." type="audio/mpeg">
</audio>


JQ部分:(插入在submit的mouseover事件下)


laugh.play();


奇怪的是!这里要直接对这个对象使用方法,id不加井号;

$("#laugh").play();却行不通?!


咳咳,总结——


感觉像是玩上瘾了,居然两天花了八九个小时做这个网页,而且这两天还是很多课不是没课的……

又在第三天花了四五个小时写下这个玩意儿……我也是够拼哒= =

虽然很好玩,做出来也很有成就感……但是………我的眼睛啊!!!!!不知道近视又是加深的几度?!