CSS+DIV带来的好处:使页面加载速度更快;减小页面文件大小,可以降低网站的流量;使网站符合WEB标准-W3C规范,减少不同浏览器兼容性问题;设计代码与内容分离,易于页面修改和维护;代码精练,有利于搜索引擎抓取,增加收录数量和权重;在世界上越来越多人采用Web标准时,掌握CSS+DIV可以提高设计师的职场竞争实力。CSS+DIV——崭新的“老技术”什么是DIV+CSSDIV全称division意为“区分”,CSS全称CascadingStyleSheets意为层叠样式表,这个布局中,DIV承载的是内容,而CSS承载的是样式。内容和样式的分离对于所见即所得的传统TABLE编辑方式确实是一个很大的冲击,尤其是设计人员很难接受设计一个他们不能立即看到的样式。不过随着学****会发现DIV+CSS的好处实在是太明显了一.(X)HTML与CSS核心基础HTML(超文本标记语言)-XMLXHTML(可扩展超文本标记语言)Transitional松散过渡型的XHTML文档类型<!DOCTYPEhtmlPUBLIC"-//W3C////EN" "/xhtml1/DTD/xhtml1-"><htmlxmlns="9/xhtml"><head> <title>标题</title></head><body> 内容……</body></html>(文档对象模型)一.(X)HTML与CSS核心基础<html><head><title>无标题文档</title></head><body> <h1></h1> <p></p> <ul> <li> <ol> <li>……</ol> </li> <li> <ul> <li>……一.(X):<div></div><p></p><span></span>正确:<imgsrc=“”width=“100”/>正确:<div><span>文本</span></div>正确:<p></p><b></b>正确:<br/>正确:<imgsrc=“”width=“100”/>正确:<inputchecked=“checked”>一.(X)HTML与CSS核心基础XHTML定义结构的标签:布局DIV(首选)文本p,h1-h6,strong,span,b……图片Flashimg,object列表ulli,olli,dldtdd表单form,input,select,textarea一.(X)HTML与CSS核心基础XHTML引入CSS的方式:行内式<h1style=“color:white;”>文本</h1>内嵌式<styletype="text/css"> h1{color:white;}</style>导入式<styletype="text/css"> ***@import"";</style>链接式<linkhref=""rel="stylesheet"type="text/css“/>一.(X)HTML与CSS核心基础CSS语法结构:选择符(selector)、属性(property)与值(value)body{color:red;}选择符分类:.(X)>ID样式>类别样式><styletype="text/css"> div{color:red;} .content{color:green;} #main{color:blue;}</style> <divid="main"class="content“style="color:black;"> 我是div </div>
Divcss培训 来自淘豆网www.taodocs.com转载请标明出处.