js预热

一、 HTML基础
1. Web 浏览器的作用是读取 HTML 文档,并以网页的形式显示出它们。浏览器不会显示 HTML 标签,而是使用标签来解释页面的内容
2. 框架
<frameset cols="25%,50%,25%">//垂直框架
    //rows="25%,50%,25%"水平框架
  <frame src="/example/html/frame_a.html">
  <frame src="/example/html/frame_b.html">
  <frame src="/example/html/frame_c.html">
</frameset>
3. http://www.w3school.com.cn/html/html_quick.aspHTML快速参考手册
4. XHTML 是以 XML 格式编写的 HTML
XHTML 指的是可扩展超文本标记语言
XHTML 是更严格更纯净的 HTML 版本
5. HTML 被设计用来显示数据
XML 被设计用来传输和存储数据
6. 
二、 CSS基础
1.
 
2.
 
3. CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。
4.   outline 轮廓 在border外面 突出元素
5. 外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并 后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
三、 CSS测验
1. css Cascading Style Sheets 层叠样式表
2.   p {text-transform: uppercase}//全部大写
  p {text-transform: lowercase}//全部小写
  p {text-transform: capitalize}//每个单词首字母大写
四、 CSS响应式设计
1. viewport 视区 用户网页的可视区域
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
2. 网格视图
确保边距和边框包含在元素的宽度和高度间
* {
    box-sizing: border-box;
}
  
  
    
3. 媒体查询
使用 @media 查询,你可以针对不同的媒体类型定义不同的样式
 
 
五、 zoom
1.vscode的css样式写颜色时,用vs color picker插件比较方便。
2.css样式优先级:id>class
3. zoom这个属性是ie专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性,清除浮动,清除margin重叠等作用。 不过值得注意的一点就是火狐浏览器不支持zoom属性,但是在webkit内核浏览器中zoom这个属性也是可以被支持的。
六、 二级菜单的边框问题
 
方法:
一级菜单:title下移1px,背景设置为白色
下移:position:relative; top:1px;
  二级菜单:设置title的width=li的width+2(border) 背景设置为白色
      设置z-index:2 如果另z-index起作用,需设置其position
七、 图片展示
 
a. 图片上下有空白
原因:图片是相对于基线对齐的
 
解决办法:
设置图片的 vertical-align: bottom;(将图像底部与行框底部对齐,行框底部就是这一行的最底部)
对图片使用 float(float的定义是元素紧挨元素,所以不会出现缝隙)
指定图片的 display: block; (垂直文本对齐属性 vertical-align 只适用于行内或者替换元素,display改变了元素的显示,实际上并不是只有block才会这样,只要不是带有inline的都不会出现缝隙,这样做的目的就是使图像成为块级元素,这样图像就不会生成行框,也就不会是相对于基线对齐,所以也不会有基线下面的缝隙)(《CSS 权威指南》第三版第203页)
指定父元素 font-size: 0; (实际上font-size并不是你看到的字体大小,而是用于设置字体的em框,它指定了如果没有额外行间距的情况下,字体基线间的距离)
指定父元素 line-height: 0; (line-height 指定了基线之间的最小距离,font-size是指定没有额外行间距时的基线距离,此处的额外行间距就是line-height来指定)
rowspan="3" 跨3行
colspan="3"  跨3列
style="border-collapse:collapse" table边框变细
图片排列可以用浮动或table
八、 延时提示框
window.onload=function(){
    var odiv1=document.getElementById(‘div1‘);
    var odiv2=document.getElementById(‘div2‘);
    var timer=null;
   
    odiv1.onmouseover=odiv2.onmouseover=function(){
      odiv2.style.display=‘block‘;
      clearTimeout(timer);
    }
    odiv1.onmouseout=odiv2.onmouseout=function(){
      timer=setTimeout(function() {
        odiv2.style.display=‘none‘;
      }, 300);
    }
  }
九、 无缝滚动
布局:div包裹ul div宽度固定且overflow:hidden 滚动是ul的位置在改变
<div class="roll" id="roll">
    <a href="javascript:void(0);" class="btn btn_left"></a>
    <a href="javascript:void(0);" class="btn btn_right"></a>
    <div class="wrap">
      <ul>
        <li><a href="#"><img src="img/1.jpg" ></a></li>
        <li><a href="#"><img src="img/2.jpg" ></a></li>
        <li><a href="#"><img src="img/3.jpg" ></a></li>
        <li><a href="#"><img src="img/4.jpg" ></a></li>       
      </ul>
    </div>
  </div>
li的内容应该复制一倍 ul的长度在js在计算
oul.innerHTML+=oul.innerHTML;
  oul.style.width=ali[0].offsetWidth*ali.length+‘px‘;
向左减 向右加 到达转折点时进行判断并改变方向
timer=setInterval(function(){
    //向左减 向右加
    oul.style.left=oul.offsetLeft+ispeed+‘px‘;
    if(oul.offsetLeft<-oul.offsetWidth/2){
      oul.style.left=‘0px‘;
    }
    else if(oul.offsetLeft>0){
      oul.style.left=-oul.offsetWidth/2+‘px‘;
    }
  },30);
点击方向按钮 改变速度正负
abtn[0].onmouseover=function(){
    ispeed=-5;
  }
  abtn[1].onmouseover=function(){
    ispeed=5;
  }
鼠标移入清除定时器 移出开启
十、 clientWidth
 
