做了一个测试论坛宽幅帖的本地文件

马黑黑 · 发表于 2022-1-9 11:48

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

做的有些粗糙，主要是模拟宽度场景，其他细节不考虑。下面代码是完整的 HTML 文件代码，可用记事本保存为 .html 文件，双击该文件即可用默认的浏览器打开。建议不要用 IE 类的浏览器打开，IE已被抛弃，它对 CSS3 的支持也极为有限。如果默认浏览器是 IE 类的，可右击文件→打开方式，然后选择一个自己中意的已安装的其他主流浏览器。
说一下用记事本将代码保存为 .html 文件的方法：在保存页面，选择保存类型为所有文件，并在文件名栏给文件名一个后缀 .html，比如，123.html 或我心依旧.html，就酱。编码采用的是GBK，和gb2312是一样的，如果记事本保存页面有编码选择，确保是简体中文类的编码就行。

以下是代码：

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="gbk" />
<title>帖子测试</title>
<style type="text/css">
body { margin-top: 0; }
#contain { margin: 0 auto; width: 1100px; } /* 主容器宽度 */
#top { margin: 4px auto; min-height:120px; border: 3px double olive; padding:8px; }
#mid { margin: 0 auto; padding:0 70px; background:olive; display:flex; } /* 弹性布局 */
#mLeft { width:160px; min-height:600px; padding:4px; background:#ccc; }
/* mRight拉伸，但宽度要设置，尺寸大概就好 */
#mRight { flex-grow:2; width:756px; padding:4px; background:#f1faef; padding:20px; border:1px solid olive; }
#bottom { margin: 4px auto; min-height:100px; border: 3px double olive; padding:8px; }
</style>
</head>
<body>
<div id="contain">
<div id="top">TOP</div>
<div id="mid">
<div id="mLeft">mid-LEFT</div>
<div id="mRight">
<div style="position:relative; width:1200px; height:400px;left:-300px; top:100px;padding:12px; background: rgba(0,0,0,.6);color:coral;">测试用DIV</div>
</div>
</div>
<div id="bottom">Bottom</div>
</div>
</body>
</html>