完成如下效果图的板块
卧龙控股.jpg
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div{
left: 0;
right: 0;
margin: auto;
}
#div1{
position: relative;
}
#div1-1{
background-image: url(img/67.jpg);
width: 130px;
height: 74px;
background-color: white;
position: absolute;
left: 10px;
top: 3px;
}
#div1-2{
width: 150px;
height: 50px;
background-color: white;
position: absolute;
right: 10px;
top: 15px;
}
#div2{
left: 0;
right: 0;
margin: auto;
}
#div2 lu li{
float: left;
line-height: 30px;
color: white;
list-style-type: none;
margin-left: 7px;
margin-right: 7px;
font-size: 3px;
padding-left: 2px;
}
#div4 div{
float: left;
}
#div5 div{
float: left;
width: 140px;
height: 150px;
}
#div6 div{
margin-top: 20px;
float: left;
}
</style>
</head>
<body>
<div id="div1" class="div" style="height: 80px;width: 600px;">
<div id="div1-1">
</div>
<div id="div1-2">
<input type="text" style="padding-left: 5px;margin-top: 30px;width: 125px;height: 10px;background-color: #F1F1F1;" placeholder="SEARCH" />
</div>
</div>
<div class="div" id="div2" style="width: 600px;height: 30px;background-color: black;">
<lu>
<li>集团介绍  |</li>
<li>产品中心  |</li>
<li>卧龙市场  |</li>
<li>技术研发  |</li>
<li>国际合作  |</li>
<li>投资者关系  |</li>
<li>新闻资讯  |</li>
<li>人力资源</li>
</lu>
</div>
<div class="div" id="div3" style="width: 600px;height: 300px;background-color: red;background: url(img/sa.jpg);">
</div>
<div class="div" id="div4" style="width: 600px;height: 150px;">
<div style="width: 300px;height: 150px;">
<h4>新闻资讯</h4>
</div>
<div style="width: 150px;height: 150px;background-color: #F1F1F1">
<h4>卧龙介绍</h4>
</div>
<div style="width: 150px;height: 150px;">
<h4>人工招聘</h4>
</div>
</div>
<div id="div5" class="div" style="width: 600px;height: 150px;">
<h4>卧龙市场</h4>
<div id="" style="background-color: brown;">
</div>
<div id="" style="background-color: black;margin-left: 11px;margin-right: 6px;">
</div>
<div id="" style="background-color: blue;margin-left: 6px;margin-right: 11px;">
</div>
<div id="" style="background-color: silver;">
</div>
</div>
<div id="div6" class="div" style="width: 600px;height: 300px;background-color: #F1F1F1;margin-top: 75px;margin-bottom: 20px;">
<h6> </h6>
<div id="" style="width: 240px;height: 250px;margin-top: -20px;margin-left: 20px;">
<h4>产品中心</h4>
<div id="" style="width: 220px;height: 230px;margin-top: -20px;margin-left: -5px;border-top: 1px black solid;">
</div>
</div>
<div id="" style="width: 110px;height: 250px;margin-top: -20px;margin-left: 20px;">
<h4>研发技术</h4>
<div id="" style="width: 100px;height: 230px;margin-top: -20px;margin-left: -5px;border-top: 1px black solid;">
</div>
</div>
<div id="" style="width: 190px;height: 250px;margin-top: -20px;margin-left: 20px;">
<h4>营销网络</h4>
<div id="" style="width: 180px;height: 230px;margin-top: -20px;margin-left: -5px;border-top: 1px black solid;">
</div>
</div>
</div>
</body>
</html>
网友评论