学习HTML,CSS和JavaScript的心得体会

html-css011

学习HTML,CSS和JavaScript的心得体会,第1张

说一说自己的体会吧,也不一定正确

1.简单理解html就是文本语言,诸多元素定义成一个页面框架,是之能在浏览器上显示

2.css是对html进行外观设置,比直接在html里面设置更加整洁,减少代码冗余方便维护,加载速度快,而且css中的许多伪类可以帮助实现诸多页面效果

3.javascript是脚本语言,可以对dom进行操作,方便页面设置,帮助实现画面动作,验证,表单提交等等操作

width:192pxheight:55pxmargin-top:100pxbackground:url(images/anniu01.gif) no-repeat left bottom

要将上面的改成

width:192pxheight:155pxbackground:url(images/anniu01.gif) no-repeat left 50px

2.尽量用padding-top:,少用margin-top

今天总算升级到IE8了,感觉CSS的写法要想同时适应IE6、IE7、IE8、FireFox,有以下几个基本的窍门。

1、使用float后必须clear,否则IE8显示错误。

2、h1,h2,h3,ul,li,dl,dt,dd,p...最好定义margin:0和padding:0,否则各种浏览器显示有误差。

3、line-height值最好是偶数,奇数显示有误差。

4、input 的text和password两种形式在IE8不定义字体(宋体)下长度高度不一样,可将input定义为font-family:Arial。

5、如果想在标题前后加小图标,最好不要直接用img,用img的话IE6行间距会缩小,应该用<li>加背景的形式。

...今天暂时只发现这几点,更多的以后继续总结。

实在不行再用分开定义的办法:

div {

margin:0/* 给全部浏览器看 */

*margin:10px/* 给IE6、IE7看 */

_margin:20px/* 只给IE6看 */

}

附:基本CSS样式表

<style type="text/css">

body {

margin:0

font-size:9pt

line-height:18px

}

h1,h2,h3,ul,li,dl,dt,dd,p {

margin:0

padding:0

}

ul {

list-style:none

}

form {

margin:0

}

input,textarea,select {

font-family:Arial

font-size:9pt

}

.clear {

clear:both

}

</style>

CSS+DIV排版其实很容易。

如果凭空排版。你可能要先自己用纸画个版面草图。然后用div(不加内容,但是要显示边框)按照草图排版。直到自己满意之后再往div中添加内容。

如果有美工做好的效果图,那么按照效果图来排是最容易的。方法同上。

值得一提的是,排版一般都要求主层居中。而且兼容各个浏览器,关于这个方法,很多人都用

margin:0px 0px auto

这是最通用的让主层居中的方法。但是浏览器兼容性差。在大多数浏览器中,这个样式是不起作用的。

最简单有效,而且兼容所有浏览器的方法就是把主层放在<center></center>里。然后主层里的其它层用float和margin排版。保证不跑偏。

以上是我从事CSS+DIV工作5年的心得。莫见笑。