怎么进行divcss网页布局

作者&投稿:承享 (若有异议请与网页底部的电邮联系)
~

1

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

2

做好这两个文件后我们把网页的基础代码写上去,并使index文件受到main.css的控制,我们右键选择用记事本打开index文件输入代码,并在head里写上<linkhref="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样式表的控制了。

4

下面我们进行布局一般网页都是3层一级,所以我们需要div布局了在body里面写一般我会先分为3层

<html>

<head>

<title></title>

<linkhref="main.css"type="text/css"rel="stylesheet">

</head>

<body>

<divid="top">

<divid="top1"></div>

<divid="top2"></div>

<divid="top3"></div>

</div>

</body>

</html>

5

布局好后我们需要去定义属性了,这里我只是简单的定义了一下

*{background:FF33FF}

top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}

top1{background:66FFFF;height:50px;width:800px;}

top2{background:FF00CC;height:400px;width:800px}

top3{background:FF9933;height:550px;width:800px}

定义好了我们打开预览一下看看,图片是不是居中和分成3块了。当然,颜色只是为了方便看清楚,可以不写。

6

其实做网页就是不断的画框,只要知道布局和定义属性就可以了,下面我们就整个做一下,因为我的有一些是一样的,可以用class调用,class=这个只是随便写的,你爱等于什么就等于什么

<html>

<head>

<title></title>

<linkhref="main.css"type="text/css"rel="stylesheet">

</head>

<body>

<divid="top">

<divid="top1">这里都是我截图的照片</div>

<divid="top2">

<divclass=""></div>

<divclass=""></div>

</div>

<divid="top3">

<divclass="jingyan"></div>

<divclass="jingyan"></div>

</div>

</div>

</body>

</html>

7

下面我们再去定义他的属性,当然我只是简单的定义一下

*{background:FF33FF}

top{background:FFFF99;height:1000px;width:800px;margin-left:auto;margin-right:auto}

top1{background:66FFFF;height:50px;width:800px;text-align:center;line-height:50px;font-size:30px}

top2{background:FF00CC;height:400px;width:800px}

top3{background:FF9933;height:550px;width:800px}

.{background:FF6666;height:380px;width:380px;float:left;margin:10px}

.jingyan{background:FFCC00;height:530px;width:380px;float:left;margin:10px;}

8

因为我这个是我截图相册的网页,下面我们就放照片吧,这里我偷个懒,把照片都放在桌面了,所以不用连接照片地址了。

<html>

<head>

<title></title>

<linkhref="main.css"type="text/css"rel="stylesheet">

</head>

<body>

<divid="top">

<divid="top1">这里都是我老婆的照片</div>

<divid="top2">

<divclass=""><imgsrc="QQ图片20141212090452.jpg"></div>

<divclass=""><imgsrc="QQ图片20141212090346.jpg"></div>

</div>

<divid="top3">

<divclass="jingyan"><imgsrc="QQ图片20141212090224.jpg"></div>

<divclass="jingyan"><imgsrc="QQ图片20141212090255.jpg"></div>

</div>

</div>

</body>

</html>

如果图片不在同一层目录,就需要连接到图片地址

9

这样一个网页就做好了,如果需要制作精美的网页,就需要不断的进行div布局和css样式的规定了。

10

下面我来说说网页制作的定义,网页的制作只要会使用div不停的布局,不停的定义他的属性,基本静态的网页就是这样做出来的




怎么进行divcss网页布局
下面我们进行布局一般网页都是3层一级,所以我们需要div布局了在body里面写一般我会先分为3层 <html> <head> <title><\/title> <linkhref="main.css"type="text\/css"rel="stylesheet"> <\/head> <body> <divid="top"> <divid="top1"><\/div> <divid="top2"><\/div> <divid="top3"...

如何用DIV+CSS进行网页样式布局
doctype html html head meta charset="utf-8" title淘宝助手网\/title style #top{ width:1200px; height: auto; margin:0 auto; color:#FFF;} #logo{ width:100%; height:100px; background: #003; } \/style \/head body div id="top" div id="logo"...

怎么学好divcss怎么学好汽修
1.学HTML语言,再学DIVCSS就得心应手了。如果你能理解HTML语法,你就能看透世界上80%的网站。Html很好学,一定要背一些常用代码。由于dreamweaver等工具有助于生成HTML代码,许多人忽略了对HTML的研究。学完HTML互联网最基础的语言,当你学习DIVCSS的时候,你会发现DIVCSS也就那么回事,小菜一碟。2.用D...

