导航:首页 > 万维百科 > 网页设计div的用法

网页设计div的用法

发布时间:2020-12-09 20:36:46

1、写出使用div+css布局制作网页的步骤。

怎么说,按照我平时的方法简单说一下吧
首先创建好整体框架
如:
<body>
<div id="wrapper">
<div id="header"></div><!--头部-->
<div id="container"></div><!--内容部分-->
<div id="footer"></div><!--页脚-->
</div>
</body>

接着在这个框架下开始写入信息,如logo以及导航信息,以及内容,以及页脚
编写好后,再编写css样式,
创建一个style.css的样式,在这个样式表里面写入网页标签的颜色,大小,背景。。。。。。。
最后测试网站的链接是否正常
完成,
希望能帮助你

2、网页设计中采用div+css布局,这里的DIV是什么意思?

DIV是层叠样式表中的定位技术,全称DIVision,即为划分。有时可以称其为图层。
DIV在编程中又叫做整除,即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。

3、请问标签<div>在网页制作中,是起到什么作用,什么时候要用到标签??

<div>的作用是产生一个容器,使得可以对这个容器里面的所有内容进行操作。

容器也可以理解为网页上的一块。

<div>产生的容器会单独占一段,需要把不分段时使用<span>建立容器。

4、网页设计里让一个div标签里的文字竖直居中用哪个标签?

如果是单行文字想垂直居中,只要保证div高和行高保持一致,就可以了。用下面的代码即可实现:

CSS代码:

#div-a{
height:60px;
line-height:60px;
}

HTML代码:

<div id="div-a">
......
</div>

如果是多行文字,上面的垂直居中的方法就不行了,得用变通的方法实现;这里建议使用table方法,在table外面再套上相应的div,

代码如下:

<table>
<tr><td style="vertical-align:middle;height:300px;background-color:red">
</td></tr>
</table>

多行文字居中还有另外一种方法:

多行内容居中,且容器高度可变,也很简单,给出一致的 padding-bottom 和 padding-top 就行:

.middle-demo-2
{
padding-top: 24px;
padding-bottom: 24px;
}

5、怎么可以最简单的使用div+css制作网页框架

1、布抄局先把大框架确定,再逐步把袭内部的细节构建出来,从层级关系来看就是由外往内布局;
2、如果你对divcss不是很熟悉,那么你可以先以图片作为背景图片代替
3、如果对布局定位不是很熟练,那么可以暂时以绝对位置来布局
4、自己不熟悉的情况下,在设计平面页面的时候就要先考虑到自己是否有能力写出这个页面的布局出来,或者说自己写出来的不出问题;比如圆角、阴影、半透明效果、模块错位叠加等等;

其实页面布局是否简单只是相对而言的,精通的人和新手的看法肯定不同,从长远来看,新手还是不要取巧,写divcss代码的时候不要怕出错,不要怕难,碰到了问题就去寻找解决的方法,针对问题然后去解决问题是最好的解决方式,当你不再碰到问题或者很少碰到问题的时候,就说明你已经精通或者离精通不远了

还有一点要说一下,学习得有一个喜欢的态度,不要当做负担或者任务来学习,当你对一个东西感兴趣的时候你会学习的很快;就好比读书的时候某些学生某一科的成绩一直很好,绝大部分人其实都是感兴趣才会学的那么好

6、网页设计页面布局使用div+css是什么意思,还有怎么插入图片,谢谢各位大神

div模型,搭上css样式
用<img src="图片地址" alt="显示不出来的时候的文字" />插入图片

7、网页设计的一个问题。使用div+css不能成功布局.div布局设计如图所示.

给你个大概的思路,因为没有代码也不好分析你那里出问题了
你A没问题,我们就不管他了
做B的时候你先用一个总的DIV,然后把你的B1 B2 B3都写在B里面,记得给浮动,这样就OK了
下面是代码
.B{width:980px; height:500px; float:left;}
.B1{width:500px; height:500px; float:left;}

.B2{width:480px; height:250px; float:left;}

.B3{width:480px; height:250px; float:left;}

<div class="B">
<div class="B1"></div>
<div class="B2"></div>
<div class="B3"></div>
</div>

8、考核内容: 首先使用div标记制作这样的网页: 然后,按照CSS的设计规则,完成如下要求: (1

<style>
body{
margin:0;
padding:0;
width:800px;
background:#fff;
}
a{
color:red;
}
a:hover{
color:blue;
text-decoration:none;
}
.title{
background:#ccf;
color:white;
}
.title1{
height:70px;
color:#388821;
}
.title2{
background:#99f;
color:white;
}
.left:hover,.right:hover{
width:100px;
background-color:#fafaf0;
text-align:center;
border:1px solid black;
background:white;
}
</style>
<div class="title">
我的网页
</div>
<div class="title2">
个人资料
</div>
<div class="left">
<a href="#">链接a</a>
</div>
<div class="right">
<a href="#">链接b</a>
</div>
不知道是不是专你要的效属果

9、用div怎样制作网页特效

启动dreamweaver cs5,执行文件-新建命令,在弹出的新建文档对话框选择html文件,点击创建按钮。
网页中如何使用div展示图片效果
在标签<title>无标题文档</title>中修改名称为<title>div布局图片效果</title>。
网页中如何使用div展示图片效果
在<title>标签下方输入<style>相关的代码,定义网页的整体样式,样式直接影响着网页的美观程度。
网页中如何使用div展示图片效果
接着在<body>中输入div标签三个,并分别设置他们所属于的类,最外边的div设置类为db,中间两个分别为zpxc1和zpxc,在下方就会看到基本的框架效果。
网页中如何使用div展示图片效果
外部的框架设计好之后,接着设计使用div布局图片,书写相应的代码,设置div的尺寸大小和相关属性,同时设计图片的相关属性。
代码为:
div.pt img{margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid #333;}
div.pt{float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}
.pic{ float:right;}
在类为zpxc1的div中建立新的四个div,并设置img的 src属性值,对图片进行正确的链接。
按f12进行在浏览器中进行预览效果,出现提醒信息“是否将改动保存到”,直接点击是,找一个合适的位置进行保存。
接着在类为zpxc的div中输入“作品展示”四个字,再次才看效果,如果不合适可进行再次修改。
如果图片过多,可以修改类zpxc1和db的高度,反复修改直至合适为止,重复步骤6、7采用同样的方法建立多个图片div。
如果对“作品展示”四个字不满意的话,可以使用图片进行替换,达到满意为止,再次按f12进行在浏览器中进行查看效果,
执行文件-另存为命令,在弹出的对话框中输入名称为“div布局图片”,找到一个合适的位置进行保存即可。

10、dreamweaver制作网页中AP div和div如何分配使用?

AP div实际上是附加了复定位的css样式的div。两个在本质上是制一样的,为了方便初学者更好地调整DIV的大小和位置,dreamweaver里面可以用AP div的方式来进行布局。但是实际上这种布局用div也是可以非常容易地实现的。在css里面定义一下with和height就可以控制DIV的大小了,使用position可以控制这个div是绝对定位还是相对定位,使用float可以控制div的左右位置,使用margin可以控制它的外边距,等等。。。相对而言,AP div就不那么灵活了。
建议你先学一学css相关的知识,对于学习制作网页还是很有帮助的。

与网页设计div的用法相关的知识