设为首页
你的,我的,大家的Sjdn!在线投稿
注册 | 社区 | 军事
登录 | 搜索 | 投稿

DIV+CSS完美基础教程

字号:T|T

      大家好,我接触phpcms也有将近一年了,大一时开始学习dreamweaver、FW、flash、PS等等相关的网页设计工具和Xhtml+CSS技术,直到如今,也有三年多了,对于cms,我最先接触的是powereasy,尽管PE2006的教程等后期服务做的不错!让很多不懂技术的新站长迅速就能建立自己的网站。但是PE特别是免费版在功能上无法满足建立庞大的地区门户的要求!鉴于phpcms在建立地区门户网站上的强大功能和php语言超越asp的先天优势,因此我去年开始转向了phpcms!在接触phpcms的这一年里,感触很深!如今phpcms换了东家!很多个人站长心里很焦虑,其实没必要,相信KU6吧,相信phpcms团队会沿着完美开源的道路一直走下去。。。
      鄙人不才,也不是专业人员,作为phpcms的忠实用户,今天我斗胆把我建站时的一些想法和心得与广大phpcms站长们分享!我怕有些新站长不明白!所以下面的教程都力求用最简明易懂的语言!可能有些说法不当,请老站长口下留情!!谢谢大家   ^_^
                模板制作的核心技术:(XHTML)div+css的完美基础教程
一、div+css的基础知识:
     1、引进div+css的作用:
           我们知道,传统的网站是用table表格标签布局的,为什么如今的网站都抛弃了table、而使用div+css、我想广大的站长朋友们也都清楚!这里不多说了,不知的朋友可进网址
http://hi.baidu.com/mydesign2007/blog/item/3d606fcf6016c338f9dc6150.html查看!
           打个比方,div与css关系就像“字”与“字体、字号、颜色”。div是一张皮,就像网页的一个页面,而css就是毛,就如网页上各个内容板块的风格!有皮无毛无所谓皮毛,反之亦然!所以我们说div与css就是“脸”和“面”的关系!说到这,可能有些朋友更晕了!没关系,继续往下看。。
        2、 认识div:
            div,是division的简写,我们暂时理解为“分区”的意思吧,由此可知,div的作用只是起到吧一张空白的页面划分为不同的“区间”,这些区间就形成了网页上的各个板块。。。
            到底如何利用div这个标签来划分网页内容板块呢,具体技术内容下面再讲!!
       3、认识css:
           css,是Cascading Style Sheet的缩写,也就是“层叠样式表”的意思!前面说到的划分分区的任务是由div标签控制的,是“脸”那么css就是“面”了,是决定给一张由div标签设计出来的网页这张“脸”化什么妆的!
        到这里,广大新手朋友应该对div+css的关系有所了解了吧!o(∩_∩)o...哈哈
    二、div+css的技术基础:
         我们知道,传统的网页是table和页面内的style标签设计的,缺点很多,比如网页下载慢,要等所有表格标签下载完才会完全显示,占宽带,且不利于搜索引擎的搜索;网页更新升级特别难等等。。
         而div+css就不同了,它遵循代码分离的原则,讲求框架(div)和风格(css)相分离.更有利于后期维护,节省宽带,下载快,有利于搜索引擎。
         实例:首先建立一个网页index.html。代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>index</title>
  6. </head>
  7. <body>

  8. </body>
  9. </html>
复制代码
上面代码是哟用DW新建的一个html页面,不知道大家是否熟悉html语言,我还是说一下吧。介于<head>与</head>之间的网站头部标签,用来定义网页版本,关键词之类的,不是网页的实际内容!介于<body></body>之间的才是网页的主体内容。所以关于网页的板块设计的代码div标签都要写在<body>与</body>之间!
   同<body></body>标签一样,div的标签语法也一样,即<div>文字</div>,注意,在代码的时候,大家一定别忘了 结尾的</div>闭合标签,否则网页会出错!这也是很多站长在更新首页时,后台出现前台首页的一个原因,切记!!
    好了,我们继续吧,给刚建立的空白网页加上div标签吧^_^
   
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>index</title>
  6. </head>
  7. <body>
  8.   <div  id="left">  <!--以上为网页主体左栏-->
  9.             <p>left</p>
  10.         </div>
  11.     <div  id="middle"> <!--以上为网页主中栏-->
  12.             <p>middle</p>
  13.         </div>
  14.    <div  id="right"> <!--以上为网页主右栏-->
  15.             <p>right</p>
  16.        </div>
  17. </body>
  18. </html>
复制代码


  以上红字部分就是我们刚刚添加的div标签了。这是如果我们预览网页的话,发现基本的网页内容就有了,预览如下:

友情提示:转载请注明出处
http://www.sjdn.net

[错误报告] [推荐] [收藏] [打印] [关闭] [返回顶部]

新闻48小时评论排行

  1. 1 怎么用displayx测电脑屏幕 评论0
  2. 2 红米9A导航建 评论0

图片新闻