初学WEb开发，DIV+CSS页面布局中怎么实现这个效果，求高手指点啊 或者给点资料啊 感谢、 3个div的顺序
4个回答
展开全部
首先在分两个部分,一个是html中
一个是css中
在html中如下代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link href="css.css" type="text/css" rel="stylesheet"/> //链接CSS.CSS这个文档
</head>
<body>
<div id="body"></div> //定义一个整体
<div id="1"></div> //图中1的区域
<div id="2"></div>
<div id="3"></div>
</body>
</html>
这三个div的意思就是整个页面有分成三个部分:
下面写CSS代码部分
#body{width:400px} //首先将页面分为 {1 ,2} 与 {3}两个块,其中{1,2}我用body这个包括.然后在body这个块里面划分1 2两个区域,懂????
# 1{width:400px}
#2{width:400px}
#3{width:400px;float:left}
高度自设,若是还是看不懂,建议去这个网址下个pdf的教学文档,很详细,
http://www.mycodes.net/
搜索这个网址,在里面的"教程书籍"里面下载"DIV+CSS入门教程"
DIV+CSS布局这个PDF文件,很详细.
要是还是看不懂,我也没有办法了
一个是css中
在html中如下代码:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link href="css.css" type="text/css" rel="stylesheet"/> //链接CSS.CSS这个文档
</head>
<body>
<div id="body"></div> //定义一个整体
<div id="1"></div> //图中1的区域
<div id="2"></div>
<div id="3"></div>
</body>
</html>
这三个div的意思就是整个页面有分成三个部分:
下面写CSS代码部分
#body{width:400px} //首先将页面分为 {1 ,2} 与 {3}两个块,其中{1,2}我用body这个包括.然后在body这个块里面划分1 2两个区域,懂????
# 1{width:400px}
#2{width:400px}
#3{width:400px;float:left}
高度自设,若是还是看不懂,建议去这个网址下个pdf的教学文档,很详细,
http://www.mycodes.net/
搜索这个网址,在里面的"教程书籍"里面下载"DIV+CSS入门教程"
DIV+CSS布局这个PDF文件,很详细.
要是还是看不懂,我也没有办法了
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<style type="text/css">
.big-left{float: left; width: 400px;}
.left-child{height:300px;}
.right-child{height:400px;}
.green{background: green;}
.black{background: black;}
.red{background: red;}
</style>
<div class="big-left">
<div class="left-child black"></div>
<div class="left-child red"></div>
</div>
<div class="big-left">
<div class="right-child green"></div>
</div>
.big-left{float: left; width: 400px;}
.left-child{height:300px;}
.right-child{height:400px;}
.green{background: green;}
.black{background: black;}
.red{background: red;}
</style>
<div class="big-left">
<div class="left-child black"></div>
<div class="left-child red"></div>
</div>
<div class="big-left">
<div class="right-child green"></div>
</div>
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<div style=" float:left;">
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
</div>
<div style=" float:left;">
<div style="height: 150px; width: 100px; float: left; background-color: Black;">
</div>
</div>
<div style="height: 100px; width: 100px; background-color: Red;">
</div>
<div style="height: 100px; width: 100px; background-color: Green;">
</div>
</div>
<div style=" float:left;">
<div style="height: 150px; width: 100px; float: left; background-color: Black;">
</div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
在这说比较麻烦
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
