北京 上海 广州 深圳 >>
网站建设
我们的优势
我们的报价
联系我们
首 页 关于我们 建站套餐 网站优化 网站推广 解决方案 成功案例 客服中心 建站问题 推广知识 建站知识  
网站建设
  网站建设套餐
  网站建设流程
  功能模块介绍
  网页设计报价
  网站改版设计
  网站售后服务
 
最新客户
   
网站推广
推广知识
 
· 浅谈造成网站关键字排名
· 浅谈最近百度调整对网站
· 分析:站内锚文本链接使
· 细节成就权重 权重决定
· 根据百度有效反链数据
· 详解SEO策略制定中的
· 关键词排名优化之挖掘长
 
建站技术知识
 
 
CSS盒模式与排版

      首先简单讲一下盒模式,所谓盒模式,是CSS看待元素的方式,CSS将每个单一的元素都看作一个盒子,如下图所示:

css盒模式

      之所以叫它盒模式,是因为它跟我们日常生活中的盒子非常相似,这里不多说了。CSS中大部分的属性都是用来控制content的,比如width、height、color等;padding、border、margin都是可选的,其中,padding、margin表示的是一片空白区域,只能控制其大小,border是一个可见的边框,可以控制其边框样式、粗细、颜色等。

      下面主要讲一下排版。

      在正常情况下,浏览器从HTML文件的开头开始,从头到尾依次呈现各个元素,块元素从上到下依次排列,内联元素在块元素内从左到右依次排列。而CSS的某些属性却能够改变这种呈现方式,这些属性就是这里要讲的,主要是floatposition属性,另外还有clear属性以协助floatz-index属性协助position。这些属性值均无法继承。

float属性定位:

         float属性值可以为leftrightnonenone为默认值,表示不漂移该元素,浏览器以正常方式显示之,不必多说。若设置为leftright,则表示将该元素漂移到左方或右方。那什么叫漂移?

         简单地说,漂移是指将某元素从正常流中抽出,并将其显示在其父元素的左方或右方的一个过程。这样说想来你还不一定明白,那么我们就分步骤来看一下浏览器是如何来漂移某元素的。

         假设我们有以下html,为了能更清楚地看到布局,我们将各个部分都加上了一个红色的边框,并给段落加上橙色的背景色,源代码如下:如果我们将其中的leftbar设置为float:left;width:20%,那么将是下面这个样子:

       以上就是float的原理。不过,在实际实践中,我们通常需要的是leftbar与main各自成一列,而不希望main的内容还流入到leftbar的下面。哈,这就需要你开动脑筋了,想想该怎么办?我们可以给main指定margin-left:20%,显示如下:

      从上图我们发现了一个问题,那就是leftbar突破了其父元素content的区域。是的,漂移元素不再受其父元素区域的限制,或者说漂移元素不会使其父元素的区域撑大。这导致footer的呈现不满足我们的需要。clear属性骑着白马来帮助我们了,我们给footer加上clear:left的属性试试。

      到此,你应该比较清楚float、clear排版的基本原理了吧。如何才能排出令人赏心悦目的页面,这就需要你开动脑筋了,它是门艺术,设计的艺术。掌握原理是简单的,但设计的艺术不是那么容易学习的阿。

 

      最后简单讲一下position

      position可以设置为以下四个值

      static:默认值,表示以正常流的方式排版元素。

      absolute:将元素从正常流中抽出,并摆在页面指定的位置(由top、left、right、bottom属性指定),该元素不会对其他元素产生任何影响(这是与漂移元素的一个很大的不同)。

      fixed:将元素从正常流中抽出,并摆在浏览器窗口指定的位置(由top、left、right、bottom属性指定),它使元素不随着页面的滚动而滚动,永远固定在浏览器的某个位置上。

      relative:元素仍难是页面流的一部分,浏览器先以正常模式排定所有元素,在最后一刻,浏览器将该元素偏移一定的位置(由top、left、right、bottom属性指定)。该属性较少使用。

      如果有好几个指定position的元素重叠,那么它们哪个在前哪个在后呢?z-index属性将来帮助你,该属性值越大越靠前。

       好了,关于html与css就讲到这里了,从下篇开始将讲述Asp.net。我想基本的应用大家也都会,不会的也能找到一大叠的书本与资料,所以,我准备着重讲Asp.net的实现原理,并配合分析Asp.net的源代码,希望能让大家对Asp.net的本质的认识有所帮助。我将假设你掌握了OO(面向对象)的基本精髓,并掌握了一定的设计模式等。

 

html #header, #footer, #content, #leftbar, #main
{
    border
: solid 1px red;
}


p
{
    background-color
: Orange;
}

      这段html在浏览器中将显示如下:

        

 

<
 
在线咨询
     
 
QQ咨询
旺旺咨询
 
MSN咨询
  点击开始咨询 点击开始咨询
  点击开始咨询 点击开始咨询
建站服务
       经济型网站设计套餐 ¥2580
       企业型网站设计套餐 ¥3980
       豪华型网站设计套餐 ¥6580
       商城型网站设计套餐 ¥7580
       定制型网站设计套餐 ¥面 谈
       智赢型ABC ¥1580/1980
虚拟主机
       普及型(电信)350元/年
       经济型(电信)650元/年
       普及A型(双线)500元/年
       普及B型(双线)900元/年
       外贸型(国外) 550元/年
       企业型(国外) 1050元/年
我要订购主机>>       
域名注册
     国际顶级域名.com 100元/年
     国际顶级域名.net 100元/年
     国际顶级域名.cc 380元/年
     国际顶级域名.org 180元/年
     中国顶级域名.cn 100元/年
     中国顶级域名.com.cn 100元/年
     中文域名.中国.公司 280元/年
我要注册域>>       
 友情链接:湖南网站建设 广州网站建设 上海网站建设 广州网站建设公司 中山网站制作 网页设计网 网页设计公司 网站制作 网站建设 建网站公司 珠海网站建设 赢在网络
 业务范围: 广州虚拟主机 广州网站设计 广州网页制作 广州网页设计 深圳网站建设 珠海网页设计 中山网页制作 汕头网站设计 番禺网页制作 南海网站建设 肇庆网页制作

联系我们 | 建站套餐 | 网站建设 | 建设知识 | 服务报价 | 解决方案 | 成功案例 点击开始咨询 点击开始咨询
Copyright 2005-2020 win580.com rights reserved 电话:020-87518743 87518740  传真:020-87518740
地址:广州市天河区中山大道西8号(天河商贸大厦)1304室  邮编:510620
E-mail:Win580@126.com