html部分：
<html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<div id="全局">
<div class="首页上面">
<div class="logo标志">
标志
</div>
<div class="竖距"></div>
<div class="菜单">
菜单
</div>
<div class="竖距"></div>
<div class="注册登录">
注册
</div>
</div>
<div class="横距"></div>
<div class="首页中间">
<div class="最新文章">
文章
</div>
<div class="竖距"></div>
<div class="热门文章">
文章
</div>
</div>
<div class="横距"></div>
<div class="首页下面">
<div class="页脚">
页脚
</div>
</div>
</div>
</body>
</html>
css部分：
@charset "UTF-8";
body {
padding:0;
margin:0;
line-height:center;
}
/*全局开头*/
#全局 {
width:960px;
margin:0 auto;
line-height:left;
background:#abc;
}
.竖距 {
float:left;
width:10px;
height:100px;
}
.横距 {
float:left;
width:100%;
height:10px;
}
/*首页上面部分*/
.首页上面 {
width:100%;
height:100px;
}
.logo标志 {
float:left;
width:220px;
height:100px;
background:#aaa;
}
.菜单 {
float:left;
width:500px;
height:100px;
background:#aaa;
}
.注册登录 {
float:left;
width:220px;
height:100px;
background:#aaa;
}
/*首页中间部分*/
.首页中间 {
width:100%;
height:500px;
}
.最新文章 {
float:left;
width:700px;
height:490px;
background:#eee;
}
.热门文章 {
float:left;
width:250px;
height:490px;
background:#eee;
}
/*首页下面部分*/
.首页下面 {
width:100%;
height:110px;
}
.页脚 {
float:left;
width:960px;
height:100px;
background:#515151;
}
效果图片：
可能对你有帮助的内容：金币获取 | v7a,v8a,all等APK版本怎么选？ | 下载帮助 | 阿里云代金券
文章名称：简单制作的 html网站布局案例 全中文标注【个人学习案例1】
文章链接：https://www.jipinsoft.com/1860.html
免责声明：根据《计算机软件保护条例》第十七条规定“为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬。”您需知晓本站所有内容资源均来源于网络，仅供用户交流学习与研究使用，版权归属原版权方所有，版权争议与本站无关，用户本人下载后不能用作商业或非法用途，需在24个小时之内从您的电脑中彻底删除上述内容，否则后果均由用户承担责任；如果您访问和下载此文件，表示您同意只将此文件用于参考、学习而非其他用途，否则一切后果请您自行承担，如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。
