请问这个页面用HTML+CSS怎么写?
发布网友
发布时间：2022-04-23 10:44
共3个回答
热心网友
时间：2022-04-19 06:37
整个页面具体的代码实现得靠自己，其实有一定的基础还是比较简单的。
给一个左侧宽度固定，右侧宽度自适应的写法供参考，高度可以去掉便于自适应：
<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%;}
}
热心网友
时间：2022-04-19 07:55
使用flex布局 左侧flex:0 0 宽度；右侧：flex:1
热心网友
时间：2022-04-19 09:30
亲，这个很复杂，一两句话说不清楚的，你可以给钱，外包给别人写~
