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

原创 2015年11月19日 13:45:25

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。



韩顺平_轻松搞定网页设计(html+css+javascript)_第23讲_js三大流程控制(顺序流程、分支控制、循环控制)_js调式技巧_学习笔记_源代码图解_PPT文档整理

文西马龙:http://blog.csdn.net/wenximalong/ js基本语法——三大流程控制 循环控制 听其名而知其意,就是让你的代码可以循环的执行。 案例: 编写一个程序...

网页设计高手必备:HTML、CSS、Javascript教程资料

网页设计高手必备:HTML、CSS、Javascript教程资料     网页设计HTML篇 HTML是目前最流行的网页制作语言。互联网中的网页大多数都是使用HTML格式展示在...
  • Li_soso
  • Li_soso
  • 2013年01月21日 13:22
  • 1421

使用HTML5+CSS3+JavaScript制作网页游戏的流程

这几天学习网页前端每天都有所收获,下面来分享一下用H5C3+JS开发网页小游戏的流程,供大家学习、参考,也为了是自己在以后的日子里不会忘记。 所谓玩游戏,实际上是另一种形式的人机交互,是人机交...

html+css网页布局技巧积累

html+css容易忘记的知识点整理
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript、css、html来制作交互式网页的一些必备技巧
举报原因:
原因补充:

(最多只允许输入30个字)