Question

请问这个页面用HTML+CSS怎么写？

要求是左侧菜单栏定宽度，右侧板块自适应。

Answer 1

整个页面具体的代码实现得靠自己，其实有一定的基础还是比较简单的。

给一个左侧宽度固定，右侧宽度自适应的写法供参考，高度可以去掉便于自适应：

<style>
    .contianer{margin:0 auto;width:100%;}
    .menu{float:left;width:240px;height:100px;background:#e99;}
    .page-right{margin-left:240px;height:100px;background:#88f;}
</style>

<div class="contianer">
    <div class="menu">
        左侧固定宽度
    </div>
    <div class="page-right">
        右侧自适应宽度
    </div>
</div>

追问

还有能不能告诉我右侧自适应内的四个板块应该怎么搭建，是左右两个用一个父级包住，还是上下两个用一个父级包住，还是四个独立用浮动？我现在的问题是浏览器一缩小，右边的板块会掉下去。

追答

自适应只能设置子版块为百分比宽度。可以使用媒体查询根据浏览器宽度调整子版块大小（不兼容低版本浏览器），或者使用javascript根据浏览器宽度调整子版块大小。
媒体查询的例子如下（改变浏览器宽度查看效果）：

.item {height:100px;background:#4aa}
@media screen and (max-width: 1200px) {
.item {width:50%;}
}
@media screen and (max-width: 960px) {
.item {width:100%;}
}

Answer 2

使用flex布局 左侧flex:0 0 宽度；右侧：flex:1

Answer 3

亲，这个很复杂，一两句话说不清楚的，你可以给钱，外包给别人写~