词条信息

admin
admin
超级管理员
词条创建者 发短消息   

相关词条

热门词条

更多>>
新手怎么优化自己的网站?
现在很多朋友都有自己的个人网站,也知道SEO优化是可以让自己网[详细]
如何更换服务器而不影响网站排名
     无论是个人站长还是网络[详细]
马云的达摩院到底要研究啥?
  今天,阿里做了一件成立 18 年来都没做的事:成立了研究室[详细]
什么是软文,软文的作用,常见的形式?
  最近很多人在问关于软文怎么写,怎样才会达到好的效果。想问大[详细]
鹿晗和关晓彤公布恋情,崩了微博
昨天中午,鹿晗公布了自己的恋情,女友是关晓彤。瞬间,鹿晗的“女[详细]
解决网 >>所属分类 >> 网页设计    CSS   

DIV+CSS如何布局

标签: CSS DIV 网页制作

顶[0] 发表评论(0) 编辑词条
目录

一、CSS布局理念编辑本段回目录

  随着Web2.0标准化设计理念的普及,国内很多大型门户网站已经纷纷采用CSS-DIV制作方法,从实际应用情况来看,此种方法绝对好于表格制作页面的方法。由于CSS富含丰富的样式,使页面更加灵活,它可以根据不同的浏览器,达到显示效果的统一和不变形。


二、将页面用DIV分块编辑本段回目录

       无论使用表格还是CSS,网页布局都是把大块的内容放进网页的不同区域里面。CSS排皈是一种很新的排版理念,首先要将页面使用<div>整体划分为几个板块,然后对各个板块进行CSS定位,最后在各个板块中添加相应的内容。


       在利用CSS布局页面时,首先要把页面分成几个模块,同时注意各个模块之间的父子关系等。以最简单的框架为例,页面由banner(导航条)、主体内容(content)、菜单导航(1inks)和脚注(footer)几个部分组成,各个部分分别用自己的id来标识,如图19.1所示。


       其页面中的HTML框架代码如下所示。

<div id="container">container 
  <div id="banner">banner</div>
  <div id="content">content</div>
  <div id="links">links</div>
  <div id="footer">footer</div>
  </div>


将页面用DIV分块运行效果


  例子中每个板块都是一个<div>,这里直接使用CSS中的id来表示各个板块,页面的所有DIV块都属于container,一般的DIV排版都会在最外面加上这个父DIV,便于对页面的整体进行调整。对于每个DIV块,还可以再加入各种元素或行内元素。


三、设计各块的位置编辑本段回目录


  当页面的内容已经确定后,则需要根据内容本身考虑整体的页面布局类型,如是单栏、双栏还是三栏等,这里采用的布局如图所示。


设计各块的位置运行效果


  由图可以看出,在页面外部有一个整体的框架container,banner位于页面整体框架中的最上方,content与links位于页面的中部,其中content占页面的绝大部分,最下面是页面的脚注footer。


四、用CSS定位编辑本段回目录


  整理好页面的框架后,就可以利用CSS对各个板块进行定位,实现对页面的整体规划,然后再往各个板块中添加内容。

  下面首先对body标记与container父块进行设置,CSS代码如下所示。

body {
  margin:20px; 
text-align:center;
} 
#container{
  width:800px;
  border:2px solid #022000;
  padding:15px;
}

上面代码设置了页面的边界、页面文本的对齐方式,以及父块的宽度800像素。下面来设置banner板块,其CSS代码如下所示。

#banner{
  margin-bottom:10px;
  padding:20px;
  background-color:#2259ff;
  border:1px solid #002200;
  text-align:center;
}


  这里设置了banner板块的边界、填充、背景颜色等。


  下面利用float方法将content移动到左侧,links移动到页面右侧,这里分别设置了这两个板块的宽度和高度,读者可以根据需要自己调整。

#content{
  float:left;
  width:600px;
  height:300px;
  border:1px solid #002200;
  text-align:center;
}
#links{
  float:right;
  width:200px;
  height:300px;
  border:1px solid #002200;
  text-align:center;
}


  由于content和links对象都设置了浮动屙陛,因此footer需要设置clear·属性,使其不受浮动的影响,代码如下所示。

#footer{
  clear:both;    /* 不受float影响 */
  padding:10px;
  border:1px solid #000000;
  text-align:center;
}
-->

  

  这样页面的整体框架便搭建好了,这里需要指出的是content块中不能放宽度太长的元素,如很长的图片或不换行的英文等,否则links将再次被挤到content下方


  如果后期维护时希望content的位置与links对调,只需要将content和links属性中的left和right改变。这是传统的排版方式所不可能简单实现的,也正是CSS排版的魅力之一。


  另外,如果links的内容比content的长,在IE浏览器上footer就会贴在content下方而与links出现重合。

 

 

本文地址:解决网 http://www.solves.com.cn/doc-view-3602.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点

附件列表


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇如何学习CSS+DIV
下一篇div+css网页布局的五大误区

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>