divcss圆角边框怎么设置
设置div元素的圆角边框可以使用CSS的border-radius属性。详细解释如下:一、了解border-radius属性 CSS3中的border-radius属性用于设置HTML元素的边框圆角。这个属性可以接受像素值或其他长度单位,来决定圆角的程度。它可以分别设置四个方向的边框圆角,例如:border-top-left-radius、border-top-right-radius、...

如何用DIV+CSS进行网页样式布局
一、选择“div标签”命令 打开dreamweaver,新建网页并保存为“die.html”,选择【插入】【布局对象】【div标签】命令,打开“div标签”对话框。二、输入div标签名称 1、在“ID”列表框中选择“top”2、单击“新建css规则”按钮准备进行css规则定义 三、新建css规则 在打开的对话框中保持默认设置,单击“...

怎么可以最简单的使用div+css制作网页框架
1、布局先把大框架确定,再逐步把内部的细节构建出来,从层级关系来看就是由外往内布局;2、如果你对divcss不是很熟悉,那么你可以先以图片作为背景图片代替 3、如果对布局定位不是很熟练,那么可以暂时以绝对位置来布局 4、自己不熟悉的情况下,在设计平面页面的时候就要先考虑到自己是否有能力写出这个...

简述CSS+DIV布局的常用方法。
【答案】:CSS+DIV布局的常用方法有三种:一、 常规流式布局 元素按照自身的常规显示方式显示,有两个特点:1.元素按照自身HTML元素定义的位置显示(怎么写的怎么显示)2.元素按照自身的常规显示特性显示,比如块级元素垂直排列,行级元素水平排列。二、 浮动 具体代码:左浮动 float:left;右浮动 float:...

DIVCSS怎么做网页
第一、float属性:DIV(层)默认是占据一整行,对于常见的两列或多列布局的设计,需要能够正确设置float及width属性实现效果。多列布局结束后如果跟了一个占据通栏的层,此时需要设置clear属性清除层浮动。第二、盒模式:层具有宽度width、高度height、边框border、内间距padding和外间距margin等属性,而层...

为什么用divcss布局
3、使页面载入得更快。页面体积变小,浏览速度变快,由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小。相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载。而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢。4、保持视觉的一致性。以往...

为什么要用div+css来进行网页布局?
注释:<div>是一个块级元素,也就是说,浏览器通常会在div元素前后放置一个换行符。提示:请使用<div>元素来组合块级元素,这样就可以使用样式对它们进行格式化。用法:<div>是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是<div>固有的特定的格式表现。可以通过<div>的class...

乌兰浩特市18580179252: 请问div+css网页布局具体要怎样做呢??
宓司瑙瑞: 我来带你切一遍: 首先,竖着切一刀,分成左右两块:左边div id=leftwrap,右边div id=rightwrat 然后,把leftwrap横切一刀,分成logo(花藤和木牌)和category(产品分类);右边切成5块,分别是:navigator(导航条),banner(广告图片),new_product(最新产品),hot_product(热点产品),footer(剩余的部分) OK了!

乌兰浩特市18580179252: 怎么应用DIV+CSS样式进行页面布局 -
宓司瑙瑞: 主体内容放在html里,样式单独放在css文件里.

乌兰浩特市18580179252: div+css进行网页布局的三种方式是哪三种? -
宓司瑙瑞: div+css标准准确来说是xHTML+css,布局用到多个标签,不单止是div一个,布局是div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em这些相互配合使用~~~

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

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

乌兰浩特市18580179252: 请简述div+css布局网站流程 -
宓司瑙瑞: 1. 整理网站需求2. UE设计网站框架3. UI完成网站效果图4. web前端开发者切图5. 用div+css实现网页效果

乌兰浩特市18580179252: 用div css布局网页的技巧? -
宓司瑙瑞: 单行一列Example Source Code body{margin:0px;padding:0px;text-align:center;} #content{margin-left:auto;margin-right:auto;width:400px;} 两行一列 Example Source Code body{margin:0px;padding:0px;text-align:center;} #content-top{...

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

乌兰浩特市18580179252: 怎么是DIV+CSS排版? -
宓司瑙瑞: DIV+CSS是网站标准(或称“WEB标准”)中常用术语之一,div+css 是一种网页的布局方法,这一种网页布局方法有别于传统的HTML网页设计语言中的表格(table)定位方式,真正地达到了w3c内容与表现相分离

乌兰浩特市18580179252: 如何用css进行网页布局 -
宓司瑙瑞: 实现网页布局的方式方法比较多,布局方式可以大概分为这几类.布局种类:1、table布局(网页的兴起,1995)2、Flash布局(自由的黄金时代,1996)3、div+css(CSS的诞生,1998)4、栅格与响应式(移动端的兴起,2007与2010) 当前...

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