Day003 - 作业（2018-11-01）
2018-11-01 本文已影响0人
雨雨雨90
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>卧龙控股</title>
<style type="text/css">
#div1{
width: 300px;
height: 30px;
/* background-color: red; */
float: right;
position: absolute;
right: 0px;
top: 30px;
}
#div2{
/* background-color: red; */
float: left;
border-left: solid white 1px;
border-right: solid white 1px;
width: 11%;
height: 60px;
text-align: center;
color: white;
}
#div3{
width: 25%;
height: 80%;
float: left;
}
</style>
</head>
<body>
<!-- 标题栏 -->
<div id="" style="position: relative; overflow: hidden;">
<div id="" style=" float: left; ">
<img src="img/图片1-左上标题.jpg" style="padding-left: 20px;"/>
</div>
<div id="div1">
<form action="" method="get">
<input type="text" name="search" id="input1" value="" placeholder="SEARCH……"
style="background-color: lightgray; "/>
<input type="submit" value="查找"/>
</form>
</div>
</div>
<!-- 菜单栏 -->
<div id="" style="overflow: hidden; background-color: #000000; ">
<div id="div2" style="margin-left: 5%;"><p style="vertical-align: middle;">集团介绍</p></div>
<div id="div2"><p style="vertical-align: middle;">产品中心</p></div>
<div id="div2"><p style="vertical-align: middle;">卧龙市场</p></div>
<div id="div2"><p style="vertical-align: middle;">技术开发</p></div>
<div id="div2"><p style="vertical-align: middle;">国际合作</p></div>
<div id="div2"><p style="vertical-align: middle;">投资者关系</p></div>
<div id="div2"><p style="vertical-align: middle;">新闻资讯</p></div>
<div id="div2" style="margin-right: 5%;"><p style="vertical-align: middle;">人力资源</p></div>
</div>
<!-- 头条图片 -->
<div id="" style="height: 600px; background-color: #7FFF00; position: relative;">
<!-- 图片 -->
<div id="" style="float: left; width: 100%; height: 100%; background-color: #7FFFD4;">
</div>
<!-- 红色长条 -->
<div id="" style="width: 44%; height: 10px; float: left;
background-color: red; position: absolute; left: 5%;">
</div>
<!-- 红色文本框 -->
<div id="" style="width: 25%; height: 200px; padding: 30px; background-color: red;
float: left; position: absolute; left: 5%; bottom: 100px; border-top-right-radius: 50px;">
<h2 align="center"; style="font-size: 40px; color: white;">应用于高铁领域</h2>
<hr color="white">
<p style="font-size: 20px; color: white;">中国电机行业……</p>
<a href="https://www.baidu.com" target="_blank" style="color: white; font-size: 15px;">>查找更多</a>
<!-- <p style="">查看更多</p> -->
</div>
<div id="" style="width: 100px; height: 40px; background-color: gray;
float: right; position: absolute; bottom: 0px; right: 20px;">
</div>
</div>
<!-- 新闻资讯、卧龙介绍、人才招聘 -->
<div id="" style="height: 300px; width: 100%; background-color: red;
float: left; ">
<div style="width: 50%; height: 100%; background-color: #7FFF00; float: left;">
<h2 style="padding: 10px;">新闻资讯</h2>
<ul style="padding: 40px;">
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
<li>XX</li>
</ul>
</div>
<div style="width: 25%; height: 100%; background-color: #A9A9A9; float: left;">
<h2 style="padding: 10px;">卧龙介绍</h2>
<p style="padding: 10px;">XX</p>
<p style="padding: 10px;">XX</p>
</div>
<div style="width: 25%; height: 100%; background-color: #7FFF00; float: left;">
<h2 style="padding: 10px;">人才招聘</h2>
<p style="padding: 10px;">XX</p>
<button type="button" style="margin-left: 10px; background-color: gray; color: white;">MORE -></button>
</div>
</div>
<!-- 卧龙市场 -->
<div id="" style="height: 300px; width: 100%; background-color: yellowgreen;
float: left">
<div id="" style="width: 100%; height: 20%; background-color: white;">
<h2 style="padding: 0px; margin-top: 0px;">卧龙市场</h2>
</div>
<div id="div3" style="background-color: #000000;"></div>
<div id="div3" style="background-color: #008000;"></div>
<div id="div3" style="background-color: #008B8B;"></div>
<div id="div3" style="background-color: #00AA88;"></div>
</div>
<!-- 产品中心、技术研发、营销网络 -->
<div id="" style="height: 300px; width: 100%; background-color: gray;
float: left;">
<div style="width: 50%; height: 100%; background-color: #7FFF00; float: left;"></div>
<div style="width: 22%; height: 100%; background-color: #A9A9A9; float: left;"></div>
<div style="width: 28%; height: 100%; background-color: #7FFF00; float: left;"></div>
</div>
<!-- 页尾 -->
<div id="" style="height: 100px; width: 100%; float: left; position: sticky;">
</div>
</body>
</html>
