为了账号安全,请及时绑定邮箱和手机立即绑定

正在回答

4 回答

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>混合布局编程挑战</title>
<style type="text/css">
body{ margin:0; padding:0; font-size:30px; color:#fff}
.top{
    width:100%;
    height:100px;
    background-color:#CCC;
    }
.main{
    width:;
    height:500px;
    background-color:#F00;
    }
.left{
    width:200px;
    height:500px;
    background-color:#03C;
    position:absolute;
    left:0;
    top:100;
    }
.right{
    width:99%;
    height:500px;
    background-color:#9C9;
    float:left;
    margin-left:205px;
    }
.foot{
    width:100%;
    height:70px;
    background-color:#C60;    
    clear:both;
    }
</style>

</head>

<body>
<div class="top">top</div>
<div class="main">
    <div class="right">right</div>
    <div class="left">left</div>
</div>
<div class="foot">foot</div>

</body>
</html>

0 回复 有任何疑惑可以回复我~
#1

猪猪的笨笨 提问者

恩,谢谢
2016-03-03 回复 有任何疑惑可以回复我~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>混合布局编程挑战</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff}

.top{height:100px;background:#ccc;}

.main{height:800px;width:100%;background:red;position:relative;}

.left{width:200px;height:800px; background:blue;float:left;}

.right{height:800px;background:#9FC;position:absolute;left:220px;}

.foot{height:100px;background:#F90;clear:both;}

</style>


</head>


<body>

<div class="top">top</div>

<div class="main">

    <div class="right">right本right才是自适应好本right才是自适应好吗本right才是自适应好吗本right才是自适应好吗本right才是自适应好吗吗本right才是自适应好吗,别误导学院啊</div>

    <div class="left">left</div>

</div>

<div class="foot">foot</div>


</body>

</html>


0 回复 有任何疑惑可以回复我~

对,刚开始调试是用float,忘记去掉了

0 回复 有任何疑惑可以回复我~
#1

猪猪的笨笨 提问者

恩恩 0.0
2016-03-07 回复 有任何疑惑可以回复我~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>混合布局编程挑战</title>

<style type="text/css">

body{ margin:0; padding:0; font-size:30px; color:#fff;}

.top{height:100px;background:#ccc;margin:0 auto;}

.main{height:500px;background:#f00;}

.left{width:200px;height:500px;;background:blue;position:absolute;left:0;top:100px;}

.right{height:500px;background:green;margin-left:205px;}

.foot{width:100%;background:red;margin:0 auto;clear:both;}

</style>


</head>


<body>

<div class="top">top</div>

<div class="main">

    <div class="right">设计首页的第一步是设计版面布局。就象传统的报刊杂志编辑一样,我们将网页看作

    一张报纸,一本杂志来进行排版布局。 虽然动态网页技术的发展使得我们开始趋向于

    学习场景编剧,但是固定的网页版面设计基础依然是必须学习和掌握的。它们的基本

    原理是共通的,你可以领会要点,举一反三。</div>

    <div class="left">left</div>

</div>

<div class="foot">foot</div>


</body>

</html>



楼上right好像不自适应

0 回复 有任何疑惑可以回复我~
#1

猪猪的笨笨 提问者

我刚刚又看了一遍,的确是错的。他那个可以修改一下:把body中的两个子div调换顺序,同时把right的float和width属性去掉就好了。
2016-03-05 回复 有任何疑惑可以回复我~
#2

猪猪的笨笨 提问者

你的foot的clear属性可以去掉哦,因为,没有float属性,就不需要clear属性。嘿嘿~
2016-03-05 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
如何用CSS进行网页布局
  • 参与学习       209624    人
  • 解答问题       1153    个

用最简洁的案例教你布局的那些知识,这是前端工程师基本技能

进入课程

锦囊是错的,请更正

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信