目录
1.建本地文件
2.布局
类似这样(这是另一个网页案例的布局)
本次案例效果图:
3.代码、切图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<link rel="stylesheet" href="./inedx.css">
</head>
<body>
<!--头部-->
<div class="wrapper">
<div class="header">
<div class="left"></div>
<div class="right"></div>
</div>
<!--导航栏-->
<div class="head">
<ul>
<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>
<li><a href="#">研究出版</a></li>
<li><a href="#">联系方式</a></li>
</ul>
</div>
<!--banner-->
<div class="title_text">
<p class="">欢迎访问新华产权交易所!</p>
</div>
<div class="img_title">
<img src="./lx5/banner.jpg">
</div>
<!--主体1-->
<div class="main">
<!--左侧部分-->
<div class="left_one">
<div class="box1">
<div class="mm">
<img src="./lx5/images/01.jpg">
<div class="phone">
<div class="img">
<!-- <img src="./lx5/pic1.jpg"> -->
</div>
<p>理财产品即由商业银行和正规金融机构自行设计并发行,将募集到的资金根据产品合同约定投入相关金融市...</p>
</div>
</div>
<div class="list">
<ul>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出新规定买理财应改变习惯</a>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">银行另类理财渐失网点理财师‘闲得发慌’</a>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">银行揽储不再潮涨潮落资金揽客转做定期存款</a>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">投资理财中保险不可或缺</a>
</li>
</ul>
</div>
</div>
<div class="box2">
<div class="mm">
<img src="./lx5/images/tab02.jpg">
<div class="phone2">
<div class="img2">
<!-- <img src="./lx5/pic1.jpg"> -->
</div>
<p>环境交易是指涉及环境类一切权益交易活动。包括:碳交易、碳源碳汇交易、排污权交易、垃圾排放权交易...</p>
</div>
</div>
<div class="list">
<ul>
<li>
<img src="./lx5/dian.jpg">
<a href="#">汽车轻量化正在成为节能减排的‘不二选择1’</a>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">“2014中国能源高层对话”26日在北京举行</a>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">中广核与西班牙EHUSA签署设备采购合同</a>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">美能源部长称积极关注石油出口政策因素</a>
</li>
</ul>
</div>
</div>
<div class="box3">
<div class="mm">
<img src="./lx5/images/tab03.jpg">
</div>
<div class="list3">
<ul>
<li>
<img src="./lx5/dian.jpg">
<a href="#">关于开展各类交易场所现场检查的通知</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
</ul>
</div>
</div>
<div class="box4">
<div class="mm">
<img src="./lx5/images/tab04.jpg">
</div>
<div class="list3">
<ul>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
<li>
<img src="./lx5/dian.jpg">
<a href="#">专家:银行存款考核出</a>
<span>[06-28]</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--右侧部分-->
<div class="left_two">
<div class="top">
<img src="./lx5/img01.jpg">
<img src="./lx5/img02.jpg">
<img src="./lx5/img03.jpg">
</div>
<div class="bottom">
<img src="./lx5/images/lianxi_title.jpg">
<img src="./lx5/lianxi.jpg">
</div>
</div>
</div>
<!--底部-->
<div class="footer">
<p>关于我们 |关于我们 |关于我们 |关于我们 |关于我们 |关于我们 |关于我们 |关于我们 </p>
<p class="FF">COPYRIGHT@2014新华产权交易所WWW.dq.xee.com INC.ALL RIGHTS RESERVED</p>
<P class="GG">黑IC备13004076号-1网站统计 服务热线:400-698-2023</P>
</div>
</div>
</body>
</html>
*{
padding: 0;
margin: 0;
}
/*主体居中*/
.wrapper{
width: 918px;
height: 100%;
margin: auto;
}
/*头部背景*/
.header{
background: url(./lx5/bg.jpg);
}
.left{
width: 980px;
height: 120px;
background-color: brown;
background: url(./lx5/logo.jpg) left no-repeat;
}
.right{
width: 980px;
height: 120px;
margin-top: -125px;
background: url(./lx5/kouhao.jpg) right no-repeat;
}
.head{
width: 980px;
height: 50px;
background-color: rgb(34, 113, 158);
/* background: url(./lx5/bg.jpg); */
}
.head ul li a{
float: left;
color: azure;
padding-left: 45px;
padding-top: 12px;
text-decoration: none;
}
/* .head ul li a:hover{
background-color: rgb(64, 82, 94);
} */
li{
list-style: none;
}
.title_text{
width: 980px;
height: 55px;
}
.title_text p{
padding-top: 13px;
padding-left: 13px;
}
.main{
width: 980px;
height: 600px;
/* background-color: blue; */
}
.left_one{
width: 750px;
height: 600px;
margin-top: 25px;
padding-left: 2px;
/* background-color: brown; */
}
/*理财保险*/
.box1{
width: 370px;
height: 300px;
float: left;
/* background-color: blueviolet; */
}
.phone{
padding: 12px 5px 12px 10px;
}
.phone p{
width: 209px;
height: 60px;
/* background-color: aqua; */
float: right;
font-size: 13px;
padding: 0px 20px;
line-height: 20px;
}
.phone .img{
width: 122px;
height: 60px;
background: url(./lx5/pic1.jpg);
float: left;
margin: 0px -8px;
}
.list{
width: 370px;
height: 100px;
margin: 67px 0px;
padding-bottom: 55px;
/* background-color: violet; */
}
.list ul li{
line-height: 30px;
}
.list ul li a{
text-decoration: none;
line-height: 35px;
color: #444;
}
.cur a{
color: rgb(53, 52, 52);
text-decoration: none;
line-height: 15px;
margin-top: 20px;
}/*理财保险结束*/
.box2{
width: 370px;
height: 300px;
float: left;
}
.phone2{
padding: 12px 5px 12px 10px;
}
.phone2 p{
width: 209px;
height: 60px;
/* background-color: aqua; */
float: right;
font-size: 13px;
padding: 0px 20px;
line-height: 20px;
}
.phone2 .img2{
width: 122px;
height: 60px;
background: url(./lx5/pic2.jpg);
float: left;
margin: 0px -8px;
}
.box3{
width: 370px;
height: 300px;
float: left;
}
.list3 ul li{
line-height: 33px;
/* background-color: #de8383; */
}
.list3 ul li a{
text-decoration: none;
line-height: 35px;
color: #444;
}
.list3 ul li span{
float: right;
padding-right: 30px;
color: #9b9a9a;
}
.list3{
width: 370px;
height: 100px;
margin: 67px 0px;
margin: 10px;
/* background-color: violet; */
}
.box4{
width: 370px;
height: 300px;
float: left;
}
.left_two{
width: 238px;
height: 600px;
float: right;
margin-top: -600px;
margin-right: -62px;
}
/*右侧部分*/
.top{
height: 300px;
line-height: 38px;
margin-left: 10px;
}
.bottom{
margin-top: 5px;
line-height: 37px;
margin-left: 10px;
}
/*底部*/
.footer{
width: 980px;
height: 127px;
margin: auto;
margin-left: 687
px;
/* margin-left: 218px; */
background-color:#0d6b9f;
}
.footer p{
color: white;
text-align: center;
padding-top: 25px;
}
.footer .FF{
color: white;
text-align: center;
padding-top: 8PX;
}
.footer .GG{
color: white;
text-align: center;
padding-top: 6PX;
}