网站建设是指使用标识语言（markup language)，通过一系列设计、建模、和执行的过程将电子格式的信息通过互联网传输，最终以图形用户界面（GUI）的形式被用户所浏览。简单来说，网页设计的目的就是产生网站。简单的信息如文字，图片（GIF，JPEG，PNG）和表格，都可以通过使超文件标示语言、可扩展超文本标记语言等标示语言放置到网站页面上。 我们经常看见大站的广告都是放在内容中间实现文字环绕的呢， 一般普通小站广告只能放在内容开头或者结尾， 也许大站的cms系统带这个功能吧， 我们小站常用cms的基本没这个功能， 因为内容标签里面不可能再自动加入一个广告标签， 除非你添加文章的时候手动编辑， 那不累死。 我也一直没想到过用css来控制， 主要是没想到这个clear属性， 今天偶然看到一个介绍， 才知道原来实现文字环绕是如此简单。 <div class="news"> <div style="float:left;height:300px;width:0">一个宽为0的空白层， 利用该层的高度控制广告层上下的位置</div> <div style="float:left;height:250px;width:250px;clear:left;">广告代码</div> </div> 关键在于clear:left的作用， clear有3个属性：clear:both， clear:left， clear:right， 分别表示清除两边， 左边， 右边的浮动块。 在广告层加上clear:left， 那么就表示该层相对于空白层来说不浮动了， 就往下移动了， 太妙了， 哈哈。 我们来比较一下： <div class="news"> <div style="float:left;height:300px;width:100px;background:#CCC;">给他加上宽度和背景便于观察效果</div> <div style="float:left;height:250px;width:250px;">去掉了清除浮动， 你就明白了它的意义</div> </div> 如果再加上这样一条： <style>.news img,.news table{clear:both;}</style> //让内容里面的图片和表格不会遮到广告 很遗憾， 上面的测试发现只有ie可行， firefox和opera还有不同的结果， ie的效果是图片遇到广告层自动下移， firefox是不会下移， 但是不会遮住广告层， 因为广告层在最前， opera是图片不会下移， 会遮住广告层， 搞笑啊。 再次改进： <style>.news img,.news table{clear:both;position:relative;z-index:-1;}</style> //让图片和表格自动处于最底层 终于可以了， 比较完美了， 广告内容环绕的效果就这样搞定了：） 忘记加上了 <style>.news{float:left;}</style> 有人问要文字上右下都环绕， 我改了一下， 如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>利用css的clear属性搞定gg广告文字环绕</title> <meta name="keywords" content="css,clear,ggad,文字环绕" /> <body> <div style="float:left;"> <div style="float:left;height:200px;width:1px;"><!--一个宽为1px的空白层， 利用该层的高度控制广告层上下的位置。 宽为0就不能控制上下了， 原因不知道。 --></div> <div style="float:left;height:250px;width:250px;clear:left;background:#F00;margin:25px 5px 5px 0;"><!--广告代码， firefox和opera还有少量偏差， 需要另外调整， 就不写了， 基本可以。 --></div> <p>新闻内容</p> </div> </body> </html>
网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。
|