如何用DIV+CSS进行网页样式布局

作者&投稿:卢周 (若有异议请与网页底部的电邮联系)
如何用CSS实现这个网页布局~







Document

*{ padding: 0;margin: 0; }
.clearfix:after{clear: both;content: ".";display: block;height: 0;visibility: hidden;}
.clearfix{display: block; *zoom:1;}
body{ background: #ccc;}

/* 右上导航 */
#all{ width: 100%; height: 100%;}
.Top_right{ width: 100%; padding-top: 1%;}
.Top_right span{margin:10px;}
.right{ float: right; }

/* 输入框 */
.Import{ margin: 0 auto; width: 50%; padding-top: 15%;}
.Img{ text-align: center; }
.box{ text-align: center; }

/* 底部版权 */
.Bottom{ width: 30%; margin: 0 auto;}
.copy{text-align: center; padding-top: 20%;}






导航1
导航2
导航3
导航4
导航5
















{版权}



在div里设置id或者class


然后在css样式表里定义样式
#aaa{
}
.bbb{
}


---------------

DIV+CSS通用样式布局实例代码



对于刚开始接触DIV+CSS的同学来说,记住那些对象属性以及对应的值就很困难了,更何况来完成页面的布局了







一下是一个非常简单易懂的通用样式布局,希望对于刚开始接触DIV+CSS的同学有帮助。先看效果图:

我们可以看出通常的页面布局有以下几个部分:头部、内容、底部,其中内容有左侧主显区和右侧边栏。下面贴出代码:






代码如下:


<!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">

<meta
http-equiv="Content-Type" content="text/html; charset=gbk" />

DIV+CSS practice
<link
href="css/common.css" rel="stylesheet" type="text/css" media="all" />




<div
id="head">






<div
id="content">


<!-- 右侧边栏
-->






<div
class="clear">








common.css样式文件:
*{
margin:0;
padding:0;
}
body{

background-color:gray;
}
.clear{
clear:both;
}
/*head*/

#head{
background-color:blue;
height:150px;
}
/*container*/

#container{
background-color:red;
width:960px;
height:800px;

margin:20px auto;
}
/*content*/
#content{

background-color:yellow;
float:left;
width:685px;
height:100%;

}
/*side*/
#side{
background-color:green;
float:right;

width:255px;
height:100%;
}
/*foot*/
#foot{

background-color:white;
height:150px;
width:960px;
margin:20px
auto;
}



大致布局很简单了,首先要有这个大局观,然后再完善其中的细节,学习PHP或者其他语言同样如此,首先要有一个思想,知道每一步做什么,怎么做,这样才能把知识灵活运用。

一、选择“div标签”命令
打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。

二、输入div标签名称
1、在“ID”列表框中选择“top”
2、单击“新建css规则”按钮准备进行css规则定义

三、新建css规则
在打开的对话框中保持默认设置,单击“确定”按钮进行css规则新建。

四、设置属性
1、在“分类”列表框中选择“方框”选项。
2、在窗口右侧进行css规则定义,其中margin值的设置非常重要,“left”及“right”为auto,则可让div页面水平居中。
3、单击“确定”按钮。

五、创建div按钮
返回“插入div标签”,单对话框,单击“确定”按钮,完成div标签的插入

六、查看创建的div
将鼠标光标定位在div,即可想编辑普通网页一样完成文本的编辑及图像等内容的添加。

在桌面建立一个index.htm的文件和main.css的文件,当然你也可以不用main.css的文件,但是为了方便操作,还是建一个吧。只要把记事本另存为就可以了。

做好这两个文件后我们把网页的基础代码写上去,并使index文件受到main.css的控制,我们右键选择用记事本打开index文件输入代码,并在head里写上<link href="main.css" type="text/css" rel="stylesheet">使它受到main.css控制
<html>
<head>
<title></title>

</head>

<body>
</body>
</html>

3
下面我们去main.css写一些属性看看是不是能控制index文件。我希望整个页面是粉色的,看上去温馨,我在main.css里写上*{background:#FF66FF}看看。我们打开index文件看看是不是在浏览器上是不是粉色的。在浏览器上是粉色的,表示已经受到css样式表的控制了。


DIV+CSS怎么使用
DIV+CSS我们可以分为DIV和CSS两个概念。CSS:全称为Cascading Style Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading Stylesheet)简称CSS。在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的...

为什么使用div为什么使用div+css
1.div使用的布局代码比table少,div只需要标签来实现,当你把HTML内容放在p>标签里时,可以称它为:“DIV块”,“DIV元素”,“CSS-layer”,或者简单的称之为“layer”。使用DIV标签的方法和其他标签没有什么两样:p> HTML内容 \/p> 纯粹使用DIV>标签而不加任何CSS内容,其效果与用P>\/P>是一样的。

