关于dreamweaver的css和div布局代码

这张图上的网页代码是怎样的，主体两个方框是如何设置的

举报该问题

推荐答案推荐于2017-09-04

<style type="text/css">
    .max{ width:800px; height:auto;}
    .top{ width:800px; height:120px; border:1px solid red; background:#6CC}
    .center{ width:800px; height:355px; border:1px solid #393; margin-top:10px;}
    .center-top{ width:800px; height:175px; }
    .center-bottom{ width:800px; height:160px; margin-top:10px;}
    .center-left{ float:left; width:380px; height:155px; border:1px solid red; margin-left:10px; margin-right:10px; margin-bottom:5px;}
    .center-right{ float:right; width:380px; height:155px; border:1px solid red; margin-right:10px; margin-bottom:5px;}
    .center-left-top{ height:25px; width:380; background:#999;}
    .center-right-top{ height:25px; width:380; background:#6CC;}
    .bottom{ background:#CCC; width:803px; height:100px; margin-top:5px;}
    .bottom-center{ width:600px; height:80px; margin-top:8px; margin-bottom:8px; text-align:center;}
</style>
<body>
    <div class="max">
    <div class="top"></div>
    <div class="center">
        <div class="center-top"></div>
        <div class="center-bottom">
            <div class="center-left">
                <div class="center-left-top">魅力华夏
                </div>
                <div class="center-left-bottom"></div>
            </div>
            <div class="center-right">
                <div class="center-right-top">人文地理
                </div>
                <div class="center-right-bottom"></div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <div class="bottom-center">内容</div>
    </div>
</div>
</body>

温馨提示：答案为网友推荐，仅供参考

当前网址：http://99.wendadaohang.com/zd/W7zXjvztWXtvtWWjXtt.html

第1个回答 2013-12-03

这个页面用DIV+CSS写是很简单的，几个DIV就可以完成，你说的主体两个方框应该是两个列表内容吧，只要设置好宽度，样式属性为：float:left;，即可并排显示。

第2个回答 2013-12-03

<style>

#body{width:900px; height:600px; background-color:#fff;}

#banner{width:850px; height:100px; background-color:#ddd; }

#main{width:850px; height:400px; border:1px blue solid; margin-top:10px; }

#neirong{width:800px; height:200px; background-color:#fff; margin-top:8px;}

#neirong_1{width:390px; height:170px; margin-top:8px; float:left; margin-left:25px; border:1px green solid;}

#neirong_2{width:390px; height:170px; margin-top:8px;float:right; margin-right:25px; border:1px green solid;}

#footer{width:850px; height:100px; background-color:#ddd; margin-top:10px;}

</style>

<center>

<body>

<div id="body">

<div id="banner"></div>

<div id="main"><div id="neirong">国家旅游局警示：禁收老年游附加费</div>

<div id="neirong_1">魅力华夏</div><div id="neirong_2">魅力华夏</div></div>

<div id="footer"></div>

</div>

</body>

</center>

我给你做出来了一个布局，你可以看一看

相似回答

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

dreamweaver中的CSS有什么用,怎么用CSS布局答：dreamweaver是编辑器，css不属于它。css主要用于修饰html页面的元素，例如：位置、尺寸大小、内外边距、字体、背景、边框等等。css有多种调用方式，较方便管理的是通过dreamweaver之类的编辑器写在css格式文件中，然后在html页面<head>中用<link>引入。关于css的具体知识可以百度一下“css教程”，可以查到许多...

dreamweaver DIV CSS 制作这样网页框架代码,要代码答：</div> <div id="div_3" style="height: 50px;"> <div id="div_3_1" style="height: 100%; float: left; width: 300px; background-color: Yellow;"> 3层左 </div> <div id="div_3_3" style="height: 100%; float: right; width: 300px; background-color: Yellow;"> 3...

Dreamweaver 里同一行插入两张图如何让两张图分别靠左右对齐?答：1、CSS布局：①CSS代码：.Container{ width:600px; height:200px; float:none; margin:0 auto;}.p1{ width:200px; height:200px; float:left; background:url(Picture1 url) no-repeat;}.p2{ width:200px; height:200px; float:right; background:url(Picture2 url) no-repeat;} ②网...

Dreamweaver div左右布局答：html代码：<div class="bigBox clearfix"> <div class="left">如何在左边？</div> <div class="right">如何在右边？</div></div><div class="clear"></div>css代码：.bigBox {margin: 0 auto; width: 960px;}.left { float: left; width: 600px;}.right { float: right; ...

dreamweaver中的css+div布局问题.弄一个这样的网页框架.谢谢啊_百度...答：<style type="text/css"> .main{ height:auto;width:800px;overflow:hidden;margin:0px auto;} .main .left{ min-height:500px;/* 这个可删除 */ height:auto;width:600px;float:left;border:1px solid #000;color:#0F0;} .main .right{ height:200px;width:180px;overflow:hidden;float:...

求Dreamweaver里面的css代码个个意思答：CSS连接属性：a /*所有超链接*/ a:link /*超链接文字格式*/ a:visited /*浏览过的链接文字格式*/ a:active /*按下链接的格式*/ a:hover /*鼠标转到链接*/ 鼠标光标样式：链接手指 CURSOR: hand 十字体 cursor:crosshair 箭头朝下 cursor:s-resize 十字箭头 cursor:move 箭头朝右 cursor:move...

问一下关于Dreamweaver以及DIV-CSS布局的一些问题.答：层内容 </div> 然后再在这个HTML页里面引用CSS文件。在CSS文件中描写这个层的样式，用HTML标签中的属性id 或者 class 区分。像上一个层，你要对它进行描述，就可以在CSS文档中写：.a { 样式内容 } 在样式内容中就可以规定这个层的例如边距、背景色、背景图等等细节。利用DIV+CSS再加上一些JS，...

跪求解答!在dreamweaver上类似这个导航栏的 div+Css 怎么写?求高人解答...答：css div.nav{position:relative; padding-right:200px; background: no-repeat right center;} div.nav ul{ background: no-repeat left center;} div.nav ul li{ float:left; margin-right:10px; padding-left:10px; background: no-repeat right center;} div.nav ul li.noline{background...

大家正在搜

dreamweaver页面布局 css div网页布局代码 divcss布局模板代码 css div布局的基本步骤使用div加css页面布局的介绍 css+div布局 divcss布局经典实例 divcss布局设计 divcss布局模板

dreamweaver中的css+div布局问题。弄一个这样...

Dreamweaver 怎么网页布局 div css布局

dreamweaver与div+css的区别

dreamweaver中的css+div布局问题.弄一个这样...

css+div通过dreamweaver布局

DW里DIV+CSS如何布局？

制作html静态网页如何使用div+css布局，用的dw

哪位大哥能给一个用Dreamweaver软件设计的网页Div...