一、 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