前端学习总结

 

1.移动页面自适应手机屏幕宽度  & 适配写法

@media (-webkit-min-device-pixel-ratio: 2) and (device-width:320px){

    .main{padding:88px 0 204px 0;}

}/*4&5*/

 

@media (-webkit-min-device-pixel-ratio: 2) and (device-width:375px){

.main{padding:88px 0 204px 0;}

}/*6*/

 

@media (-webkit-min-device-pixel-ratio: 3) and (device-width:414px){

.main{padding:88px 0 204px 0;}

}/*6p*/

 

2.移动端自适应头部<meta>代码

<!doctype html>

<html lang="en">

<head>

      <meta charset="UTF-8">

      <title>17小时搞定雅思口语</title>

      <meta name="format-detection" content="telephone=no" />

      <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width"/>//移动端自适应

      <link rel="stylesheet" type="text/css" href="ielts.css">

</head>

<body>

</body>

</html>

3.图片定位设置居中方法

 

Position:absolutely;

Top:20%;

Left：50%;

Margin-left:是图片宽度的一半，并且是负值。

4.对于图片上有文字的处理方法

最好把背景图单独写<img src=””>，然后给图片上要写的问题做个定位。因为如果作为背景图的话，背景图是被里面内容撑开的，会失真。

5.css实现图片在div中居中的效果

备注：img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中

思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。

6. position的fixed定位----  一个块始终在最下方

一个块始终在最下方：

.footer{width: 100%;background:#333333;position:fixed;bottom:0px;z-index: 1;max-width: 750px;}

因为fixed 是相对于浏览器的固定定位，所以一定要设置块的最大宽度。

7.文字两边有横线

用<span>写，css{display:inline-block;width:;height:;background:red;}

 

8.文字超出部分以省略号显示

文字强制在一行，不允许换行，超出部分以省略号显示

 

 

.name {

    font-size: 19px;

    color: #333333;

    width: 41%;

    white-space: nowrap;//不允许换行

    text-overflow: ellipsis;

    overflow: hidden;//超出部分显示省略号

    display: block;}

text-overflow要么和width一起用，要么和  white-space: nowrap一起用

9.表格tr/td特殊性

1)tr也是没有margin和padding属性的。

因为表格的特殊性。
table tr 的padding css 属性设置无效 
tr td 的 margin css 属性设置无效 

使用Css 属性代替表格的cellspacing、cellpadding 属性
cellspacing 属性使用border-collapse设置。
cellpadding 属性使用td 的padding设置

2) 表格的td不能设置margin，只能设置padding，但是可以通过对td中的内容，比如img、span设置margin。

 

10.z-index 的用法

z-index必须和position一起用，

11. 遮罩层的写法

 遮罩层和被遮罩的部分写同级，然后在对他们两个写包裹层。

