javascript、css、html来制作交互式网页的一些必备技巧

media query 媒体查询

媒体查询即根据媒体的类型、变化等更改网页调用的css样式，从而达到与用户实现交互的功能。
首先要明白的2个概念，媒体类型和媒体特性：
媒体类型（media type）：常见的媒体类型有，screen、all和print，w3c总共列出了10种－w3c media，平时我们主要使用的也就screen和all。
媒体特性（media query）：媒体特性是由媒体类型（条件）和样式（结果）来构成的，常见的媒体特性包括color、width和height等，在w3c上一共列出了13种媒体特性。
先看常见的type引入方式，直接上代码：

<p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;"> <link rel="stylesheet" type="text/css" href="jq.css" media="only screen and (max-width:600px)"/></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;"> <style></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;">@media screen and (min-width:600px){</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;">.body{</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;">background:red;</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;">}</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;">}</p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;"></style></p><p style="margin-top: 0px; margin-bottom: 0px; font-size: 11px; line-height: normal; font-family: Helvetica; -webkit-text-stroke-color: rgb(0, 0, 0); -webkit-text-stroke-width: initial;"></head></p><div>
</div>

如上的link标签实现了在screen的width小于等于480px时调用jq.css文件，而style标签里的@media实现了在width大于480px时调用｛｝里定义的样式。当我们在同一文件夹里再写一个名为jq的css文件时，内容为 body｛background：blue｝，就可以实现交互效果－当浏览器宽度缩小到600px时，颜色由红变蓝。
这时你大概也已经猜到媒体查询的使用有2种方法了，一是通过<link>标签直接在head里实现引用，二是通过在<style>里添加@media注解来实现引用，而区别是link标签一般用来引入css文件，@media一般用来写内嵌式样式，其实还有其他的引入方式，但目前大多数都使用这2种方法，w3c里可以查到剩余的用法。

hover选择器

hover选择器是通过选择鼠标指针浮在上面的元素，来为该元素设置样式，再加上与之前元素式样的配合，这样就可以直接实现很多漂亮的设计，直接上代码；

<style>
div{
width:100px;
height:100px;
color:red;
transition:width 2s;
}
div:hover{
width:300px;
}
</style>

这样实现的是当鼠标放在这个红色的div块上时，它就会在2s内逐渐变成宽为300px的块。
transition属性是实现过渡效果，可以设置4个过渡属性：transition-property 、transition-duration 、transition-timing-function 、transition-delay，具体用法详见w3c
transition属性。

巧用Jquery选择器

如果页面中有以下代码：

<span style="font-family: Verdana, Arial, 宋体; background-color: rgb(255, 255, 255);"></span><pre name="code" class="javascript"><div class="content" id="toadd">
<div class="leftBox"></div>
<div class="middle1Box"></div>
<div class="middle2Box"></div>
<div class="rightBox"></div>

</div>
<div id="a1" onclick="change()">to change</div>

那么我们可以通过div里面的id和class来选择该div元素并实现页面的交互
如果我们定义这样一个函数

function click（）｛
a1.innerHTML="changed"
｝

那么当我们按下他的时候文本就会由to change变成changed
如果我们定义这样一个函数

function click（）｛
$(".rightBox").text("text");
｝

那么在按下这个tochange的时候，class为rightBox的div里面的内容就会变为text
如果我们写这样一个函数

function click（）｛
$(".rightBox").append("<div class='added'>text</div>");
｝

那么在按下tochange的时候 rightBox的区域酒会有一行文本为text 而它所在的div的class为added 我们可以通过这一class来对他之间进行操作；

如果刚刚我们是这样写的

function click（）｛
$(".rightBox").append("<img src='added.jpg'></img>");
｝
function changewidth(){
$("img").attr("width","300px");
}

那么这个class为rightBox的idv里会出现一个图片，当我们再为函数changewidth（）添加一个相应组件的时候，一旦触发这一函数，该图片的宽度就会变为300px。