精华内容
下载资源
问答
  • div+css 布局

    2015-08-12 17:20:16
    div+css 的布局与优化,详细介绍了怎样用div+css布局
  • DIV+CSS布局

    2019-11-13 15:04:52
    DIV+CSS布局方法 DIV+CSS的网页标准化设计是web标准中的一种新的布局方式,正逐渐代替传统的表格(Table)布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页,采用层(DIV...

    DIV+CSS布局方法

    DIV+CSS的网页标准化设计是web标准中的一种新的布局方式,正逐渐代替传统的表格(Table)布局。尤其适合内容信息量大、板块多且经常进行版面更新的大型门户网站使用。DIV+CSS构建网页,采用层(DIV)布局,并且使用层叠样式表(CSS)来实现页面的外观,给网站浏览者更好的体验。

    DIV+CSS布局的优势:

    1、表现和内容分离,便于站点重构页面
    DIV+CSS模式具有比表格更大的优势,他将网页结构与内容相分离,代码简洁,利于搜索,方便后期维护和修改。
    2、结构清晰,对搜索引擎更加友好
    DIV+CSS构架的页面具备搜索引擎SEO的先天条件,配合优秀的内容和一些SEO处理,可以获得更好的网站排名。
    3、便于web项目开发分工协作
    DIV+CSS构架的表现和内容分离的特性使得程序员和页面设计者只要通过一定页面元素的约定便可进行各自擅长的程序控制和页面展示部分的开发,减少相互的关联性,大大提高了开发效率。

    DIV+CSS布局的操作方法:

    布局的标准形式:
    头部+导航+内容+尾部
    内容部分的布局又可分为两列右窄左宽型、两列左窄右宽型,3列宽度居中几种方式。这些页面布局的基本原则是为每个独立的部分建立一个div层,以头部+导航+两列右窄左宽型+尾部布局为例,其div布局如下:

    <div id="container">
       <div id="header">This is the Header</div>
       <div id="menu">This is the Menu</div>
       <div id="mainContent">
         <div id="sidebar"> This is the sidebar</div>
         <div id="content"></div>
       </div>
       <div id="footer">This is the footer</div>
    </div>
      

    然后利用css属性对div层进行版式等相关信息的控制
    例如sidebar层和content层的相对位置可以通过设定#sidebar{float:right}和#content{float:left}进行,即通过设定层的向右浮动和向左浮动完成定位。
    CSS对层的控制主要体现在层容器与页面相对的上下左右边距、内容与边框之间的填充边距、内容区域大小、边框变化等几个方面问题,如图所示:
    在这里插入图片描述
    width和height定义的是content部分的宽度和高度,padding、border和margin的宽度依次加在外面,背景会填充padding和content部分,通常,与页面的相对位置主要由margin属性来控制,而padding是指元素的周边和内部的内容之间所空的空格,又称为填充区域。
    在CSS的样式表定义中,进行一般的网页布局需要了解以下几个方面的问题:
    1、保持居中
    保持整体页面居中
    通过CSS的margin属性对元素进行定义可以达到控制网页显示位置的效果

    body{text-align:center;margin:0 auto;}
    

    ”margin:0 auto“代表上下边距为0, 左右边距为自动调整。
    保持页面背景居中
    页面背景的居中包括左右居中和上下居中,可使用下面的定义:

    body{background:url()#FFF no-repeat center}
    

    让url指示图片设置背景不重复(no-repeat) 并将居中(center),这个居中是左右居中,而垂直居中不需要设置,会自动居中。
    文字图片内容居中
    对于左右居中:
    text-algin:center 即可让文字与图片内容居中
    对于文字垂直居中,则要设置行高 使用line-height来实现文字与图片的垂直居中。当line-height和height的值一样时 则居中。
    2、内容排版
    在需要水平排版内容时,通过margin-left和margin-right来调整左右间距达到合适的效果,在需要垂直排版内容时,通过margin-top和margin-bottom调整上下间距达到合适效果。
    3、浏览器的兼容性
    不同的浏览器由于设计的不同,对于同样的CSS设计可能效果略有不同,所以在完成页面的设计后需要在可能碰到的浏览器上进行测试。目前较常用的浏览器有:(IE9、IE10、Google Chrome、Firefox、Opera等)。
    页面DIV布局分析
    页面结构大致分为以下几个部分:
    (1)头部区域:包含网站的标题和说明文字。
    (2)导航区域:包含一组横向导航条。
    (3)主体部分:又分为侧边栏、主题内容。
    (4)底部:包括一些版权信息。
    设计结构如图:
    在这里插入图片描述其DIV结构如下面的代码块:

    <div id="Header"><!--页面头部--></div>
    <div id="menu"><!--页面导航--></div>
    <div id="content"><!--页面主体-->
       <div class="content_left"><!--侧边栏--></div>
       <div class="content_right"><!--主题内容--></div>
    </div> 
    <div id="Footer"><!--页面底部--></div>
    

    有了这些分析,页面布局与规划已经完成,接下来就是完成HTML代码和CSS搭建出整个页面的框架。

    展开全文
  • DIV+CSS 布局

    2013-06-22 21:24:55
    DIV+CSS 布局详解,初学者学习好材料
  • div+css布局

    2013-01-20 19:42:32
    这是针对网页设计的关于div+css布局的一本电子书
  • 常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部) DIV+CSS布局:相对来说最灵活的布局方式,完全实现内容和样式的分离。 ...

    知识点:网页布局的方式

    1、网页布局

    常见的页面布局方式:表格布局、DIV+CSS布局、框架布局。

    • 表格布局:用来显示较多的数据,如OA系统、ERP系统或CRM系统。(一般用在局部)
    • DIV+CSS布局:相对来说最灵活的布局方式,完全实现内容和样式的分离。
    • 框架布局:通常用在网站后台的设计。

     

    2、DIV+CSS布局

    2.1 使用DIV+CSS制作网页流程

    第一步:将页面在整体上用<div>标签进行划分。

    第二步:使用CSS对个版块进行定位。(初学者可以给各版块添加背景颜色,帮助查看效果)

    第三步:在各版块中ti添加相应的内容,实现局部布局。

    2.2 常用布局的实现

    1、一栏式固定宽度且居中

    一栏式布局是所有布局的基础。大多数的页面,无论结构是简单还是复杂,都是在一栏式布局的基础上,再进行进一步的划分。

    <!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=utf-8" />
    <title>一栏式固定宽度且居中</title>
    <style type="text/css">
    #div1{ 
    	width:800px;/*设置div的宽度*/
    	height:300px;/*设置div的高度,实际制作网页中可以让高度自适应内容。或者根据内容人工调整高度值*/
    	background-color:#F9C;/*设置背景颜色,帮助制作者查看div的位置,网页制作完成后,可以删除背景颜色*/
    	margin:0px auto;/*设置外边距上下0px,左右auto,即可实现左右居中的效果*/
    }
    
    </style>
    </head> 
    
    <body>
        <div id="div1">一栏式固定宽度且居中
        </div>
    </body>
    </html>
    

    注意:几乎所有的页面设计的整体效果都是采用一栏式固定宽度居中,然后再在固定宽度的盒子内进行布局,其原因在于设置的种类太多,很难兼顾到所有的屏幕分辨率,采用固定宽度来适配最常用的屏幕分辨率,可以在保证效果的情况下大大的减少工作量和降低工作难度。

     

    2、 二栏式固定宽度且居中

    二栏式布局时,一般来说左右两栏会有一栏较窄,用于放置次要信息,一栏较宽,用于放置主要信息。可以是左宽右窄,也可以是右宽左窄,当然也可以左右宽度一致。

    <!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=utf-8" />
    <title>二栏式固定宽度且居中</title>
    <style type="text/css">
    #div1{ 
    	width:800px;
    	height:300px;
    	border:2px solid red;
    	margin:0px auto;/*设置外边距上下0px,左右auto,即可实现左右居中的效果*/
    }
    #left {
    	width:300px;
    	height:300px;/*left的高度也是300px,但是却超出了父级元素的高度,为什么?*/
    	border:1px solid #FF0;
    	background-color:#0FF;
    	}
    #right {
    	padding:10px;
    	margin-left:20px;	
    	width:458px;/*父级元素宽800px,left元素宽300px,right元素的宽度为什么不是500px?*/
    	height:200px;
    	background-color:#F66;
    	}
    #left,#right { float:left;}
    </style>
    </head> 
    
    <body>
    <div id="div1">
    	<div id="left">二栏式固定宽度且居中-left
    	</div>
    	<div id="right">二栏式固定宽度且居中-right
    	</div>
    </div>
    </body>
    </html>
    

    注意:多栏式布局,要实现居中,可以先做一个父级元素,让父级元素居中。然后在父级元素里添加对应的盒子即可。

    多栏式布局,还需要考虑多个盒子之间的宽度、margin、padding等数值的影响,需要精确计算。

     

    3、 三栏式固定宽度且居中

    通常用一个宽列放置主要内容,两个窄列放置导航链接等内容。

    <!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=utf-8" />
    <title>三栏式固定宽度且居中</title>
    <style type="text/css">
    #div1{ 
    	width:800px;
    	height:300px;
    	border:2px solid red;
    	margin:0px auto;/*设置外边距上下0px,左右auto,即可实现左右居中的效果*/
    }
    #left,#middle,#right {
    	float:left;
    	border:1px dashed #000;
    	margin:10px;
    	height:200px;
    	}
    #left{
    	width:100px;
    	background-color:#F9F;
    	}
    #middle {
    	width:434px;
    	background-color:#3FC;
    	}
    #right {
    	width:200px;
    	background-color:#93C;
    	}
    </style>
    </head> 
    
    
    <body>
    
    <div id="div1">
    	<div id="left">三栏式固定宽度且居中-左</div>
    	<div id="middle">三栏式固定宽度且居中-中</div>
    	<div id="right">三栏式固定宽度且居中-右</div>
    
    </div>
    
    </body>
    </html>
    

     

    4、一栏式自适应布局

    自适应布局能够根据浏览器窗口的大小,自动改变页面宽度或高度,相对于浏览器窗口保持一定的比例。是一种非常灵活的布局形式。自适应布局大多数使用百分比值作为参数的样式属性,width宽度属性也不例外。

    方法:将盒子的宽度由固定值改为百分比即可。

     

    5、二栏式自适应布局

    一般将较窄的一栏宽度设为固定值,并设置浮动方向,较宽的一栏不设置宽度,即宽度自适应,铺满剩余的部分,用于显示内容。

    <!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=utf-8" />
    <title>二栏式自适应布局</title>
    <style type="text/css">
    #div1{ 	
    	background-color:#FFC;
    	overflow:hidden;/*清除浮动塌陷*/	
          }
    #left {
    	width:100px;/*将较窄的盒子设定固定宽度*/
    	float:left;/*设置盒子向左浮动*/
    	height:300px;
    	background-color:#0FF;
    	}
    #right {/*较宽的列不设置宽度,让其自适应宽度*/
    	margin-left:110px;/*设置盒子左外边距110px=左侧盒子的宽度+适当的边距*/
    	height:200px;
    	background-color:#F66;
    	}
    </style>
    </head> 
    
    <body>
    <div id="div1">
    	<div id="left">二栏式自适应布局-left
    	</div>
    	<div id="right">二栏式自适应布局-right-较宽的一列不需要设置宽度,自适应宽度。同时设置左外边距,左外边距=左侧列表的固定宽度值+一定的外边距
    	</div>
    </div>
    </body>
    </html>
    

     

    3、框架布局

    通过使用框架,你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架,并且每个框架都独立于其他的框架。

     

    3.1 框架结构标签

    框架包含<frameset>和<frame>两个标签,其中<frameset>描述窗口的分割,<frame>定义放置在每个框架中的HTML页面。

    基本语法:

    <!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=utf-8" />
    <title>框架布局</title>
    </head>
    
    <frameset 属性="属性值">
        <frame src="HTML页面路径" />
        <noframes>浏览器不支持框架时的显示内容</noframes>
    </frameset>
    
    </html>
    

    注意:

    • <frameset>用于定义一个框架集,用于组织多个窗口(框架),每个框架有独立的HTML文档。有两个属性值:cols和rows,用来规定框架集存在多少列或者多少行。
    • <noframes>用于定义不支持框架集的浏览器时,显示内容。<noframes>位于<frameset>内部。
    • <frameset>不能和<body>标签共同使用,除非使用<noframes>将<body>包含在里面。
    • <frame>用于定义一个框架集中一个特定的窗口(框架),是一个单标签。
      • 使用 src 属性,定义需要显示的html文档
      • 使用 framborder 属性定义框架的外边框,属性值为0或者1。
      • 使用 scrolling 属性定义是否显示滚动条,有 yes、no 和 auto 3个属性值。
      • 使用 noresize = "noresize" 定义该框架无法调整大小,这个不是默认值。默认是可以调整大小的。
      • 使用 marginheight  和 marginwidth 属性定义上下左右的边框。

     

    示例练习1:制作左右框架布局

    框架布局

    关键代码:

    <!DOCTYPE html >
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>框架布局-王迪</title>
    	</head>
    	<frameset cols="40%,55%">
    		<frame src="http://www.baidu.com" />
    		<frame src="http://www.taobao.com" />
    		<noframes>
    			<body>您的浏览器无法处理框架!请更换浏览器打开!</body>
    		</noframes>
    	</frameset>
    </html>

     

    示例练习2:使用html文档制作左右框架布局

    关键代码:

    <!DOCTYPE html >
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>框架布局-王迪</title>
    	</head>
    	<frameset cols="30%,*">
    		<frame src="left.html" noresize="noresize" />
    		<frame src="right.html" />
    		<noframes>
    			<body>您的浏览器无法处理框架!请更换浏览器打开!</body>
    		</noframes>
    	</frameset>
    </html>
    

    制作步骤:

    1、分别制作两个html文档,并命名为 left.html 和 right.html ,根据需要,在body里填写内容

    2、另外制作一个html文档,可以自己命名,在该文档里,使用 <frameset>

    注意:一共三个文档,建议保存在同一个文件夹中,这样在使用src属性的时候方便使用相对路径。

     

    示例练习3:使用html文档制作复杂框架布局

    html框架布局

    关键代码:

    <!DOCTYPE html >
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>框架布局-王迪</title>
    	</head>
    	<frameset rows="30%,*">
    		<frame src="top.html" noresize="noresize" />
    		<frameset cols="20%,80%">
    			<frame src="left.html" />
    			<frame src="right.html" />
    		</frameset>
    		<noframes>
    			<body>您的浏览器无法处理框架!请更换浏览器打开!</body>
    		</noframes>
    	</frameset>
    </html>

    注意:<frameset>标签可以嵌套<frameset>,在进行布局的时候,提前规划好布局比例。

     

    示例练习4:使用框架集制作导航框架

    框架集做导航

    实现方法:

    第一步:制作nav.html

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="{CHARSET}">
    		<title></title>
    	</head>
    	<body>
    		<a href="http://www.baidu.com" target="showFrame">百度</a><br />
    		<a href="http://www.taoboa.com" target="showFrame">淘宝</a><br />
    		<a href="http://www.sina.com.cn" target="showFrame">新浪</a><br />
    	</body>
    </html>
    

    第二步:制作框架集页面 

    <!DOCTYPE html >
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    		<title>用框架集作导航-王迪</title>
    	</head>
    	<frameset cols="100px,*">
    		<frame src="nav.html" noresize="noresize" />
    			<frame src="http://www.baidu.com" name="showFrame" />		
    		<noframes>
    			<body>您的浏览器无法处理框架!请更换浏览器打开!</body>
    		</noframes>
    	</frameset>
    </html>
    

     

     

     

     

    展开全文
  • div+css布局大全

    千次下载 热门讨论 2007-03-22 13:13:17
    div+css布局大全 B/S项目表现层也很重要!
  • div+css布局制作箭头步骤流程样式 - div+css教程 案例源码 志峰创业室提供技术支持微信公众平台开发,是移动互联网开发API供应商,是移动互联解决供应商
  • div+css布局实例html网站模板
  • div+css布局学习html模板下载
  • 简洁单页div+css布局网站模板
  • 都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称。DIV+CSS布局是现在非常流行的布局方法,替代了...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 9,470
精华内容 3,788
关键字:

div+css布局