html最清楚检查之盒子模型案例一（表格自适应）

最新推荐文章于 2024-03-08 12:28:52 发布

我是一株草我有三颗心

最新推荐文章于 2024-03-08 12:28:52 发布

阅读量532

点赞数

分类专栏：前端网站开发

本文链接：https://blog.csdn.net/weixin_44576310/article/details/90438308

版权

前端网站开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
   /*菜单栏表格*/
   .header{
       height:50px;/*高度大小限制50像素*/
       width:100%;/*屏幕的宽度*/
       background:#FDBCFF;
       position:absolute;/*位置固定*/
       top:0;/*顶距离*/
   }
   /*表格里面的按钮*/
   .header_Button{
       position:absolute;/*位置固定*/
       width:50%;/*控件大小按控件数量比例来算，如：2个按钮，屏幕长度100%，那每个按钮的长度就是100%/2=50%*/
       height:50px;/*控件高度是你需要的高度*/
       bottom:0px;/*设置一下，避免离开格子的位置*/
   }

   .main{
       background:#E9FF4C;/*背景颜色*/
       width:100%;/*屏幕宽度*/
       position:absolute;/*位置固定*/
       top:50px;/*离顶位置200像素*/
       bottom:100px;/*离底距离200像素*/
       height:auto;/*高度自动*/
   }
   .footer{
       height:100px;/*高度限制100像素*/
       width:100%;/*屏幕宽度*/
       position:absolute;/*位置固定*/
       bottom:0;/*离底位置0像素*/
       background:#9E9E9E;/*背景*/
   }
</style>
</head>
<body>
<div class="footer"></div>
<div class="main"><span>控制浏览器界面大小可以看到不同效果</span></div>
<table width="200" border="0" align="center" cellpadding="0" cellspacing="0" class="header">
<tbody>
<tr>
<td style="text-align:left"><button class="header_Button">首页</button></td>
<td style="text-align:left"><button class="header_Button">联系</button></td>
</tr>
</tbody>
</table>

</body>
</html>

我是一株草我有三颗心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html最清楚检查之盒子模型案例一（表格自适应）

<!doctype html><html lang="en"><!--position:absolute;值描述absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bo...
复制链接

扫一扫