html css中什么时候用div ,作用是什么,style type="text\/css">...<...
<DIV><\/DIV>就已经是一个盒子了 然后你可以通过CSS来定义这个盒子的样式,比如宽度,高度,背景颜色等 <style> div{width:100px;height:100px;background:#000000;color:#ffffff;} <\/style> <DIV>在这个DIV里面的内容就会是白色的,这个DIV盒子是100*100,背景色是黑色<\/DIV> 但是因为一个网页...

Div+CSS技术是干嘛用的?
DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。 CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。

div+css是什么
CSS是英语Cascading Style Sheets(层叠样式表单)的缩写,它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。DIV元素是用来为HTML文档内大块(block-level)的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含元素的特性由DIV标签的属性来控制,或者...

如何用DIV+CSS进行网页样式布局
在html网页编辑中,对于新手来讲,接触最多的就是div+css;那么如何使用div+css就行网页简单布局呢 一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分; 头部有分为店招(logo)和导航等 中间既内容部分,内容也可一个整体,也可左右分离, 底部来页面结尾,一般写版权信息,友情链接...

css+div中div是什么啊,怎么用啊
1、定义和用法 <div>可定义文档中的分区或节(division\/section)。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用id或class来标记<div>,那么该标签的作用会变得更加有效。?2、用法 <div>是一个块级元素。这意味着它的内容自动地开始...

为什么要用div+css来进行网页布局?
有时可以称其为图层。DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。定义:<div>可定义文档中的分区或节(division\/section)。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。如果用...

css中div的用法?
DIV本身就是容器性质的,不但可以内嵌table还可以内嵌文本和其它的HTML代码;CSS是CascADIngstyleSheets的简称,中文译作“层叠样式表单”,在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,...

div+css浮动布局怎么用
Div+css布局在网页设计中很常见,而布局中也经常会用到浮动(float)这个属性,那么div+css怎样浮动布局呢?一起来学习一下吧!首先,在一个新的HTML文件里面书写一个id为box的div,这个box作为最大的容器,并且里面存放了两个子div,分别是box1和box2。然后我们来设置box的样式,这里我就设置成宽高...

蓝山县19515791794: 怎么用div布局加css样式做网页 -
阙吕硫酸: 在div里设置id或者class<div id="aaa"></div><div class="bbb"></div> 然后在css样式表里定义样式#aaa{ }.bbb{ }--------------- DIV+CSS通用样式布局实例代码 对于刚开始接触DIV+CSS的同学来说,记住那些对象属性以及对应的值就很困难了...

蓝山县19515791794: div+css进行网页布局的三种方式是哪三种? -
阙吕硫酸: div+css标准准确来说是xHTML+css,布局用到多个标签,不单止是div一个,布局是div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em这些相互配合使用~~~

蓝山县19515791794: 怎么用div+css怎么制作网页,求过程 -
阙吕硫酸: 您好,div+css.首先,您要先确定版面.也就是设计版面.然后用css和div编写.(也要有图片素材) 比如:规定一个宽度为1000像素,高度为500像素,背景颜色为黑色,而且居中的区域.先确定css.#tese{ background:#000;width:1000px;height:500px;margin:auto;} 接着就是div.希望能够帮到您,谢谢.

蓝山县19515791794: 怎么应用DIV+CSS样式进行页面布局 -
阙吕硫酸: 主体内容放在html里,样式单独放在css文件里.

蓝山县19515791794: div - css是怎样来布局网页的? -
阙吕硫酸: 在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础.下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧. 详情见:http://www.blueidea.com/tech/site/2006/3574.asp

蓝山县19515791794: 怎么用css+div布局一个网页!具体的思路是怎么样的?先后顺序是怎么的? -
阙吕硫酸: div+css怎么布局div+css布局现在是主流,能提高网页加载速度,提高后期代码维护效率.步骤阅读 方法/步骤 >01 div 所谓<div>标签我们可以理解为一个盒子. 例如:<div class="top" style='border:1px solid #000;background-color:#EEE'>...

蓝山县19515791794: 怎么可以最简单的使用div+css制作网页框架 -
阙吕硫酸: 当你对一个东西感兴趣的时候你会学习的很快;就好比读书的时候某些学生某一科的成绩一直很好,新手还是不要取巧,写divcss代码的时候不要怕出错,不要怕难,碰到了问题就去寻找解决的方法,针对问题然后去解决问题是最好的解决方式...

蓝山县19515791794: 怎样才能用div和css把网页布局的很美观? -
阙吕硫酸: div+css不仅起到网页布局制作的功能还能起到代码优化,怎样才能以最快的速度打开网页.在用打开速度方面我们就要考虑到用背景定位技术,这样无论你制作的页面含有多少小图标或小图片都可以统一放在一个图片里,这样减少浏览器网客户端读取的次数..参考:www.qq.com 你右击把qq网站的背景图片,凌晨一下,在看一下那个图片,就会明白了.div+css布局制作网页时还要考虑到浏览器兼容性的问题.比如怎样兼容IE6、7、8、及火狐浏览器等常用浏览器.其实网页制作布局还有很多,我只一些例子而已.我是做网页制作布局的大家可以一起探讨一下啊.

蓝山县19515791794: 怎样用div布局网页? -
阙吕硫酸: div+css放在一起才能够布局网页.单独写div,不写对应的css样式是不能够布局网页的.

蓝山县19515791794: css和div布局到底怎么布局啊,需要经常使用哪些元素呢 -
阙吕硫酸:所谓的DIV+CSS,主要是使用CSS来控制HTML中的各种元素对页面进行布局排版. 在这里写上DIV是为了强调:过去的网页布局主要是使用table标签进行的,而使用table布局不够灵活,所以现在的网站大多数都使用div标签对网页...

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网