(网页前台编写divcss讲稿.docxVIP

一、DIV和table的区别1、div 的加载方式是即读即加载，遇到 div 没有遇到 /div 的时候一样加载 div 中的内容，读多少加载多少2、table 的加载方式是完成后加载，遇到 table 后，在读到 /table 之前，table 中的内容不加载，或者传输中断了(document.onload()事件)的时候加载3、表格布局会使浏览器的兼容性产生很大问题，比如在手机，掌上电脑用户浏览表格布局会一片混乱4、主流浏览器兼容IE6+，Firefox，Chrome，Opera，Safari二、页面切图：1、渐变可重复2、非特殊效果文字，尽量别切在图片上，写在网页中3、如果是纯色，尽量用background-color写，不要切背景图4、线条，边框等，尽量用css里的boder来写，不要切在图片里。这样调整div或者table的宽度、高度等，可以自适应。三、前台代码编写（一）构思布局DIV结构如下：│body {}　/*这是一个HTML元素，具体我就不说明了*/　└#Container {}　/*页面层容器*/　├#Header {}　/*页面头部*/　├#PageBody {}　/*页面主体*/　│　├#Sidebar {}　/*侧边栏*/　│　└#MainBody {}　/*主体内容*/　└#Footer {}　/*页面底部*/（二）table+DIV+css+html前台页面编写引用css文件：link rel=stylesheet type=text/css href=style.css /Id（不可重复用）和class（可重复用）常用属性宽 with：30px高 height:50px边框 boder boder-left boder-right boder-bottom boder-top背景颜色 background-color: #F2FCFE背景图片 background: url(images/index5.jpg) repeat-x;字体：什么字体、颜色、大小、行高等font-family:宋体,Times New Roman, Times, serif;font-size:12px;line-height:1.5em;color:#4F5050;aa:hovera:activea:linklink:连接平常的状态?active:连接被按下的时候?visited:连接被访问过之后?hover:鼠标放到连接上的时候magin magin-left magin-right magin-bottom magin-top autopandding pandding-left pandding-right pandding-bottom pandding-toptext-align:center\left\rightfloat:left\rightdisplay: blocklist-style: none;定义全局样式body {text-align: left;margin: 0 auto;font-family:宋体,Times New Roman, Times, serif;font-size:12px;line-height:1.5em;color:#4F5050; background: url(images/index26.jpg) top repeat-x;}input {font: 10pt Verdana, Arial, Helvetica, sans-serif, 宋体;color: #999;}td{font-size:12px;}img {border: none;}p,ul,ol,li,form {margin: 0;padding: 0;list-style: none;}a {color:#4F5050;text-decoration: none;}a:hover {color: #C60000;text-decoration: underline;}个别实例导航条的编写Html：div class=navdiv id=indeximg src=images/index3.jpg //div div id=indexarrowimg src=images/index4.jpg //div div class=navmenu a href=#浙江省/a a href=#杭州市/a a href=#宁波市/a a href=#温州市/a a href=#嘉兴市/a a href=#潮州市/a a href=#绍兴市/a a href=#金华市/a a href=#赣州市/a a href=#舟山市/a a href=#台州市/a a href=#丽水市/