oDiv.style.width 只能获取行间样式的宽 获得的结果带单位
oDiv.clientWidth 可视区的宽 包括padding,不包括border,不包滚动条,不带单位
oDiv.offsetWidth 实际的宽包括padding和border包滚动条,不包括margin 不带单位
oDiv.scrollWidth 实际内容的宽度,不包边线宽度,随对象中内容超过可视区后变大
oDiv.offsetLeft 在ie中距文档左边的距离 只读 在其他浏览器中是父辈中有定位的元素或body的左边缘的距离
oDiv.scrollLeft 假如你的页面太大,浏览器的宽度不够,就会出现滚动条。一开始scrollLeft的值为0,你就看到了你的页面最左边的内容。而不显示超过浏览器的那部分,当你向右拖动滚动条时,scrollLeft的值在增大,你就看到了右边因隐藏的东西,而看不到左边隐藏的部分。他就会从scrollLeft的位置开始显示,而不显示0-scrollLeft的元素内容。
 
document.body.clientTop
document.body.scrollTop
document.body.scrollWidth

var oEvent=ev||event;
oEvent.clientY

原文地址:https://www.cnblogs.com/cdx0/p/js0.html

时间: 2024-10-24 22:27:17

js预热的相关文章

妙味js预热课程(一)

2016年5月24日(妙味课堂js预热课程-2笔记)一.前言 1.window.onload(事件):是在页面加载完成以后来执行一个功能: 如 window.onload=function(){ alert(“a”) } 这是一个匿名函数,因为在function后面括号前面没有名字: 即在页面加载完成以后弹出一个警告框! 2.如何提取行间事件: 3.为什么一定要用到onload? 二.主要内容 1.收缩展开菜单——if判断 如果菜单已经是显示的,把菜单隐藏: 如果菜单已经是隐藏的,把菜单显示.

2016年5月25日下午(妙味课堂js预热课程-4笔记二)

二.无缝滚动    如上图所示,现在很多网页都会实现这样的效果:它是如何实现的呢? 1.布局 注意如果想让一个div的位置发生改变,则最好给这个div加上一个绝对定位:position:absolute: obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置,整型,单位像素. (1)这里插入一个小程序,即如何让Div移动起来:代码如下: 1 <style> 2 #div1{width:100px;height:100px;backg

妙味js预热课程(二)

一.js简易日历 1.innerHTML的使用: a:设置内容并为其加样式: <input id="txt1" type="text" /> <input id="btn1" type="button" value="设置文字" /> <div id="div1"></div> <style> #div1{width:200px

2016年5月25日下午(妙味课堂js预热课程-4笔记)

一.延时显示框 首先我们要做的是制作两个显示框,当鼠标移入显示框1的时候显示框2出来,当鼠标移出的时候显示框2消失:其代码如下: <script type="text/javascript"> window.onload=function () { var oDiv1=document.getElementById("div1"); var oDiv2=document.getElementById("div2"); oDiv1.on

node.js的安装环境搭建

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

node源码详解(四) —— js代码如何调用C++的函数

声明:转载请保留声明头部并标明转载.并私信告知作者.原文:http://www.cnblogs.com/papertree/p/5285705.html 上面讲到node调用Script::Compile()和Script::Run()解析执行app.js,并把io操作和callback保存到default_loop_struct,那么app.js里面js代码如何调用C++的函数呢? 在4.2节进行解释,先在4.1节来点知识预热. 4.1 V8运行js代码的基础知识 —— V8的上下文 来看看g

五个最佳案例带你解读 Node.js 的前后之道

Node.js 是什么? Node.js 采用 C++语言编写而成,浏览器内核 V8 做为执行引擎: Node 不是 JS 应用.而是一个 Javascript 的运行环境. Node 保留了前端浏览器 js 的接口,没有改写语言本身的任何特性,依旧基于作用域和原型链. Node.js 是一个为实时 Web ( Real-time Web )应用开发而诞生的平台,它从诞生之初就充分考虑了在实时响应.超大规模数据要求下架构的可扩展性.这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路,而采用了

五个最佳案例带你解读Node.js的前后之道

Node.js 是什么? Node.js采用C++语言编写而成,浏览器内核V8做为执行引擎:Node不是JS应用.而是一个Javascript的运行环境.Node保留了前端浏览器js的接口,没有改写语言本身的任何特性,依旧基于作用域和原型链. Node.js 是一个为实时Web(Real-time Web)应用开发而诞生的平台,它从诞生之初就充分考虑了在实时响应.超大规模数据要求下架构的可扩展性.这使得它摒弃了传统平台依靠多线程来实现高并发的设计思路,而采用了单线程.异步式I/O.事件驱动式的程

jQuery 源码分析和使用心得 - 文档遍历 ( traversing.js )

jQuery之所以这么好用, 首先一点就是$()方法和它强大的选择器. 其中选择器使用的是sizzle引擎, sizzle是jQuery的子项目, 提供高效的选择器查询. 有个好消息告诉大家, 就是sizzle可以独立使用, 如果你觉得jQuery太大但又非常喜欢它的选择器, 那不妨可以用sizzle. 感兴趣的话可以到官方网站了解. 本系列内部不准备解析sizzle的源码, 一是sizzle内容相对独立, 二是内容主要涉及算法, 与整体的代码设计关系不大, 三嘛, 我的实力有限, 遇到算法就退