.out-mask{position:fixed;top:0px;left:0px;right:0px;bottom:0px;background-color:#000;-moz-opacity: 0.5;opacity:0.5;z-index:10;filter: alpha(opacity=40);}

12.span 设置为display时的写法（pc端）

span 设置为display时：不用设置padding值，会失真的。设置text-align：center, width,就可以了。

13.js提示框的写法（学习ing）

14.锯齿图的写法

  直接切图，竖长条，写背景图，background-repeat:repeat-x;

15. 用JavaScript修改CSS属性的代码

用JavaScript修改CSS属性 只有写原生的javascript了。

1.用JS修改标签的 class 属性值：

class 属性是在标签上引用样式表的方法之一，它的值是一个样式表的选择符，如果改变了 class 属性的值，标签所引用的样式表也就更换了，所以这属于第一种修改方法。

更改一个标签的 class 属性的代码是：

document.getElementById( id ).className = 字符串;

document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法获取。className 是 DOM 对象的一个属性，它对应于标签的 class 属性。字符串 是 class 属性的新值，它应该是一个已定义的CSS选择符。

利用这种办法可以把标签的CSS样式表替换成另外一个，也可以让一个没有应用CSS样式的标签应用指定的样式。

举例：

代码如下:

<style type="text/css">

.txt {

font-size: 30px; font-weight: bold; color: red;

}

</style>

<div id="tt">欢迎光临！</div>

<p><button on click="setClass()">更改样式</button></p>

<script type="text/javas cript">

function setClass()

{

document.getElementById( "tt" ).className = "txt";

}

</script>

2.用JS修改标签的 style 属性值：

style 属性也是在标签上引用样式表的方法之一，它的值是一个CSS样式表。DOM 对象也有 style 属性，不过这个属性本身也是一个对象，Style 对象的属性和 CSS 属性是一一对应的，当改变了 Style 对象的属性时，对应标签的 CSS 属性值也就改变了，所以这属于第二种修改方法。

更改一个标签的 CSS 属性的代码是：

document.getElementById( id ).style.属性名 = 值;

document.getElementById( id ) 用于获取标签对应的 DOM 对象，你也可以用其它方法获取。style 是 DOM 对象的一个属性，它本身也是一个对象。属性名 是 Style 对象的属性名，它和某个CSS属性是相对应的。

说明：这种方法修改的单一的一个CSS属性，它不影响标签上其它CSS属性值。

举例：

代码如下:

div id="t2">欢迎光临！</div>

<p><button on click="setSize()">大小</button>

<button on click="setColor()">颜色</button>

<button on click="setbgColor()">背景</button>

<button on click="setBd()">边框</button>

</p>

<s cript type="text/java script">

function setSize()

{

document.getElementById( "t2" ).style.fontSize = "30px";

}

function setColor()

{

document.getElementById( "t2" ).style.color = "red";

}

function setbgColor()

{

document.getElementById( "t2" ).style.backgroundColor = "blue";

}

function setBd()

{

document.getElementById( "t2" ).style.border = "3px solid #FA8072";

}

</script>

方法:

document.getElementById("xx").style.xxx中的所有属性是什么

盒子标签和属性对照

CSS语法（不区分大小写）    JavaScript语法（区分大小写）

border      border

border-bottom     borderBottom

border-bottom-color borderBottomColor

border-bottom-style borderBottomStyle

border-bottom-width      borderBottomWidth

border-color borderColor

border-left   borderLeft

border-left-color borderLeftColor

border-left-style borderLeftStyle

border-left-width borderLeftWidth

border-right borderRight

border-right-color     borderRightColor

border-right-style     borderRightStyle

border-right-width    borderRightWidth

border-style borderStyle

border-top  borderTop

border-top-color borderTopColor

border-top-style borderTopStyle

border-top-width      borderTopWidth

border-width      borderWidth

clear     clear

float     floatStyle

margin  margin

margin-bottom  marginBottom

margin-left   marginLeft

margin-right marginRight

margin-top  marginTop

padding padding

padding-bottom paddingBottom

padding-left paddingLeft

padding-right     paddingRight

padding-top paddingTop

颜色和背景标签和属性对照

CSS 语法（不区分大小写）   JavaScript 语法（区分大小写）

background background

background-attachment  backgroundAttachment

background-color     backgroundColor

background-image   backgroundImage

background-position backgroundPosition

background-repeat   backgroundRepeat

color     color

样式标签和属性对照

CSS语法（不区分大小写）    JavaScript 语法（区分大小写）

display       display

list-style-type       listStyleType

list-style-image   listStyleImage

list-style-position      listStylePosition

list-style listStyle

white-space whiteSpace

文字样式标签和属性对照

CSS 语法（不区分大小写）   JavaScript 语法（区分大小写）

font      font

font-family  fontFamily

font-size     fontSize

font-style    fontStyle

font-variant fontVariant

font-weight  fontWeight

 

文本标签和属性对照

CSS 语法（不区分大小写）   JavaScript 语法（区分大小写）

letter-spacing     letterSpacing

line-break    lineBreak

line-height   lineHeight

text-align     textAlign

text-decoration  textDecoration

text-indent   textIndent

text-justify   textJustify

text-transform      textTransform

vertical-align

verticalAlign

 

17.DOM事件解析

1.事件流

1)时间冒泡

2)事件捕获

2.事件处理程序

1)HTML事件处理程序

2)DOM  0级事件处理程序:把一个函数赋值给一个事件处理程序属性.

3)DOM  2级事件处理程序

DOM  2级事件定义了两个方法,用于处理指定和删除事件处理程序的操作

AddEventlistener()和remove Eventlistener()，接受三个参数：要处理的事件名、作为事件处理程序的函数和布尔值。

 

DOM 0级和DOM 2级的优点是：可以在一个元素/按钮上添加多个事件处理程序

而且onclick变成click！！

4)IE事件处理程序（只支持IE和opera）

IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡，所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。

不使用第三个参数的原因：IE8以及更早的浏览器版本只支持事件冒泡！

5)跨浏览器的事件处理程序

 

 

posted on 2015-11-24 17:59  shalovely  阅读(177)  评论(0)    收藏  举报

导航