<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.col-auto {
flex: 0 0 auto;
width: auto;
}
.col-1 {
flex: 0 0 auto;
width: 8.333333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.666667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.333333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.666667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.666667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.666667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
.top{
display:flex;
border-bottom:1px solid lightgray;
/* box-shadow:1px 1px ; */
}
#container{
background:linear-gradient(to bottom,white,#EFF1D9);
}
ul{
display:flex;
list-style:none;
}
ul li{
flex:1;
text-align:center;
}
ul li:hover{
background:green;
transition:all 2s;
box-shadow:0px 0px 5px;
}
ul li a{
text-decoration:none;
color:black;
height:50px;
line-height:50px;
}
.product{
display:flex;
}
.product dl dt:hover{
transform: scale(1.2);
transition: all 2s;
}
.product dl{
padding: 10px;
overflow: hidden;
}
.product dd{
padding-top:20px;
/*text-align: center;*/
}
.product .b {
flex:1;
}
.biaoqian{
color:black;
text-decoration: none;
text-align:center;
margin-top:30px;
}
.biaoqian .zi{
border-radius:15px;
padding:8px;
border:1px solid black;
margin-top:20px;
}
.tijiao{
text-align: center;
margin-top:50px;
}
.tijiao #submit{
background-color: forestgreen;
padding: 10px;
border-radius:5px;
padding:10px;
width: 100px;
}
.footer{
background-color: black;
}
.footer h3,h1{
color:white;
text-align: center;
height:25px;
line-height: 25px;
}
</style>
</head>
<body>
<div id="container">
<div class="top">
<span class="col-4"><img src="img/logo.png" /></span>
<ul class="col-8">
<li><a href="#">首页</a></li>
<li><a href="#">产品体验</a></li>
<li><a href="#">加盟合作</a></li>
<li><a href="#">加入我们</a></li>
</ul>
</div>
<div class="biaoqian">
<span class="zi">产品体验</span>
</div>
<div class="product">
<dl class="b">
<dt><a href="#"><img src="img/img1.jpg" ></a></dt>
<dd>大道至简系列</dd>
</dl>
<dl class="b">
<dt><a href="#"><img src="img/img2.jpg" ></a></dt>
<dd>风轻云淡系列</dd>
</dl>
<dl class="b">
<dt><a href="#"><img src="img/img3.jpg" ></a></dt>
<dd>岁月静好系列</dd>
</dl>
<dl class="b">
<dt><a href="#"><img src="img/img4.jpg" ></a></dt>
<dd>万象更新系列</dd>
</dl>
</div>
<div class="biaoqian">
<span class="zi">加盟合作</span>
</div>
<div class="tijiao">
<span class="aa">姓 名:</span> <input type="text" placeholder="请输入姓名" /></p>
<span class="bb">手机号:</span> <input type="text" placeholder="请输入手机号" /></p>
<input type="button" value="提交" id="submit"/>
</div>
<div class="footer">
<h3>24小时服务电话</h3>
<h1>400-0808-256</h1>
<h3>象邦环保科技版权所有</h3>
</div>
</div>
</body>
</html>
