【百度俱乐部】第一二期作业总结

Author Avatar
YaHei 10月 30, 2014

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

大致设想

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

input text的尺寸调整

  • text是没有width、height属性的
  • 宽度其实可以通过字段size调整
  • 高度可以通过style属性中的字体高度font-size来调整
  • 另外还有style中的padding,可以调整输入框的内边距,不然输入的时候字压着边框太丑

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

做作业的时候忘记练习表格了……所以手码下来……
哇靠!手码表格真是累死了……


列合并:colspan属性

逗比功能:鼠标悬浮事件

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

submit跳动

  • 鼠标悬浮事件Mouseover
  • 在两个分别设置两个submit,让他们不能同时出现,display属性,toggle方法
    起始状态下,左边的dispaly为none
    触发事件后,对两个submit都采用toggle方法

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

  • text输入框value属性的获取和修改
    • 获取:$(“…”).val()方法即可返回表单的字段
    • 修改:$(“…”).attr(“…”,”…”)方法即可将第一个参数匹配的属性修改为第二个参数的内容
  • 但是这个用起来似乎有点麻烦……在百度上看到另外一种解决办法
    • document.#form.#text.value = document.#text.#text.value + “(Don’t touch me!)”;
    • 要注意的是:这里的#form和#text是form标签和input标签的name属性而不是 id 属性!而且这里不需要打井号,如:document.form.text.value

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

  • 跳转
    • 在百度搜索试着搜索aaa,搜索页得到的网址是http://www.baidu.com/baidu?wd=aaa
    • 那么猜测,直接修改网址末尾的aaa为搜索的内容是否可行?结果是可以的……
    • 那么,我们只需要把搜索内容连接到http://www.baidu.com/baidu?wd=末尾作为图片的超链接即可实现
  • 搜索内容的获取
    • 键盘keyup事件
      与其相对的还有一个keydown事件,down是指按下键盘(包括输入法还未把输出到对话框)触发的时间,up是指松开键盘(包括输入法把内容输出到对话框上)触发的时间,
      显然这里要用的是应该是keyup事件
      另外,使用keyup事件不会在不通过键盘输入来修改内容的情况下触发,也就是说,前边用JQ修改输入框内容并不会触发事件,不影响内容的获取
    • 将搜索内容与http://www.baidu.com/baidu?wd=组成的连接作为图片连接的href属性,使用attr("href","...")方法即可

      警告框

  • 使用bootstrap,自己再对字体、尺寸稍作修改即可
  • 但是千万别忘了
    <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
  • display:none
  • show()方法

    注意

    使用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("","");
      });
    });
    
  • 选择器在圆括号内,除了document和this之外都要加双引号,类要加’.’,id要加’#’

  • JQ的内容一定要嵌套在$(document).ready(function(){.....});
  • 语句后边别忘了分号

登陆、注册弹框

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

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();却行不通?!

咳咳,总结——

感觉像是玩上瘾了,居然两天花了八九个小时做这个网页,而且这两天还是很多课不是没课的……
又在第三天花了四五个小时写下这个玩意儿……我也是够拼哒= =
虽然很好玩,做出来也很有成就感……但是………我的眼睛啊!!!!!不知道近视又是加深的几度?!