day3 作业 - 卧龙控股首页
2018-12-08 本文已影响0人
Gary134
卧龙控股
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
font-size: 17px;
position: absolute;
left: 300px;
top: 40px;
}
#div2{
position: absolute;
right: 100px;
top: 40px;
}
#div3{
font-size: 2px;
position: absolute;
left: 300px;
top: 60px;
}
/*#div4{
background-color: brown;
color: white;
text-align: center;
width: 12.5%;
padding: 20px;
}*/
</style>
</head>
<body>
<div style="height: 100px; background-color: red ;">
<div id="div1" style="font-family: '微软雅黑'; font-weight: 600; letter-spacing: 10px;">卧龙控股</div>
<div id="div2"><input type="text" placeholder="SEARCH..." style="width: 220px; height: 25px; padding-left:10px; background-image: url(img/sousuo.png); background-repeat: no-repeat; background-position: right; background-size: 40px 10px;"/></div>
<div id="div3">WOLO HOLOING</div>
</div>
<div id="div4" style="overflow: hidden;">
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.4%; height:65px; float: left;">集团介绍</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.5%; height:65px; float: left; border-left: 1px solid blanchedalmond">产品中心</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.5%; height:65px; float: left; border-left: 1px solid blanchedalmond">卧龙市场</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.5%; height:65px; float: left; border-left: 1px solid blanchedalmond">技术研发</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.5%; height:65px; float: left; border-left: 1px solid blanchedalmond">国际合作</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.5%; height:65px; float: left; border-left: 1px solid blanchedalmond">投资者关系</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.5%; height:65px; float: left; border-left: 1px solid blanchedalmond">新闻资讯</div>
<div style="background-color: brown; color: white; text-align: center; line-height:65px; width: 12.1%; height:65px; float: left; border-left: 1px solid blanchedalmond">人力资源</div>
<div><img src="img/main.png"/></div>
</div>
<div style="overflow: hidden;">
<div style="width: 50%; background-color: white; height: 300px; float: left;">
<font style="position: relative; top: 30px; left: 15px;">新闻资讯</font>
</div>
<div style="width: 25%; background-color: whitesmoke; height: 300px; float: left">
<font style="position: relative; top: 30px; left: 15px;">卧龙介绍</font>
</div>
<div style="width: 25%; background-color: white; height: 300px; float: right">
<font style="position: relative; top: 20px; left: 15px;">人才招聘</font>
</div>
</div>
<div>
<div style="height: 50px; background-color: deepskyblue;">
<font style="position: relative; top: 20px; left: 15px;">卧龙市场</font>
</div>
<div>
<img src="img/1.png" style="padding: 20px; width:21.9%"/>
<img src="img/2.png" style="padding: 20px; width:21.9%"/>
<img src="img/3.png" style="padding: 20px; width:21.9%"/>
<img src="img/4.png" style="padding: 20px; width:21.9%"/>
</div>
<div id="" style="overflow: hidden;">
<div id="" style="width: 21.9%; padding-left:20px; padding-right:20px; float: left; height: 90px;">
<font style="font-size: 19px; color: rgb(150, 150,150); ">交通轨道：由于采用电气牵引，而且轮轨摩擦阻力较小，与公共...</font>
</div>
<div style="width: 21.9%; padding-left:25px ; padding-right:20px; float: left; height: 90px;">
<font style="font-size: 19px; color: rgb(150, 150,150); ">能源环保：由于不断上涨的能源消耗和我们的专业知识，维护可持续...</font>
</div>
<div id="" style="width: 21.9%; padding-left:25px; padding-right:20px; float: left; height: 90px;">
<font style="font-size: 19px; color: rgb(150, 150,150); ">航空与舰船：如果你是在公海行驶，你需要确保你的船只的电力系统...</font>
</div>
<div id="" style="width: 21.9%; padding-left:24px; padding-right:20px; float: left; height: 90px;">
<font style="font-size: 19px; color: rgb(150, 150,150); ">石油、天然气及采矿：在市场中的安全性，可靠性，效率和最短的停机...</font>
</div>
</div>
</div>
<div style="background-color: #DCDCDC; height: 400px;">
<div>
<a style="position:relative; top: 30px; padding-left: 20px;padding-right: 620px;">产品中心</a>
<a style="position:relative; top: 30px; padding-left: 20px; padding-right: 180px;">技术研发</a>
<a style="position:relative; top: 30px; padding-left: 20px;">营销网络</a>
</div>
</div>
<div id="" style="background-color: white; height: 80px; padding-left: 20px; padding-top: 30px;">
<div style="font-size: 13px;">
<a style="color: rgb(150,150,150); padding: 10px;" target="_blank" href="http://www.wolong.com/sitemenu!footer.htm?info=sitemap&id=sitemap">网站地图</a>|
<a style="color: rgb(150,150,150); padding: 10px;" target="_blank" href="http://www.wolong.com/sitemenu!footer.htm?info=contact&id=contract">联系我们</a>|
<a style="color: rgb(150,150,150); padding: 10px;" target="_blank" href="http://www.wolong.com/wljy">关注卧龙</a>|
<a style="color: rgb(150,150,150); padding: 10px;" target="_blank" href="">采购系统入口</a>
</div>
</div>
</body>
</html>
