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,js,jq之后做网页心得

经过5天的快速学习之后,我开始学着做网页了,有一些心得体会,在这里记录一下。   快速学习只是为了知道在真正实战的时候,你可以知道你想要的东西到底在哪里,这样就可以快速地进行查找到你所需要的东西。快...
  • Xu_taige
  • Xu_taige
  • 2017年07月17日 15:46
  • 756

html+css的小技巧

鼠标经过的技巧: ================================================= CSS实现鼠标移动到图片,更换图片 *{ m...
  • zurich1979
  • zurich1979
  • 2014年08月01日 14:18
  • 1343

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

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

制作一张简单的网页(HTML+CSS+JS) 【2】

在上一篇文章中,我总结了一下HTML,这一篇我把CSS简单做一下归纳,使网页变得富有美感。 一....
  • Shiwy_ab
  • Shiwy_ab
  • 2017年02月07日 13:14
  • 1537

制作一张简单的网页(HTML+CSS+JS) 【3】

前面两篇文章写了HTML和CSS,接下来这篇我把我学到的JavaScript,做一下简单的总结。如果我把一张网页比作是一幢大楼,那么HTML就是大楼的根基和基本骨架,CSS就是使大楼宏伟的一些装饰物,...
  • Shiwy_ab
  • Shiwy_ab
  • 2017年02月10日 12:05
  • 1772

《JavaScript & jQuery交互式Web前端开发》之JavaScript基础指令

在本节中,你将开始学习阅读和编写JavaScript代码,还将学习如何编写Web浏览器能够遵照执行的指令。在开始学习后面章节中的更复杂的概念之前,我们先学习语言的一些核心部分,然后看看如何使用它们来编...
  • qinghuawenkang
  • qinghuawenkang
  • 2015年08月21日 09:40
  • 6706

使用html和CSS进行网页网站设计 -- 简明步骤

网页制作流程: 1. 心中有规划,网站的骨架结构,页面布局layout. 2. 创建一个用于创建模板dwt的html页: main.html 3. 制作main.html: (1) 在ht...
  • sonictl
  • sonictl
  • 2013年09月30日 23:42
  • 2167

CSS的一些经典技巧

CSS字体属性简写规则 一般用CSS设定字体属性是这样做的: 1 font-weight: bold; 2 font-style: italic; ...
  • tyler1108
  • tyler1108
  • 2013年08月13日 13:14
  • 816

使用html和css制作水平导航栏nav

使用html和css制作水平导航栏nav的方法及其效果: 1、li设置float:left; (1)代码片段:... *{ margin:0; ...
  • aSuncat
  • aSuncat
  • 2016年07月09日 13:48
  • 9668

前端学习第三弹:利用div+css制作个人简历

尝试用纯html制作简历,但是显得过于死板,参数设置不灵活,由于刚刚接触这一块,从网上找了很多资源,先输出后输入,通过一个具体的例子查缺补漏,这样学起来更有劲头也更具效率。        具体代码如下...
  • u014483914
  • u014483914
  • 2017年10月07日 16:02
  • 735
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript、css、html来制作交互式网页的一些必备技巧
举报原因:
原因补充:

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