急！！！类似于下面的截图，在Dreamweaver里面，怎样用css使插入div标签中的两张图片实现水平连接并列？_百度知道
急！！！类似于下面的截图，在Dreamweaver里面，怎样用css使插入div标签中的两张图片实现水平连接并列？
还有就是利用photoShop切片以后的网页，使用Dreamwe穿肌扁可壮玖憋雪铂磨aver打开以后是以表格的形式布局的，怎样实现div布局？？？是用div标签还是div层？？麻烦高手给代码，答非所问者勿扰。
提问者采纳
默认photoshop切出来的，就是表格布局。想转换成css+div的，一般需要自己重新制作。不过有两个软件：一个是photoshop的插件，可以实现切图后导出的页面css布局。这个插件没有汉化版，如果不懂css，也不容易操作。国外还有一个是自动转换表格为div的软件。你可以找找。但是css其实非常简单，自己制作穿肌扁可壮玖憋雪铂磨一点也不麻烦。实现div布局，要学习css代码，利用dreamweaver的css面板制作比较方便。
来自团队：
其他类似问题
为您推荐：
div标签的相关知识
其他2条回答
很简单的，先重置css，然后套用两个div标签即可实现
将这两个div的float:
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁2800人阅读
网页设计（24）
1、什么是 DIV
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。它是一个容器，DIV的起始标签和结束标签之间所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。
在页面中插入div标签，其代码如下：
&div id=&id名称&&&&& 内容&& &&/div&
在页面上显示为一行的效果。它是一个块状元素，在其中放置页面内容。
因此在 div+css页面制作中只需要2个步骤，首先使用div将内容标记出来，然后为这个div编写需要的CSS样式。
2、盒子模型
盒子模型，是XHTML+CSS布局页面中的核心！要想学会用CSS布局页面，就首先要理解盒子模型！
&&& 什么是盒子模型？对于初学者来说，很难说出来，但是对于生活中的盒子应该很熟悉，这里提到的盒子模型就可以理解成现实生活中的盒子就可以了。
&&& 既然和现实生活中的盒子一样，那想一下，生活中的盒子里面存放东西的区域给他起个名字叫“content(内容)”，而盒子的纸壁给它起个名字叫“border(边框)”，如果盒子内部的东西比如是一块硬盘，但是硬盘怕震动，所以需要在硬盘的四周盒子的内部均匀填充一些防震材料，这时硬盘和盒子的边框就有了一定的距离了，称这部分距离叫“padding(内边距)”，如果需要购买许多块硬盘，还是因为硬盘怕震动所以需要在盒子和盒子之间也需要一些防震材料来填充，那么盒子和盒子之间的距离称之为&margin(外边距)&。
&&& 这下盒子模型的四要素就出来了分别是：content(内容)、border(边框)、padding(内边距)、margin(外边距)，如下图7-2所示：
图7-2& 盒子模型
&&& 页面就是由许许多多的盒子组成的，但是和现实生活中的盒子会忽略外边距(margin)，但是在页面中，是不能忽略外边距(margin)的，只有包括外边距的盒子模型在CSS中才是完整的，即使外边距为零，也不要忽略它，要知道它是存在的。
3、块状元素和内联元素
在用CSS布局页面的时候，会将HTML标签分成两种，块状元素和内联元素（我们平常用到的div和p就是块状元素，链接标签a就是内联元素）。是在CSS布局页面中很重要的两个概念，必须要理解透彻！既然说到概念就先看看块状元素和内联元素的定义。
l&&&&&&& 块状元素
一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。
l&&&&&&& 内联元素
内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
举例说明，例如要求：ID为div1的红色(#900)区域，宽度和高度均为300像素，并且包含一个ID为div2的绿色区域，长度宽度均为100像素的div2。
CSS代码如下：
#div1{width:300 height:300 background:#900;}
#div2{width:100 height:100 background:#090;}
HTML代码如下：
&div id=&div1&&
&div id=&div2&&&/div&
4&Div+CSS布局实例一
本实例使用的布局类型为封面型，实例中 box是整个页面的容器，main是主体内容，bottom是页面中的版底信息，如图7-16所示：
&&&&&&&&&&&&&&&&&&&&&&&&&& 图7-16 页面布局结构
在实例的设计制作过程中，首先分析页面的结构，制作出页面的大体布局，接着制作页面的顶端部分和页面的背景部分，然后再制作页面的主体内容、底部内容，最后完成整个页面的制作，最终页面效果图如图7-17所示：
图7-17& 页面最终效果
制作步骤如下：
【步骤1】& 打开Dreamweaver软件，建立站点，新建网页，保存命名为index.htm，另外新建1个css文件，分别保存为divcss.css。
【步骤2】& 打开窗口菜单，选择css样式子菜单，打开CSS样式面板，单击该面板上的“附加样式表”按钮 ，打开链接外部样式表对话框，将刚刚建立的css文件链接到页面中，如图7-18所示：
&&&&&&&& &&&&&&&&&&&图7-18 链接外部样式表
【步骤3】& 打开divcss.css文件，创建代码如下所示：
*{&&&&&&&&&&&
&&& margin:0
&&& border:0
&&& padding:0
&&& font-family:&宋体&;
&&& font-size:12
&&& color:#
&&& background-image:url(images/5401.jpg);
&&& background-repeat:repeat-x;
上述代码中， *为通配选择符，表示所有对象，包括所有不同id不同class的所有标记。
【步骤4】& 返回设计页面，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，如图7-19所示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 图7-19 插入div标签
&&& 打开插入div标签对话框，在“插入”下拉列表中选择“在插入点”选项，在ID下拉列表框中输入box，在页面中插入box层，如图7-20所示。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&& 图7-20 插入标签对话框参数设置
&&& 切换到divcss.css文件，创建一个名为#box的CSS规则，如下代码所示。返回设计页面中，页面效果如图7-21所示。
&&& width:1007
&&& height:605
&&& background-image:url(images/5402.jpg);
&&& background-repeat:no-
&& 图7-21 插入box层后的效果
【步骤5】& 将光标移至box层中，将多余的文字内容删除，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在开始标签之后”选项，在标签下拉列表中选择&div id=“box”&选项，在ID下拉列表框中输入top-menu，单击确定按钮，在 box层中插入top-menu层。如图7-22所示，
&&&&&&&&&&&&&&&&&&&&&&&& 图7-22 插入top-menu层
切换到divcss.css文件中，创建一个名为 #top-menu的css规则，代码如下，返回设计页面中，将多余文字删除，页面效果如图7-23所示。
#top-menu{
&&&&&& line-height:20
&&&&&& margin:10px 0px 0px 30
&&&&&& width:250
&&&&&& float:
&&&&&& text-align:
&&&& 图7-23 插入top-menu层后的效果
【步骤6】& 光标移至top-menu层中，转换到代码视图中，在该层中插入如下文字代码：
&div id=&top-menu&&首页&span&|&/span&家园&span&|&/span&互动&span&|&/span&活动&/div&
#top-menu span{
&&&&&& margin-left:5
&&&&&& margin-right:5
&&&& 切换到divcss.css文件中，创建一个名为“#top-menu span”的CSS规则，代码如下，返回设计页面中，效果如图7-24所示。
图7-24& 新建“#top-menu span”的CSS规则后的效果
【步骤7】& 将光标移至页面设计视图中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择&div id=“top-menu”&选项，在ID下拉列表框中输入main，单击确定按钮，在top-menu层之后插入main层。如图7-25所示。
图7-25插入main层
切换到divcss.css文件中，创建一个名为“#main”的CSS规则，代码如下，返回设计视图中，页面效果如图7-26所示。
&&&&&& width:428
&&&&&& height:376
&&&&&& float:
&&&&&& margin:190px 50px 0px 0
图7-26& 新建“#main”的CSS规则后的效果
【步骤8】& 光标移至main层中，将多余文字删除，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在开始标签之后”选项，在标签下拉列表中选择&div id=“main”&选项，在ID下拉列表框中输入main-top，单击确定按钮，在main层之后插入main-top层。如图7-27所示。
图7-27& 插入main-top层
切换到divcss.css文件中，创建一个名为“#main-top”的CSS规则，代码如下，返回设计视图中，页面效果如图7-28所示。
#main-top{
&&&&&& width:428
&&&&&& height:121
&&&&&& background-image:url(images/5407.gif);
&&&&&& background-repeat:no-
&&&&&& background-position:
图7-28新建“#main-top”的CSS规则后的效果
【步骤9】& 光标移至main层中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择&div id=“main-top”&选项，在ID下拉列表框中输入main-main，单击确定按钮，在main层之后插入main-main层。
切换到divcss.css文件中，创建一个名为“#main-main”的CSS规则，代码如下，返回设计视图中，页面效果如图7-29所示。
#main-main{
&&&&&& width:428
&&&&&& height:25
&&&&&& background-image:url(images/5406.gif);
&&&&&& background-repeat:no-
图7-29新建“#main-main”的CSS规则后的效果
【步骤10】& 光标移至main层中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择&div id=“main-main”&选项，在ID下拉列表框中输入main-bottomn1，单击确定按钮，在main层之后插入main-bottomn1层。
切换到div.css文件中，创建一个名为“#main-bottomn1”的CSS规则，同时创建一个名为“# main-bottomn1 img” 的CSS规则，代码如下，返回设计视图中，在main-bottomn1层中将多余文字删除，在该层中插入图像5403.jpg，选择该图片，在图像属性面板上，将该图片对齐方式设置为右对齐，在该图像左侧输入相应的文字，页面效果如图7-30所示。
#main-bottomn1{
&&&&&& width:428
&&&&&& height:72
&&&&&& border-bottom:#fff solid 1
&&&&&& margin-top:10
&&&&&& line-height:20
#main-bottomn1 img{
&&&&&& float:
&&&&&& margin:4px 15px 0px 0
图7-30新建“# main-bottomn1”的CSS规则后的效果
【步骤11】& 根据步骤10的制作方法，完成后面的main-bottomn2和main-bottomn3层的内容，页面效果如图7-31所示。
图7-31新建“# main-bottomn2”和“# main-bottomn3”的CSS规则后的效果
#main-bottomn2{
&&&&&& width:428
&&&&&& height:72
&&&&&& border-bottom:#fff solid 1
&&&&&& line-height:20
#main-bottomn2 img{
&&&&&& float:
&&&&&& margin:4px 15px 0px 0
#main-bottomn3{
&&&&&& width:428
&&&&&& height:72
&&&&&& border-bottom:#fff solid 1
&&&&&& line-height:20
#main-bottomn3 img{
&&&&&& float:
&&&&&& margin:4px 15px 0px 0
【步骤12】& 光标移至页面设计视图中，单击插入菜单，在其中下拉菜单中选择布局对象，在弹出的快捷菜单中选择div标签，打开插入div标签对话框，在“插入”下拉列表中选择“在标签之后”选项，在标签下拉列表中选择&div id=“main”&选项，在ID下拉列表框中输入bottom，单击确定按钮，在main层之后插入bottom层。
切换到divcss.css文件中，创建一个名为“#bottom”的CSS规则，同时创建一个名为“#bottom img” 的CSS规则，代码如下所示，返回设计视图中，在bottom层中将多余文字删除，在该层中插入图像logo.jpg，页面效果如图7-32所示。
图7-32& 插入bottom层
&&&&&& width:1007
&&&&&& height:28
&&&&&& background-image:url(images/5408.jpg);
&&&&&& background-repeat:repeat-x;
&&&&&& float:
&&&&&& margin-top:9
&&&&&& color:#000;
#bottom img{
&&&&&& float:
&&&&&& margin:2px 20px 0px 300
至此，页面的制作全部完成，保存该页面，预览该页面，即可得到如图7-17所示效果。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：252947次
积分：3245
积分：3245
排名：第5896名
原创：59篇
转载：94篇
评论：11条
(1)(1)(1)(1)(1)(1)(1)(1)(10)(3)(4)(3)(1)(3)(27)(4)(4)(1)(5)(5)(2)(1)(1)(1)(6)(2)(1)(1)(1)(3)(8)(22)(3)(1)(2)(1)(1)(1)(6)(6)(6)(4)(6)Promotions
Estimated Shipping
&!--[if lte IE 7]&
&link rel="stylesheet" type="text/css" href="yourIEfile.css" /&
&![endif]--&
&ul class="nav"&
&li&&a href="#"&Link one&/a&&/li&
&li&&a href="#"&Link two&/a&&/li&
&li&&a href="#"&Link three&/a&&/li&
&li&&a href="#"&Link four&/a&&/li&
/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
padding: 0;
margin: 0;
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
padding-right: 15
padding-left: 15
/* ~~ Styling for your site's links…
a:hover, a:active, a:focus {
text-decoration:
/* ~~ This fixed width container surrounds all other divs ~~ */
.container {
width: 960
background: #FFFFFF;
/* ~~ These are the columns for the layout. ~~
/* ~~ This grouped selector gives the lists in the .content area
space ~~ */
.content ul, .content ol {
padding: 0 15px 15px 40
.content .TabbedPanelsTabGroup {
padding: 0
list-style:
border-top: 1px solid #666;
margin-bottom: 15
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15
width: 160
text-decoration:
background: #C6D580;
.content { margin-right: -1 }
ul.nav a { zoom: 1; }怎样在DreamWeaver中插入DIV标签进行布局_百度知道
怎样在DreamWeaver中插入DIV标签进行布局
提问者采纳
从“新建文档”对话框的“页面设计(CSS)”类别中选择一个文件。（默认情况下，例如表格。绝对定位的DIV标签为Dreamweaver层：若要更改DIV标签的高亮颜色，您可以对其进行操作或者在其中添加内容.执行下列操作之一.◆若要插入DIV标签.从左侧的类别列表中选择“标记色彩”。◆若要查看和编辑应用于DIV标签的规则。若要更改DIV标签中的占位符文本;“CSS样式”以打开“CSS样式”面板，“查看”&gt。2，并带有占位符文本;“DIV标签”。您也可以向DIV标签添加内容：在该标签边框内的任意位置单击。如果需要.根据需要进行编辑，方法是;“可视化助理”菜单中已经选定了“CSS布局外框”.进行下面其中一项更改，请执行以下操作：单击DIV标签的边框，Dreamweaver将高亮显示此标签.应用于DIV标签的规则显示在面板中：选择该文本，Dreamweaver会高亮显示该框:查找标记色彩以查看边框，请执行以下操作。在为DIV标签分配了边框后。2。DreaWeaver更改DIV标签的高亮颜色在“设计”视图中将指针移到DIV标签的边缘上时：将插入点放在DIV标签中。来源。4。提示。如果已经给DIV标签分配了绝对位置，然后在它上面键入内容或按Delete键。）将指针移到DIV标签上时;“布局对象”&gt。有DreamWeaver使用DIV标签进行布局插入DIV标签后。您可以将Dreamweaver设计文件用作CSS布局的起始点.执行以下操作之一以选择DIV标签。3。若要在DIV标签中放置插入点以添加内容。2您可以将Dreamweaver设计文件用作CSS布局的起始点。DreamWeaver使您能够快速插入DIV标签并对其应用现有样式。4。DIV标签以一个框的形式出现文档中。3，然后就像在页面中添加内容那样添加内容.如果“CSS样式”面板尚未打开，请选择或取消选择“鼠标滑过”的“显示”复选框，请选择“窗口”&gt，请执行以下操作。◆若要更改DIV标签的高亮显示首选参数。DreamWeaver插入DIV标签进行布局可以使用DIV标签创建CSS布局块并在文档中对它们进行定位，可以启用或禁用高亮显示功能.单击“确定”，将插入点放置在要显示DIV标签的位置。这些选项会影响当指针滑过时Dreamweaver会高亮显示的所有对象，可以在“CSS样式”面板中查看和编辑它的规则，请执行以下操作。在DIV标签内单击，请执行以下操作。若要对DIV标签启用或禁用高亮显示功能，使用该标签将非常有用：1;“首选参数”(Macintosh)：1，然后从“文档”窗口底部的标签选择器中选择DIV标签，或者在“首选参数”对话框中更改高亮颜色，Dreamweaver将高亮显示标签的边框，然后按两次Ctrl+A(Windows)或Command+A(Macintosh)，请单击“鼠标滑过”颜色框并使用颜色选择器来选择一种高亮颜色（或在文本框中输入高亮颜色的十六进制值），或者在选定了“CSS布局外框”后.单击“确定”.完成对话框,即显示“首选参数”对话框.在“文档”窗口中。3;“首选参数”(Windows)或Dreamweaver&gt：选择“插入”&gt，DIV标签便具有可视边框,出现“插入DIV标签”对话框.选择“编辑”&gt。在DIV标签内单击。在“插入”栏的“布局”类别中单击“DIV标签”按钮：1，可以将内容添加到DIV标签中。就像在页面中添加内容那样。将指针移到该框的边缘上时。在选择DIV标签时，它就可充当一个Dreamweaver层。如果有一个带有附加到文档的定位样式的现有CSS样式表
相关专业回答
你对使用DIV标签进行布局的方法是否了解，这里向大家简单介绍一下，DreamWeaver使您能够快速插入DIV标签并对其应用现有样式。您可以将Dreamweaver设计文件用作CSS布局的起始点。DreamWeaver插入DIV标签进行布局可以使用DIV标签创建CSS布局块并在文档中对它们进行定位。如果有一个带有附加到文档的定位样式的现有CSS样式表，使用该标签将非常有用。DreamWea...
其他类似问题
为您推荐：
div标签的相关知识
等待您来回答
下载知道APP
随时随地咨询
出门在外也不愁}