1.目录结构
2.index.html
源代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta keywords="HTML5 布局">
<meta content="网页布局">
<title>网页布局</title>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div class="top-warpper">
<!--头部 begin-->
<div class="header center">
<div class="logo fl"><img src="img/websitelog.png" alt=""></div>
<div class="tel fr"><img src="img/tel.png" alt=""></div>
</div>
<!--头部 end-->
<!--导航 begin-->
<div class="nav">
<nav class="center">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">公司简介</a></li>
<li><a href="#">新闻中心</a></li>
<li><a href="#">通知公告</a></li>
<li><a href="#">产品介绍</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">招募英才</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
<!--导航 end-->
<!--banner begin-->
<div class="banner center">
<img src="img/banner.png" alt="">
</div>
<!--banner end-->
</div>
<!--页面主体 begin-->
<div class="main center">
<div class="main-left fl">
<!--二手房出售信息推荐 begin-->
<div class="moudle info">
<div class="title">新闻中心</div>
<div class="content">
<ul>
<li><i class="i-list"></i><a href="#">环境好，交通方便。</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">学区房降价调优。</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">别墅出租。</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">优惠来了，在2019-08-20前购房有优惠哦。</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">交通方便好，交通方便。</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境环境好，绿化好。</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">靠近二环，交通方便。</a><time>2019-08-08</time></li>
</ul>
</div>
</div>
<!--二手房出售信息推荐 end-->
<!--二手房出租信息推荐 begin-->
<div class="moudle notice notice-down">
<div class="title">产品介绍</div>
<div class="content">
<ul>
<li>
<a href="#">
<div class="img"><img src="img/house1.jpeg" alt=""></div>
<div class="txt">
<h2>暖色调，宽敞，明亮</h2>
<span>￥780</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img"><img src="img/house2.jpg" alt=""></div>
<div class="txt">
<h2>黄金楼层，学区房</h2>
<span>￥520</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img"><img src="img/house3.jpg" alt=""></div>
<div class="txt">
<h2>高等小区，居家shiyi</h2>
<span>￥560</span>
</div>
</a>
</li>
<li>
<a href="#">
<div class="img"><img src="img/house4.jpg" alt=""></div>
<div class="txt">
<h2>宽敞舒适</h2>
<span>￥780</span>
</div>
</a>
</li>
</ul>
</div>
</div>
<!--二手房出租信息推荐 end-->
<!--信息推荐 begin-->
<div class="moudle people">
<div class="title">员工风采</div>
<div class="content">
<ul>
<li>
<div class="img fl"><img src="img/people1.jpg" alt=""></div>
<div class="txt fr">
<span>姓名：张三</span>
<span>职位：经理</span>
<span>学历：博士</span>
</div>
</li>
<li>
<div class="img fl"><img src="img/people2.jpg" alt=""></div>
<div class="txt fr">
<span>姓名：王刚</span>
<span>职位：经理</span>
<span>学历：本科</span>
</div>
</li>
<li>
<div class="img fl"><img src="img/people3.jpg" alt=""></div>
<div class="txt fr">
<span>姓名：张莉</span>
<span>职位：经理</span>
<span>学历：本科</span>
</div>
</li>
<li>
<div class="img fl"><img src="img/people4.jpg" alt=""></div>
<div class="txt fr">
<span>姓名：赵海</span>
<span>职位：经理</span>
<span>学历本科：</span>
</div>
</li>
<li>
<div class="img fl"><img src="img/people5.png" alt=""></div>
<div class="txt fr">
<span>姓名：刘若男</span>
<span>职位：经理</span>
<span>学历：本科</span>
</div>
</li>
<li>
<div class="img fl"><img src="img/people6.jpeg" alt=""></div>
<div class="txt fr">
<span>姓名：李本新</span>
<span>职位：经理</span>
<span>学历：</span>
</div>
</li>
</ul>
</div>
</div>
<!--信息推荐 end-->
</div>
<div class="main-right fr">
<!--快速链接 begin-->
<div class="links">
<div class="link01"><a href="#">公司简介</a></div>
<div class="link02"><a href="#">联系我们</a></div>
<div class="link03"><a href="#">诚聘英才</a></div>
<div class="link04"><a href="#">关于我们</a></div>
</div>
<!--快速链接 end-->
<!--最新消息 begin-->
<div class="list new">
<div class="title">新闻中心</div>
<div class="content center">
<ul>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
</ul>
</div>
</div>
<!--最新消息 end-->
<!--最新消息 begin-->
<div class="list new">
<div class="title">通知公告</div>
<div class="content center">
<ul>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
<li><i class="i-list"></i><a href="#">环境好，交通方便</a><time>2019-08-08</time></li>
</ul>
</div>
</div>
<!--最新消息 end-->
</div>
</div>
<!--页面主体 end-->
<footer>
<div class="footer-links">
<a href="#">首页</a> |
<a href="#">公司简介</a> |
<a href="#">新闻中心</a> |
<a href="#">通知公告</a> |
<a href="#">产品介绍</a> |
<a href="#">关于我们</a> |
<a href="#">诚聘英才</a> |
<a href="#">联系我们</a>
</div>
<div class="copyright">
https://me.youkuaiyun.com.
</div>
</footer>
</body>
</html>
2.base.css
@charset "utf-8";
/*!
* @名称：base.css
* @功能：1、重设浏览器默认样式
* 2、设置通用原子类
*/
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html {
background: white;
color: black;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
margin: 0;
padding: 0;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,
button,
input,
select,
textarea {
font: 12px "微软雅黑", \5b8b\4f53, arial, sans-serif;
}
input,
select,
textarea {
font-size: 100%;
}
/* 去掉 table cell 的边距并让其边重合 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ie bug：th 不继承 text-align */
th {
text-align: inherit;
}
/* 去除默认边框 */
fieldset,
img {
border: none;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
display: block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,
acronym {
border: none;
font-variant: normal;
}
/* 一致的 del 样式 */
del {
text-decoration: line-through;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-style: normal;
font-weight: 500;
}
/* 去掉列表前的标识，li 会继承 */
ol,
ul {
list-style: none;
}
/* 对齐是排版最重要的因素，别让什么都居中 */
caption,
th {
text-align: left;
}
/* 来自yahoo，让标题都自定义，适应多个系统应用 */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 100%;
font-weight: 500;
}
q:before,
q:after {
content: '';
}
/* 统一上标和下标 */
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* 让链接在 hover 状态下显示下划线 */
/*a:hover {
text-decoration:underline;
}*/
/* 默认不显示下划线，保持页面简洁 */
ins,
a {
text-decoration: none;
}
/* 去除 ie6 & ie7 焦点点状线 */
a:focus,
*:focus {
outline: none;
}
/* 清除浮动 */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
.clearfix {
/*zoom:1;*/ /* for ie6 & ie7 */
}
.clear {
clear: both;
display: block;
font-size: 0;
height: 0;
line-height: 0;
overflow: hidden;
}
/* 设置显示和隐藏，通常用来与 js 配合 */
.hide {
display: none;
}
.block {
display: block;
}
/* 设置浮动，减少浮动带来的 bug */
.fl,
.fr {
display: inline;
}
.fl {
float: left;
}
.fr {
float: right;
}
/* 不浮动的情况下设置居中*/
.center {
margin: 0 auto;
}
3.index.css
@charset "utf-8";
/* CSS Document */
body{
min-width: 1000px;
}
/*页面整体样式*/
.top-warpper {
background: #E8E8E8;
}
/*头部样式*/
.header {
width: 1000px;
height: 90px;
}
.header .logo {
padding-top: 13px;
padding-left: 30px;
}
.header .tel {
padding-top: 15px;
padding-right: 30px;
}
/*导航样式*/
.nav {
width: 100%;
height: 36px;
background: #01559A;
}
.nav nav {
width: 1000px;
height: 36px;
line-height: 36px;
font-size: 14px;
}
.nav nav a {
color: #fff;
}
.nav nav ul li {
float: left;
height: 35px;
margin-top: 1px;
}
.nav nav ul li:hover {
background: #229EDA;
}
.nav nav ul li a {
padding: 0 25px;
}
/*banner样式*/
.banner {
width: 1000px;
height: 350px;
overflow: hidden;
margin-top: 10px;
}
/*main样式*/
.main {
width: 1000px;
overflow: hidden;
}
.main-left {
width: 673px;
}
.main-right {
width: 307px;
}
/*页面模块共用样式*/
.moudle {
overflow: hidden;
}
.moudle .title {
width: 100%;
color: #039bda;
border-bottom: 1px solid #ccc;
font-size: 24px;
line-height: 36px;
}
/*信息推荐样式*/
.notice {
width: 673px;
margin-top: 20px;
}
.notice-down {
margin-top: 30px;
}
.notice .content ul li {
width: 168px;
height: 220px;
float: left;
}
.notice .content ul li a {
padding: 20px 0px 0px 20px;
display: block;
}
.notice .content ul li a .img {
width: 148px;
height: 148px;
overflow: hidden;
}
.notice .content ul li a .img img {
width: 148px;
height: 148px;
}
.notice .content ul li a .txt {
width: 100%;
text-align: center;
line-height: 24px;
color: #333;
padding-top: 10px;
}
/*金牌经济人样式*/
.people {
width: 673px;
overflow: hidden;
margin-top: 30px;
}
.people .title {
border-bottom: 2px solid #ccc;
}
.people .content ul li {
width: 220px;
height: 121px;
float: left;
}
.people .content ul li .img {
width: 100px;
height: 106px;
padding: 20px 0px 0px 20px;
}
.people .content ul li .img img {
width: 100px;
height: 100px;
}
.people .content ul li .txt {
width: 90px;
padding-top: 20px;
}
.people .content ul li .txt span {
display: block;
margin-bottom: 10px;
line-height: 160%;
}
/*快速链接样式*/
.links {
width: 307px;
height: 291px;
}
.link01,
.link02,
.link03,
.link04 {
width: 143px;
height: 110px;
float: left;
font-size: 20px;
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
margin-top: 20px;
}
.link01 a,
.link02 a,
.link03 a,
.link04 a {
color: #fff;
}
.link01 {
background: #636363;
margin-right: 20px;
}
.link02 {
background: #00547F;
}
.link03 {
background: #1991C9;
margin-right: 20px;
}
.link04 {
background: #7BAE02;
}
/*列表样式*/
.list,
.info {
margin-top: 20px;
}
.list .title {
width: 100%;
background: #48A3D2;
font-size: 16px;
color: #fff;
height: 36px;
line-height: 36px;
text-align: center;
}
.list .content,
.info .content {
width: 287px;
line-height: 28px;
font-size: 14px;
padding-top: 15px;
}
.info .content {
width: 673px;
}
.list .content ul li,
.info .content ul li {
width: 287px;
height: 28px;
background: url(../images/images/list.png) 0 -19px no-repeat;
overflow: hidden;
}
.info .content ul li {
width: 664px;
}
.list .content ul li a,
.info .content ul li a {
display: block;
padding-left: 10px;
float: left;
color: #666;
}
.list .content ul li time,
.info .content ul li time {
color: #999;
float: right;
font-size: 13px;
}
.list .content ul li:hover,
.info .content ul li:hover {
background-position: 0 12px;
}
.list .content ul li:hover > a,
.info .content ul li:hover > a {
color: #01559A;
text-decoration: underline;
}
/*最新消息样式*/
.new {
width: 307px;
height: 272px;
background: #E8E8E8;
}
/*页面底部*/
footer {
width: 1000px;
border-top: 1px solid #ccc;
height: 87px;
margin: 0 auto;
margin-top: 30px;
}
footer .footer-links {
line-height: 160%;
color: #969696;
width: 100%;
overflow: hidden;
text-align: center;
padding: 20px 0px 10px 0px;
}
footer .footer-links a {
color: #5e81bd;
}
footer .copyright {
width: 100%;
text-align: center;
color: #666;
}
4.效果显示：
软件采用HBuilder实现，希望你能够用上！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
