                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /如何用CSS进行网页布局

真么搞成窗口自适应，现在大小是固定的，窗口小了就会有看不到的板块了

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

<head>

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

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

.top{height: 80px; width: 100%; background: darkslategrey;top: 0px}

.main{height: 800px; width: 100%; background: darkred}

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

.right{height: 800px; width: 70%; background:chartreuse;float: right}

.foot{height: 50px;width: 100%;background: chocolate; clear: both;bottom:0px }

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

Horizn

2018-09-12

源自：如何用CSS进行网页布局 5-3

关注问题我要回答

1203

操作

收起

4 回答

qq_雨天翔_0
2019-05-03

右边的<div>元素变成中间的<div>元素了，再参考老师最开始讲的一个混合布局做。

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

收起回答

qq_雨天翔_0
2019-05-03

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

<head>

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

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

.top{background:gray;}

.main{background:red;position:relative;}

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

.right{background:green;height:600px;margin:0 0 0 210px;}

.foot{background:orange;}

.sui{position:absolute;top:0;right:0;}

</style>

</head>

<body>

<div class="right">right</div>

</div>

</body>

</html>

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

收起回答

慕雪0722348
2018-09-14

要不是怎样的话，建议你去了解一下媒体查询

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

收起回答

慕雪0722348
2018-09-14

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <title>web experience</title>
        <link rel="stylesheet" href="web-expreience.css">
        <style>
            *{
                margin: 0;
                padding:0;
            }

            .top {
                height: 100px;
                background: #ccc;
            }
            .main {
                background: pink;
            }
            .main-common-h {
                height: 500px;
            }
            .left {
                margin-left: 20%;
                background: green;
            }
            .right {
                float: left;
                width: 20%;
                background: yellow;
            }
            .foot {
                height:50px;
                background: red;
            }
        </style>
    </head>
    <body>
    <div class="top">top</div>
    <div class="main main-common-h">
        <div class="right main-common-h">right</div>
        <div class="left main-common-h">left</div>
    </div>
    <div class="foot">foot</div>
    </body>
</html>

是这样吗？我不确定。

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

收起回答